Understanding Horizontal Navigation Bars in Bootstrap

Before Started:

You must have knowledge about adding Bootstrap file in HTML head

Used:

Bootstrap 4

Result:

Definition

A navigation bar is a navigation header that is placed at the top of the page:

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

Create horizontal_nav.html

Create horizontal_nav.html and insert this code:

<nav class="navbar navbar-expand-sm">
<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="#">Produk</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Servis</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact US</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About US</a>
  </li>
</ul>
</nav>

Explain:

  • nav tag with navbar class is used to make a navigation bar
  • navbar-expand-sm class is used to make navigation bar responsive collapsing in small screen
  • navbar-nav class is used to create navigation inside navigation bar
  • nav-item class is used to create navigation item inside navbar-nav
  • nav-link class is used to create navigation link inside nav-item

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *