So I was playing around with the new Bootswatch based on Bootstrap 4 but somehow the "Cards" have no margin and the dropdown in the menu doesn't work. Can someone explain to me what I'm doing wrong here? Do I have to add the margin myself? And why doesn't the Dropdown work?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make <br>up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
The card margin doesn't have anything to do with this. The problem is with the JS.
I changed tether and Bootstrap alpha 6 JS to PopperJs and Bootstrap beta 2 JS. (see the Bootstrap docs)
I also added the class mt-3 to the container for some margin. Keep that if you want.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make <br>up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Related
I have the bootstrap nav snippet below:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg"><a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item" href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</nav>
</div>
</nav>
I have copied their example on the bootstrap documentation site where possible.
I want to get the second <ul> pushed to the right so am using mr-auto as they do in their example however it's not working for me like it is in the example, I don't understand why. I even tried adding the class d-flex to the #navbarMain div but still no luck.
Even running through the values in the inspector shows everything the same as in the example as far as I can see.
Can someone tell me why this isn't working?
What you want from image you attached:
What my code produces to match your image:
Updated Code: Demo on JsFiddle
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
<a class="navbar-brand" href="#">Navbar</a>
<a class="navbar-item text-white pr-2" href="#">Home</a>
<a class="navbar-item text-white pr-2" href="#">Link</a>
<div class="dropdown">
<button class="btn text-white dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<button class="btn btn-disabled text-white pr-2" disabled>Disabled</button>
<nav class="navbar navbar-dark bg-dark ml-auto mr-1">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Found the issue, it was where I had used a container to constrain the nav elements:
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg">
You can have nested nav's but shouldn't have nested navbar classes, removing the additional <nav class="navbar"> made everything work:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item"
href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</div>
</nav>
I'm trying to get the bootstrap 4 navigation bar when toggled, to slide down upon clicking a dropdown menu. It slides when the toggle button is pressed, but then when a dropdown menu is clicked, it just expands normally with no transitioning. Any help or guidance would be greatly appreciated.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #122a38;">
<a class="navbar-brand" href="#">
<img src="#" width="80" height="40" alt="">
</a>
<span class="navbar-brand mb-0 h1">Project</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarNav" style="height:auto;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<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">
Projects
</a>
<div class="dropdown-menu animate__animated animate__slideInUp" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Project 1</a>
<a class="dropdown-item" href="#">Project 2</a>
<a class="dropdown-item" href="#">Project 3</a>
<a class="dropdown-item" href="#">See All</a>
</div>
</li>
</ul>
<div class="d-none d-lg-block">
<form class="form-inline">
<div class="input-group input-group-sm mr-sm-2">
<input type="email" class="form-control mr-sm-2" aria-label="Username" type="email" placeholder="Email" aria-label="Email">
<input type="password" class="form-control" aria-label="Password" type="Password" placeholder="Password" aria-label="Password">
</div>
<button class="btn btn-sm btn-success my-2 my-sm-0 mr-sm-2" type="submit">Login/Logout</button>
<button class="btn btn-sm btn-primary my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
<div class="d-block d-lg-none">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Sliding Menu
Thanks kindly everyone!
Please see the attached image for reference.
What should happen
i remove the classes .animate__animated .animate__slideInUp from your div wich contains a list
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #122a38;">
<a class="navbar-brand" href="#">
<img src="#" width="80" height="40" alt="">
</a>
<span class="navbar-brand mb-0 h1">Project</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarNav" style="height:auto;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<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">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Project 1</a>
<a class="dropdown-item" href="#">Project 2</a>
<a class="dropdown-item" href="#">Project 3</a>
<a class="dropdown-item" href="#">See All</a>
</div>
</li>
</ul>
<div class="d-none d-lg-block">
<form class="form-inline">
<div class="input-group input-group-sm mr-sm-2">
<input type="email" class="form-control mr-sm-2" aria-label="Username" type="email" placeholder="Email" aria-label="Email">
<input type="password" class="form-control" aria-label="Password" type="Password" placeholder="Password" aria-label="Password">
</div>
<button class="btn btn-sm btn-success my-2 my-sm-0 mr-sm-2" type="submit">Login/Logout</button>
<button class="btn btn-sm btn-primary my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
<div class="d-block d-lg-none">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I put data-toggle="collapse" and data-target="#collapsibleNavbar" from button to top tag.
Now, it's working. please have a look at it. it's work same as you want
or not.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark " data-toggle="collapse" data-target="#collapsibleNavbar">
<a class="navbar-brand" href="#">Project</a>
<button class="navbar-toggler bg-dark d-lg-none d-xl-none" type="button" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Project 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 4</a>
</li>
<li class="nav-item ">
<a class="nav-link float-lg-right" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
<!DOCTYPE.html>
<html>
<head>
<title>Science Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Downloads/heisenberg.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<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">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<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>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Downloads/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
"About" and "Contact" tab in the navigation bar are not acting like links. Earlier every tab was okay. Moreover, search button is also not working properly. Please suggest some changes.
I am using bootstrap for building this website and copied the navigation code from here https://getbootstrap.com/docs/4.4/components/navbar/.
<!DOCTYPE.html>
<html>
<head>
<title>Science Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Downloads/heisenberg.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<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">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<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>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Downloads/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Downloads/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
you have made a small mistake here I can tell you what is it.
You have your carousel navigation buttons outside of your #carouselExampleControls div, and as they are position absolute so they are overlapping to your menu. so just put your both carousel button in the main carousel div. that's it. Find the corrected code in the snippet.
So using bootstrap 4 I've created a navbar that collapses into a button when the screen gets too small. When it isn't collapsed, the navbar is setup in the perfect order. However, when it does collapse behind a button, one item (the icon image) is centered while the rest of the items are to the left. How can I make the icon go to the left ONLY when the navbar has collapsed (like the rest of the items).
I've tried doing "float-md-left" on the icon image, however that made no changes.
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-auto">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Current Stadium</a>
</li>
<a class="navbar-brand mx-auto float-sm-left" href="#"><i class="fas fa-football-ball"></i></a>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</a>
</li>
<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">
Stadium History
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">2017 Stadium</a>
<a class="dropdown-item" href="#">2018 Stadium</a>
<a class="dropdown-item" href="#">2019 Stadium</a>
</div>
</li>
</ul>
</div>
</nav>
I got you point. this is happing due to mx-auto class.
Is there any specific reason for applying mx-auto class? Otherwise, you can remove itself.
Also, please remove float class.
Please have a look on below code.
<a class="navbar-brand mx-lg-auto" href="#"><i class="fas fa-football-ball"></i></a>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-auto">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Current Stadium</a>
</li>
<a class="navbar-brand mx-lg-auto" href="#"><i class="fas fa-football-ball"></i></a>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</a>
</li>
<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">
Stadium History
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">2017 Stadium</a>
<a class="dropdown-item" href="#">2018 Stadium</a>
<a class="dropdown-item" href="#">2019 Stadium</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I'm working on a navigation bar where 2 items have drop-down menus. The first drop-down works fine but the second one always triggers the first one. I've tested it after removing any extra styles I've added but it still isn't working.
I'm sure it's something obvious but I just can't seem to figure it out.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="css/app.css" rel="stylesheet" />
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="assets/logo.png">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="./index.html">
Home
</a>
<a class="nav-item nav-link" href="./tour.html">
Tour
</a>
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
<a class="nav-item nav-link" href="./about.html">
About
</a>
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
In my case, the issue was I didn't wrap the entire dropdown (both the triggering element, and the menu items) inside a <div class="dropdown">. It still worked, until I added a second dropdown and found it was being triggered by the wrong element.
Bootstrap 4 dropdowns should have the following basic structure:
<div class="dropdown">
Triggering Element
<div class="dropdown-menu">
Item One
Item Two
Item Three
</div>
</div>
I was missing the outer <div>.
Please use <li class="nav-item"><li> in navbar not use direct a tag. Like below code.
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="assets/logo.png">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">
Home
</a>
<li>
<li class="nav-item">
<a class="nav-link" href="./tour.html">
Tour
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">
About
</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</li>
</div>
</div>
</div>
</nav>
The suggestion from the other answer regarding a tags for dropdowns in navbar is WRONG.
You certainly CAN use purely a tags the way you were using them without any problems.
Only when it comes to multiple drop-down items, when you have more than one drop-down, you need to wrap them in a div with the class btn-group like shown in the code snippet below. (strictly speaking, the first drop-down doesn't need to be wrapped this way, but I did it anyway for consistency)
Click "run code snippet" below and expand to full page for live testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="https://placehold.it/30">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="./index.html">
Home
</a>
<a class="nav-item nav-link" href="./tour.html">
Tour
</a>
<div class="btn-group">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
</div>
<a class="nav-item nav-link" href="./about.html">
About
</a>
<div class="btn-group">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>