I'm working with bootstrap3 and django. I want to update my navbar to add a dropdown list of links in my navbar on the right . My bootstrap code:
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Bob and Company</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current Properties</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Village, Texas</a>
<a class="dropdown-item" href="#">Lake, Washington</a>
</div>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
so far I'm getting the screenshot. How can i fix this to get this working?
edit:
thank you, that's much better . Can the links be made verical instead of horizontal. Please see screenshot:
Is it working if you do it like this?
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</li>
Related
I have tried to get this navbar-brand item centered on the navbar but nothing has worked so far. Can someone help?
<!DOCTYPE html>
<html>
<head>
<title>Example page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'a_better_place:home' %}">
A Better Place
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'a_better_place:contact' %}">
Contact
</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
I am using bootstrap framework
The answer above works but it's setting only margins to left
the best option is to use .mx-auto sets margin on left and right of the horizontal axis
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-4"></div>
<div class="col-4 text-center">
<a class="navbar-brand" href="#">
A Better Place
</a>
</div>
<div class="col-4 collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Contact
</a>
</li>
</ul>
</div>
</nav>
Make use of row and col class:
<!DOCTYPE html>
<html>
<head>
<title>Example page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-4"></div>
<div class="col-4 text-center">
<a class="navbar-brand" href="{% url 'a_better_place:home' %}">
A Better Place
</a>
</div>
<div class="col-4 collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'a_better_place:contact' %}">
Contact
</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
<li class="mod-tile">
<ul class="gallery-hidden gallery">
<li class="thumb" data-src="https://staticdelivery.nexusmods.com/mods/2531/images/1982/1982-1579465585-271404739.png" data-sub-html="Stracker's Loader " data-exthumbimage="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/1982/1982-1579465585-271404739.png" />
</ul>
<div data-mod-id="1982" data-game-id="2531" class="mod-tile-left ">
<div class="expandtile">
<ul class="btnexpand btnoverlay inline-flex">
<div class="padding"></div>
<svg title="" class="icon-plus"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-plus"></use></svg> <li>
<ul>
<li><a class="mod-view" href="index.html">View mod page</a></li>
<li><a class="mod-gallery" href="index.html">View image gallery</a></li>
</ul>
</li>
</ul>
</div>
<a class="mod-image" href="index.html">
<figure class="image_figure">
<img class="back" src="https://www.nexusmods.com/assets/images/default/noimage.svg" width="600" height="338">
<div class="fore_div_mods">
<img class="fore" onerror="imgError(this,'https://www.nexusmods.com/assets/images/default/noimage.svg')" loading="lazy" src="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/1982/1982-1579465585-271404739.png" alt="Stracker's Loader" title="Stracker's Loader">
</div>
</figure>
</a>
<div class="tile-desc motm-tile">
<div class="fadeoff"></div>
<div class="tile-content">
<h3>Stracker's Loader</h3>
<div class="meta clearfix">
<div class="category">
Utilities
</div>
<time class="date" datetime="2020-01-19 20:26"> <span class="label">Uploaded: </span>
19 Jan 2020 </time>
<div class="date"><span class="label">Last Update:</span> 04 Dec 2020</div>
<div class="realauthor"><span class="label">Author: </span> Stracker</div>
<div class="author"><span class="label">Uploader: </span> Stracker</div>
</div>
<p class="desc">
Restores full nativePC functionality. </p>
</div>
</div>
<div class="tile-data">
<ul class="clearfix">
<li class="sizecount inline-flex">
<svg title="" class="icon icon-filesize"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-filesize"></use></svg> <span class="flex-label">
703KB </span>
</li>
<li class="endorsecount inline-flex">
<svg title="" class="icon icon-endorse"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-endorse"></use></svg> <span class="flex-label">26.0k</span>
</li>
<li class="downloadcount inline-flex">
<svg title="" class="icon icon-downloads"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-downloads"></use></svg> <span class="flex-label"> -- </span>
</li>
</ul>
</div>
</div>
<div class="mod-tile-right">
<div class="tile-desc">
<div class="fadeoff"></div>
<div class="tile-content">
<h3>Stracker's Loader</h3>
<div class="meta clearfix">
<div class="category">
Utilities
</div>
<time class="date" datetime="2020-01-19 20:26"> <span class="label">Uploaded: </span>
19 Jan 2020 </time>
<div class="date"><span class="label">Last Update:</span> 04 Dec 2020</div>
<div class="author"><span class="label">Author: </span>Stracker</div>
</div>
<p class="desc">
Restores full nativePC functionality. </p>
</div>
</div>
</div>
</li>
<li class="mod-tile">
<ul class="gallery-hidden gallery">
<li class="thumb" data-src="https://staticdelivery.nexusmods.com/mods/2531/images/112/112-1579010242-745113274.png" data-sub-html="Souvenir's Light Pillar " data-exthumbimage="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/112/112-1579010242-745113274.png" />
<li class="thumb" data-src="https://staticdelivery.nexusmods.com/mods/2531/images/112/112-1579010135-1239485031.png" data-sub-html="Souvenir's Light Pillar " data-exthumbimage="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/112/112-1579010135-1239485031.png" />
<li class="thumb" data-src="https://staticdelivery.nexusmods.com/mods/2531/images/112/112-1579010181-399571475.png" data-sub-html="Souvenir's Light Pillar " data-exthumbimage="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/112/112-1579010181-399571475.png" />
<li class="thumb" data-src="https://staticdelivery.nexusmods.com/mods/2531/images/112/112-1579259504-344088346.png" data-sub-html="Souvenir's Light Pillar " data-exthumbimage="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/112/112-1579259504-344088346.png" />
</ul>
<div data-mod-id="112" data-game-id="2531" class="mod-tile-left ">
<div class="expandtile">
<ul class="btnexpand btnoverlay inline-flex">
<div class="padding"></div>
<svg title="" class="icon-plus"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-plus"></use></svg> <li>
<ul>
<li><a class="mod-view" href="index.html">View mod page</a></li>
<li><a class="mod-gallery" href="index.html">View image gallery</a></li>
</ul>
</li>
</ul>
</div>
<a class="mod-image" href="index.html">
<figure class="image_figure">
<img class="back" src="https://www.nexusmods.com/assets/images/default/noimage.svg" width="600" height="338">
<div class="fore_div_mods">
<img class="fore" onerror="imgError(this,'https://www.nexusmods.com/assets/images/default/noimage.svg')" loading="lazy" src="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/112/112-1579010242-745113274.png" alt="Souvenir's Light Pillar" title="Souvenir's Light Pillar">
</div>
</figure>
</a>
<div class="tile-desc motm-tile">
<div class="fadeoff"></div>
<div class="tile-content">
<h3>Souvenir's Light Pillar</h3>
<div class="meta clearfix">
<div class="category">
Visuals and Graphics
</div>
<time class="date" datetime="2018-09-03 19:58"> <span class="label">Uploaded: </span>
03 Sep 2018 </time>
<div class="date"><span class="label">Last Update:</span> 17 Jan 2020</div>
<div class="realauthor"><span class="label">Author: </span> 2hh8899</div>
<div class="author"><span class="label">Uploader: </span> 2hh8899</div>
</div>
<p class="desc">
It lights up the souvenirs for making them easier to find.유실물을 찾기 쉽게 하기 위해 빛기둥을 박아넣었습니다. </p>
</div>
</div>
<div class="tile-data">
<ul class="clearfix">
<li class="sizecount inline-flex">
<svg title="" class="icon icon-filesize"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-filesize"></use></svg> <span class="flex-label">
59KB </span>
</li>
<li class="endorsecount inline-flex">
<svg title="" class="icon icon-endorse"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-endorse"></use></svg> <span class="flex-label">22.7k</span>
</li>
<li class="downloadcount inline-flex">
<svg title="" class="icon icon-downloads"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-downloads"></use></svg> <span class="flex-label"> -- </span>
</li>
</ul>
</div>
</div>
<div class="mod-tile-right">
<div class="tile-desc">
<div class="fadeoff"></div>
<div class="tile-content">
<h3>Souvenir's Light Pillar</h3>
<div class="meta clearfix">
<div class="category">
Visuals and Graphics
</div>
<time class="date" datetime="2018-09-03 19:58"> <span class="label">Uploaded: </span>
03 Sep 2018 </time>
<div class="date"><span class="label">Last Update:</span> 17 Jan 2020</div>
<div class="author"><span class="label">Author: </span>2hh8899</div>
</div>
<p class="desc">
It lights up the souvenirs for making them easier to find.유실물을 찾기 쉽게 하기 위해 빛기둥을 박아넣었습니다. </p>
</div>
</div>
</div>
</li>
<li class="mod-tile">
<ul class="gallery-hidden gallery">
<li class="thumb" data-src="https://staticdelivery.nexusmods.com/mods/2531/images/43/43-1534824818-145235267.png" data-sub-html="MHW Transmog " data-exthumbimage="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/43/43-1534824818-145235267.png" />
<li class="thumb" data-src="https://staticdelivery.nexusmods.com/mods/2531/images/43/43-1534825195-804021906.png" data-sub-html="MHW Transmog " data-exthumbimage="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/43/43-1534825195-804021906.png" />
</ul>
<div data-mod-id="43" data-game-id="2531" class="mod-tile-left ">
<div class="expandtile">
<ul class="btnexpand btnoverlay inline-flex">
<div class="padding"></div>
<svg title="" class="icon-plus"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-plus"></use></svg> <li>
<ul>
<li><a class="mod-view" href="index.html">View mod page</a></li>
<li><a class="mod-gallery" href="index.html">View image gallery</a></li>
</ul>
</li>
</ul>
</div>
<a class="mod-image" href="index.html">
<figure class="image_figure">
<img class="back" src="https://www.nexusmods.com/assets/images/default/noimage.svg" width="600" height="338">
<div class="fore_div_mods">
<img class="fore" onerror="imgError(this,'https://www.nexusmods.com/assets/images/default/noimage.svg')" loading="lazy" src="https://staticdelivery.nexusmods.com/mods/2531/images/thumbnails/43/43-1534824818-145235267.png" alt="MHW Transmog" title="MHW Transmog">
</div>
</figure>
</a>
<div class="tile-desc motm-tile">
<div class="fadeoff"></div>
<div class="tile-content">
<h3>MHW Transmog</h3>
<div class="meta clearfix">
<div class="category">
Utilities
</div>
<time class="date" datetime="2018-08-21 05:37"> <span class="label">Uploaded: </span>
21 Aug 2018 </time>
<div class="date"><span class="label">Last Update:</span> 04 Dec 2020</div>
<div class="realauthor"><span class="label">Author: </span> Approved</div>
<div class="author"><span class="label">Uploader: </span> FineNerds</div>
</div>
<p class="desc">
A mod that allows you to hot swap your appearance with any armor of your choice. Visible to other players!As with any mod for games that don't support mods. This is USE AT YOUR OWN RISK. </p>
</div>
</div>
<div class="tile-data">
<ul class="clearfix">
<li class="sizecount inline-flex">
<svg title="" class="icon icon-filesize"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-filesize"></use></svg> <span class="flex-label">
260KB </span>
</li>
<li class="endorsecount inline-flex">
<svg title="" class="icon icon-endorse"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-endorse"></use></svg> <span class="flex-label">12.2k</span>
</li>
<li class="downloadcount inline-flex">
<svg title="" class="icon icon-downloads"><use xlink:href="https://www.nexusmods.com/assets/images/icons/icons.svg#icon-downloads"></use></svg> <span class="flex-label"> -- </span>
</li>
</ul>
</div>
</div>
<div class="mod-tile-right">
<div class="tile-desc">
<div class="fadeoff"></div>
<div class="tile-content">
<h3>MHW Transmog</h3>
<div class="meta clearfix">
<div class="category">
Utilities
</div>
<time class="date" datetime="2018-08-21 05:37"> <span class="label">Uploaded: </span>
21 Aug 2018 </time>
<div class="date"><span class="label">Last Update:</span> 04 Dec 2020</div>
<div class="author"><span class="label">Author: </span>FineNerds</div>
</div>
<p class="desc">
A mod that allows you to hot swap your appearance with any armor of your choice. Visible to other players!As with any mod for games that don't support mods. This is USE AT YOUR OWN RISK. </p>
</div>
</div>
</div>
</li>
So I want selenium to open the first link from that has the class "mod-tile" then it will do a script that I have made, then I want it to open the next link that has the same class "mod-tile". Is there any way to specify this? (btw don't mind the description I just copied the first 3 mod tiles that appeared on the website)
You can get a list of elements with the find_elements_by_class_name() method.
Then iterate through the list of elements.
[UPDATED]
Following should click the fist link (//a) within the "mod-tile" elements
elements = driver.find_elements_by_class_name("mod-tile")
print("mod-title count {}".format(len(elements)))
for element in range(len(elements)):
elements[element].find_element_by_xpath("//a").click()
I am creating the dashboard view for my CRM. However while displaying the card view, only two of the three card views are visible. Can anyone help me regarding this? Is this a code formatting issue?
I am adding an image of the dashboard for my CRM below as well as the code for the cards given below.
example.html:
{% extends 'base.html' %}
{% block content %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4 mt-4">
<h1 class="h3 mb-0 text-gray-800">Welcome to NexCRM</h1>
<i class="fas fa-download fa-sm text-white-50"></i> Generate Report
</div>
<!-- Main Content Here -->
<div class="row">
<!-- Company Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Companies</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">4,083</div>
</div>
<div class="col-auto">
<i class="fas fa-building fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Company Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Companies</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">4,083</div>
</div>
<div class="col-auto">
<i class="fas fa-building fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Contacts</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">18,002</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Earnings Overview</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Pie Chart -->
<div class="col-xl-4 col-lg-5">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart"></canvas>
</div>
<div class="mt-4 text-center small">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Direct
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Social
</span>
<span class="mr-2">
<i class="fas fa-circle text-info"></i> Referral
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
{% endblock content %}
<div class="modal left fade" id="sidebar_left" tabindex="1" role="dialog" aria-labelledby="sidebar_left">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close go-left" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="close icon-angle-left"></i></span></button>
<h4 class="modal-title go-text-right" id="sidebar_left"><i class="icon_set_1_icon-65 go-right"></i> Settings</h4>
</div>
<ul class="nav navbar-nav navbar-side navbar-right sidebar go-left">
<li id="li_myaccount">
<i class="icon_set_1_icon-70 go-right"></i> My Account <b class="lightcaret mt-2 go-left"></b>
<ul class="dropdown-menu">
<li><a class="go-text-right" href="a.html"> Login</a></li>
<li><a class="go-text-right" href="b.html"> Sign Up</a></li>
</ul>
</li>
<div class="header-brdr pull-left hidden-xs hidden-md go-left"></div>
<li class="dropdown">
<a class="dropdown-toggle go-text-right" data-toggle="dropdown" href="#">
<strong><i class="icon-money-2 go-right"></i>
USD </strong>
</a>
<ul class="dropdown-menu wow fadeIn">
I am trying to click the a.html but every time I got an ElementNotVisibleException
I am using the following line to do the job. Any suggestions ..
elem=driver.find_element_by_id('li_myaccount').click()
I am creating a website, where I want to implement Up and Down voting button. I am using Flask and Bootstrap for that. So, if anyone can tell me how to add up and down votes without using jQuery?
Bootstrap version is 4, so no glyphicons are available. Any help?
<div class="card">
<div class="card-body">
{{{{Need those buttons here}}}}
<div class="row" style="margin-left: 5px;">
{{posts[post]["user"]}}
<em> {{posts[post]["title"]}} </em>
</div>
<div class="row" style="margin-left: 5px;">
/user311
<a target="_blank" href={{ posts[post]["replies"]["link"] }}>{{ posts[post]["replies"]["head"] }} </a>
</div>
</div>
</div>
Just link to a font awesome CDN and then add this to your card-body div:
<div>
<i class="fa fa-caret-up fa-2x"></i>
</div>
<div>
<i class="fa fa-caret-down fa-2x"></i>
</div>
N.B. Change fa-2x according to the size you want for the icon.
jsfiddle: https://jsfiddle.net/9j0ggd5g/5/