Bootstrap 4 navbars have collapse and expand features.It works on the basis of available screen size. Navbar expand features expand the navbar in the available space at the mention break point while as navbar collapse collapses the navbar in the small devices
Please keep in mind that .navbar-nav
is assigned to the <ul>
element base class,.nav-item
is assigned to the <li>
element base class & .nav-link
is assigned to the <a>
element base class.
.navbar
,.navbar-expand{-sm|-md|-lg|-xl}
& background color utility.navbar-light .bg-light
to the
<nav>
element base class.
.navbar-nav
to the <ul>
element base class.
.nav-item
to the <li>
element base class.
.nav-link
to the <a>
element base class.
General Syntax
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Nav Link</a></li>
</ul>
</nav>
Source Code
<div class="container text-center my-2">
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</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>
</ul>
</nav>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:
In this example .navbar-nav
is assigned to <ul>
element base class ,.nav-item
is assigned to the <li>
element base class and .nav-link
is assigned to the <a>
element
base class.
bootstrap .navbar-brand
shows brand name of company or brand logo.
By applying .navbar-brand class on images,It adjusts image to fit vertically with respect to navbar.
General Syntax
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Brand Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Nav Link</a>
</li>
</ul>
</nav>
Source Code
<div class="container text-center my-2">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Brand Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Nav Link1 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav Link3</a>
</li>
</ul>
</nav>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:
In this example .navbar-brand
is used for brand logo,.navbar-expand-sm
is used to expand navbar at the breakpoint of small devices..bg-dark
& .navbar-dark
is used for navigation background color.
Add the .justify-content-center
class to center the navigation bar.
.navbar
,.navbar-expand-sm
,.justify-content-center
& background color utility .navbar-light .bg-light
to the
<nav>
element base class.
.navbar-nav
to the <ul>
element base class.
.nav-item
to the <li>
element base class.
.nav-link
to the <a>
element base class.
General Syntax
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
</ul>
</nav>
Source Code
<div class="container mt-4">
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
<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>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:Follow the above mention steps to create bootstrap centered navbar.
.navbar
& background color utility.navbar-light .bg-light
to the <nav>
base class.
.navbar-nav
to the <ul>
base class.
.nav-item
to the <li>
base class.
.nav-link
to the <a>
base class.
General Syntax
<nav class="navbar bg-light">
<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>
Source Code
<div class="container text-center my-2">
<nav class="navbar bg-light">
<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>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:Follow the above mention steps to create bootstrap vertical navbar.