I have the below code snippet where in my navbar I have tried to include a breadcrumb with dropdown elements. I am trying to align the breadcrumb with the other elements of my navbar.
Please note: The below code snippet loads in mobile viewport which is fine - however, in col-lg and larger, the breadcrump element isn't vertically aligned with the other elements (i.e. navbar-brand and form-inline).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<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>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand py-0" href="#">EXAMPLE</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<ol class="nav-item breadcrumb">
<li class="nav-item py-0 breadcrumb-item nav-item py-0">Level 0</li>
<li class="breadcrumb-item dropdown">
<a class="breadcrumb-itemnav-link dropdown-toggle" href="#" id="Level1Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Level 1</a>
<div class="dropdown-menu" aria-labelledby="Level1Dropdown">
<a class="dropdown-item" href="http://www.example.com/Level1a">Level 1a</a>
<a class="dropdown-item" href="http://www.example.com/Level1b">Level 1b</a>
<a class="dropdown-item" href="http://www.example.com/Level1c">Level 1c</a>
</div>
</li>
<li class="breadcrumb-item dropdown">
<a class="breadcrumb-itemnav-link dropdown-toggle" href="#" id="Level2Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Level 2</a>
<div class="dropdown-menu" aria-labelledby="Level2Dropdown">
<a class="dropdown-item" href="http://www.example.com/Level2a">Level 2a</a>
<a class="dropdown-item" href="http://www.example.com/Level2b">Level 2b</a>
<a class="dropdown-item" href="http://www.example.com/Level2c">Level 2c</a>
</div>
</li>
<li class="breadcrumb-item dropdown">
<a class="breadcrumb-itemnav-link dropdown-toggle" href="#" id="Level3Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Level 3</a>
<div class="dropdown-menu" aria-labelledby="Level3Dropdown">
<a class="dropdown-item" href="http://www.example.com/Level3a">Level 3a</a>
<a class="dropdown-item" href="http://www.example.com/Level3b">Level 3b</a>
<a class="dropdown-item" href="http://www.example.com/Level3c">Level 3c</a>
</div>
</li>
</ol>
</ul>
<li class="nav-item py-0 active"><a class="nav-link" href="http://www.example.com/Button1">Button1</a></li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item py-0"><a class="nav-link" href="http://www.example.com/admin:index">Admin</a></li>
</div>
</nav>
</body>
Related
can someone help me. I've got the navbar and dropdown menu from bootstrap 5 but while trying to open the dropdown it has no action
<!-- NAV BAR BOOTSRAP 5-->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">Andres Pachano</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:5000/about-me">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="true">
More options
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">GitHub</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<!--<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>-->
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
It has the drop down menu included.
The Dropdown for Bootstrap needs a Script-Dependency. For Bootstrap-5 the JS-Bundle is:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- NAV BAR BOOTSRAP 5-->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">Andres Pachano</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:5000/about-me">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="true">
More options
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">GitHub</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<!--<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>-->
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Im new using bootstrap and Im having two big problems:
1. Im trying to include a dropdown section in the menu but it doesnt work at all.
2. When the screen is small it shows the button menu but it doesnt work too.
This is the code that I rescued from a website so it supposed to work perfectly, I dont know if it is a library mistake or that im doing the rows and cols wrong:
<div class="row menu" >
<header class="barra">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</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="#">Link</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">
Dropdown
</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="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input id="buscar" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
</div>
A possible reason is that you might be missing the functionality coming from JavaScript Bootstrap modules.
Try to add JS imports:
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
i'm using Bootstrap v5 and i found a problem with navbar. I copied the code from here but this navbar don't work. My navbar open, but when i click again on button the navbar don't close. My source code is here.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
How can i solve this problem?
Thanks
There's no reason to use popper.js, bootstrap.min.js and bootstrap.bundle.min.js
Just use bootstrap.bundle.min.js alone
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>
How do i increase the size of the Bootstrap nav bar so that it takes up the entire screen? Right now it only takes half the screen in desktop view however it does work fine with mobile optimization
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="container-fluid"</div>
<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="#">Link</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">
Dropdown
</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="#">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>
</body>
you will see it in bigger screen
1. add css to body width:100%;
2. remove the unnecessary </div> (after </nav>)
maybe you should add media-query:
#media only screen and (max-width: 480px) {
body{
width:100%;
}
}
but It works fine (without media-query):
body{
width:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="container-fluid"</div>
<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="#">Link</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">
Dropdown
</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="#">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>