I am trying to create a basic anchor link within the same page. I am using Bootstrap 4 (whether that makes a difference or not). The link and the target are both in server-side includes. I want to link from the upper nav "Contact" to the form I have in the footer.
In the "upperNav" include I have the following:
<a class="nav-link text-light main-menu" href="#contactMe">Contact</a>
In the "footer" include I have the following:
<p class="contactUs"><a id="#contactMe">Contact Us</a></p>
But for some reason it doesn't work. I have researched this problem but to no avail. Any suggestions?
<!-- From: https://www.jquery-az.com/bootstrap4/demo2.php?ex=91.0_8 -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-info ">
<a class="navbar-brand text-light logo-text" href="http://shamar.org/" >shamar.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#demo-navbar" aria-controls="demo-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="demo-navbar">
<ul class="navbar-nav mr-auto" id="menu">
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/articles/index.html">Articles</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/weblog/">Blog</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/books.html">Books</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/multimedia/index.html">Multimedia</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/about.html">About</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="#contactMe">Contact</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-light submit2 my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Change
<a id="#contactMe">Contact Us</a>
To
<a id="contactMe">Contact Us</a>
Related
Click here for image of problem
Basically I sourced the code from getbootstrap.com but the search bar and search button are not being right-aligned in the navbar. Have tried to selectively align the search option but to no avail. Would live it if anyone helped. Thank you.
Here is the code:
```
<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="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>
```
You can give margin and padding to the linking icons/navigation items to occupy more space of the webpage.
Try enclose your items ul and form inside a div with d-flex
<div class="collapse navbar-collapse d-flex">
<div class="d-flex align-items-start">
<ul>
<li>...
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="d-flex ">
<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>
</div>
I am trying to add a full-width nav bar with Bootstrap 4 and have the left and right most links touch the edge of the container (see the nav on Etsy.com for an example of what I'm trying to achieve):
I've tried to use text-left on each nav link, but the right-most link isn't aligned properly.
Here is the CodePly I'm using:
https://www.codeply.com/go/I9X4D7HpZ2
How do I get the nav to be full width, with the left and right most links touching the edges?
Thanks
Current Code:
<nav class="navbar navbar-expand-sm navbar-light pl-2 pt-0 pb-2 border-bottom">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link text-dark mr-4 text-left" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark mr-4 text-left" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark mr-4 text-left" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark mr-4 text-left" href="#">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark mr-4 text-left" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark text-left" href="#">Link 6</a>
</li>
</ul>
</div>
</nav>
You have to override default bootstrap styles and there are also some classes that are causing some problems (like text-left). Try this:
<div class="container">
<header>
<div>
<nav class="navbar navbar-expand-sm navbar-light bg-white flex-row">
<a class="navbar-brand mr-auto" href="/"><span style="color:#0099ff">MyBrand</span></a>
<form class="form-inline my-2 my-lg-0">
<input class="form-control form-control-sm mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-sm btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
<button class="navbar-toggler ml-lg-0" 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>
</nav>
<nav class="navbar navbar-expand-sm navbar-light pl-2 pt-0 pb-2 border-bottom">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-fill w-100 justify-content-between">
<li class="nav-item flex-grow-0">
<a class="nav-link d-inline-block text-dark text-center" href="#">Link 1</a>
</li>
<li class="nav-item flex-grow-0">
<a class="nav-link d-inline-block text-dark text-center" href="#">Link 2</a>
</li>
<li class="nav-item flex-grow-0">
<a class="nav-link d-inline-block text-dark text-center" href="#">Link 3</a>
</li>
<li class="nav-item flex-grow-0">
<a class="nav-link d-inline-block text-dark text-center" href="#">Link 4</a>
</li>
<li class="nav-item flex-grow-0">
<a class="nav-link d-inline-block text-dark text-center" href="#">Link 5</a>
</li>
<li class="nav-item flex-grow-0">
<a class="nav-link text-dark text-center" href="#">Link 6</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
</div>
I want my navbar to appear as a list after collapsing when User press toggle button but it appears in one line and not as a list
This is how the navbar looks i dont want it
This is how i want it to look
<!-- Navbar -->
<nav class="navbar navbar-light navbar-expand-md bg-dark">
<i class="fas fa-child text-warning fa-2x"></i>
<button type="button" class="navbar-toggler bg-light" data-toggle = "collapse" data-target ="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="nav">
<ul class="navbar nav">
<li class = "nav-item">
<a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Home</a>
</li>
<li class = "nav-item">
<a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Skills</a>
</li>
<li class = "nav-item dropdown" data-toggle = "dropdown">
<a class="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#">Projects</a>
<div class="dropdown-menu">
<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="#">Project 4</a>
</div>
</li>
<li class = "nav-item">
<a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Team</a>
</li>
<li class = "nav-item">
<a class="nav-link text-light font-weight-bold text-uppercase px-3" href="#">Contact</a>
</li>
</ul>
<form class="form-inline">
<div class="input-group">
<input type="text" name="" placeholder="Search" class="form-control">
</div>
<div class="input-group-append">
<button class="btn">
<i class="fas fa-search text-muted "></i>
</button>
</div>
</form>
</div>
</nav>
<!-- End of navbar -->
how about this?
<!-- Navbar -->
<nav class="navbar bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#collapsibleNavbar" aria-
expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show"
id="collapsibleNavbar" style="">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li>
<form class="form-inline">
<div class="input-group">
<input type="text" name="" placeholder="Search"
class="form-control">
</div>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
I have a bootstrap nav bar, and I would like to have both collapse-able and non collapse-able menu items.
my code is as follows:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="https://ngohub.asia">
<%= image_tag 'ngohublogo.png', class: 'hidden-md-down img-responsive', style: 'width: 100%'%>
<%= image_tag 'ngohublogo.png', class: 'hidden-lg-up img-responsive w-100'%>
</a>
<div class="w-100" style="float:right;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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 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>
The login and sign up links appear as expected to the left of the brand,
however when I decrese the size of the browser window to simulate a mobile device, the links aren't sharing space with the brand as I would like:
Here it is on a full width screen
here it is in a simulated mobile view. I would like login and sign up to be next to the brand and next to the hamburger
First thing of note, visibility helpers have been renamed in the latest version of bootstrap. hidden-md has been replaced with .d-md-none, etc.
Second, I made sure to declare flex-direction: row; on .navbar-nav to arrange it's children horizontally instead of vertically.
.navbar .navbar-nav{
flex-direction: row;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="https://ngohub.asia">
<img src="https://via.placeholder.com/200x50" class="hidden-md-down img-responsive" style="width: 100%" />
</a>
<div style="float:right;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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 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>
There are a few different ways you can approach this. Remember that in Bootstrap 4.1, the navbar-toggleable classes have been replaced with navbar-expand-.
Use flex-row on the first navbar-nav so that it doens't wrap/stack in a column on smaller screens. Use flex-grow-1 on the collapse so that it expands the remaining width.
Demo: https://www.codeply.com/go/LBY9LXio09
<nav class="navbar clg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://ngohub.asia">
<img src="//placehold.it/40?text=sm" class="d-lg-none d-inline">
<img src="//placehold.it/100x30?text=lg" class="d-lg-inline d-none">
</a>
<div class="mr-auto flex-shrink-1">
<ul class="navbar-nav flex-row">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item px-1">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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 flex-grow-1" id="navbarSupportedContent">
<ul class="navbar-nav ml-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 d-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>
</div>
</nav>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
I'm a newbie and would like to ask how do you position navbar items to the right in Bootstrap 4? I tried the solutions here Bootstrap 4 - Right Align Navbar Items but did not work.
I trying to understand the sample code from Bootstrap 4 and don't what is making the search form align to the right?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<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>
mr-auto does not align nav items to the right using the below,
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler40" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler40">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mt-2 mt-lg-0 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">
<a class="nav-link disabled" href="#">Disabled</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>
</nav>
It is the .mr-auto class set on the navbar menu (the <ul> tag) that pushes the form to the right.
The #navbarTogglerDemo01 tag has 3 immediate children: the <a>, <ul> and <form> tags. Normally they all would be left aligned, but the class mentioned above set the right margin of the <ul> tag to auto.
This is the actual css stlye:
.mr-auto {
margin-right: auto !important;
}
You can read more on this under the Spacing utilities section of the Bootstrap 4 docs.
Update in response of the comment:
Consider the example below. Apart from the color scheme, the only difference between the two navbars is the usage of the .mr-auto class. The upper one uses it, and has the form pushed to the right end, while the lower navbar does not use it, thus the form stands next to the menu items.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mt-2 mt-lg-0">
<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">
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
So in case you would like to align the entire menu to the right, than you have two easy options. The example below uses the .mr-auto class on the branded <a> tag. Your another option could be to change the .mr-auto class to .ml-auto on the <ul> element.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<a class="navbar-brand mr-auto" href="#">Hidden brand</a>
<ul class="navbar-nav mt-2 mt-lg-0">
<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">
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>