Bootstrap - Navbar
Bootstrap
In this tutorial we will learn about navbar in Bootstrap.
Simple Navbar
We use navbars to create navigation header for our websites. They begin collapsed in mobile views and becomes horizontal as the available viewport width increases.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
</div>
</div>
</nav>
Adding toggle button and brand text in navbar
The toggle icon is shown in smaller viewport like mobile.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</nav>
Note! The attribute data-target="#navbar-collapse-1" is targetting the div having id navbar-collapse-1. So on clicking the toggle button it will show and hide the menu.
Output: Bigger screen.
Output: Smaller screen.
Component alignment
We can align the navbar component left and right using the .navbar-left and .navbar-right class.
Brand image
We can add the brand image by swapping the brand text with an img tag.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand"
src="/path/to/logo.png">
</a>
</div>
</div>
</nav>
Output:
Navbar form
We can add form inside a navbar which will be similar to an inline form.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="navbar-collapse-1">
<form class="navbar-form navbar-right"
role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your search text...">
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
</div>
</nav>
Output: Bigger Screen.
Output: Smaller Screen.
Navbar text
We can add text to a navbar using the .navbar-text class.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="navbar-collapse-1">
<p class="navbar-text navbar-right">Hello World!</p>
</div>
</div>
</nav>
Output:
Fixed to top Navbar
We can fix the navbar at the top of the page using the .navbar-fixed-top class.
Give a top padding of 70px or more when you fix the navbar at the top.body { padding-top: 70px; }
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</nav>
Navbar inverse
To inverse the style of the navbar we use the .navbar-inverse class.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</nav>
Output: Bigger screen.
Output: Smaller screen.
ADVERTISEMENT