How to create the responsive header for a website using Bootstrap

Bootstrap – Front end framework

Bootstrap is the popular front end web development framework for developing responsive website. It adjust the web page size based on screen/device type such as desktop, tablet or mobile .It contains the HTML, CSS and Javascript design templates that includes navbar, buttons, panels, progress bar, drop down, form, container and so on.

Create the responsive header/navigation bar in Bootstrap4

In this example, we are going to create the navigation bar for a Travel website. Here we are using bootstrap version 4 to build the responsive header. Along with bootstrap, we can use other HTML tags and CSS style classes for creating beautiful website.

Components used in HTML

In the header section, we have included the bootstrap libraries and custom style sheet file to access the components from it. Lets see the other bootstrap classes that used to build the navigation bar.

  • navbar class – The responsive header is created using the .navbar bootstrap class. It supports for branding, navigation, colour and more with the help of other classes such as navbar-expand-lg, navbar-light, bg-info.
  • nav-item & nav-link – The menu item and the corresponding link is created with the help of nav-item and nav-link classes.
  • btn class – The button styling properties are fetched from btn class in bootstrap.

HTML code

CSS – File name style.css

Desktop view of the navigation bar

Responsive header using Bootstrap4
Responsive header using Bootstrap4

Mobile view of the navigation bar

Responsive website header in mobile view using Bootstrap
Responsive website header in mobile view using Bootstrap