BS4 NavBar
Navigation Bars
A navigation header that appears at the top of the page is called a navigation bar:
==== Navigation Bars MUKAVU ====
Basic Navbar
A navigation bar made with Bootstrap can expand or contract based on the size of the screen.
The .navbar class creates a conventional navigation bar, while the .navbar-expand-xl|lg|md|sm responsive collapsing class stacks the navbar vertically on extremely large, large, medium, and small displays.
Use a <ul> element with class=”navbar-nav” to put links within the navbar. Next, include <a> elements with a .nav-link class after <li> elements with a.nav-item class:
Link 1Â Â Link 2Â Â Link 3
Example
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Vertical Navbar
To make a vertical navigation bar, remove the .navbar-expand-xl|lg|md|sm class:
Link 1Â Â
Link 2Â Â
Link 3
Example
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Centered Navbar
For the navigation bar to be centered, use the .justify-content-center class.
On medium, big, and extra large displays, the navigation bar will be centered in the example that follows. Because of the .navbar-expand-sm class, it will appear vertically and left-aligned on small screens:
Link 1Â Â Link 2Â Â Link 3
Example
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
Colored Navbar
To alter the navbar’s background color, use any of the .bg-color classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light).
Tip: Use the .navbar-dark class to add a white text color to all of the links in the navbar, or the .navbar-light class to add a black text color.
Example
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
Active/disabled states: To make a link stand out, add the .active class to a <a> element. To make a link inactive, use the .disabled class.
Brand / Logo
To draw attention to the brand, logo, or project name on your website, use the .navbar-brand class:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
Bootstrap 4 will automatically style pictures with the .navbar-brand class to fit the navbar vertically.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Logo" style="width:40px;" title="BS4 NavBar 4" data-lazy-src="bird.jpg"><noscript><img decoding="async" src="bird.jpg" alt="Logo" style="width:40px;" title="BS4 NavBar 4"></noscript>
</a>
...
</nav>
Collapsing The Navigation Bar
==== Navigation Bar MUKAVU ====
You typically wish to hide the navigation links and replace them with a button that, when pressed, should display them, especially on small screens.
Use a button with the class=”navbar-toggler”, data-toggle=”collapse”, and data-target=”#thetarget” to create a collapsible navigation bar. After that, enclose the navbar’s content (links, etc.) in a div element with the class=”collapse navbar-collapse” and an id that corresponds to the button’s data-target (“thetarget”).
Example
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Tip: To always show the toggler button and conceal navbar links, you can also remove the .navbar-expand-md class.
Navbar With Dropdown
==== Navigation Bar MUKAVU ====
Dropdown menus can also be held in navbars:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Navbar Forms and Buttons
==== Navigation Bar MUKAVU ====
Include a <form> element with class=”form-inline” to arrange buttons and inputs next to each other:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Other input classes, like .input-group-append or .input-group-prepend, can also be used to add a help text or icon next to the input field. You can read more about these classes in the chapter on Bootstrap Inputs.
==== Navigation Bar MUKAVU ====
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
Navbar Text
==== Navigation Bar MUKAVU ====
To maintain proper padding and text color, vertically align any non-linking components inside the navbar by using the .navbar-text class.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Fixed Navigation Bar
==== Navigation Bar MUKAVU ====
Additionally, the navigation bar can be fixed to the top or bottom of the page.
Regardless matter how far the page scrolls, a fixed navigation bar remains visible at either the top or bottom.
The navigation bar is fixed at the top thanks to the .fixed-top class:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
To keep the navbar at the bottom of the page, use the .fixed-bottom class:
==== Navigation Bar MUKAVU ====
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
If you want the navbar to remain at the top of the page even after you scroll past it, use the .sticky-top class. Note: IE11 and older versions of this class will treat it as position:relative and will not function.
==== Navigation Bar MUKAVU ====
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
