Bootstrap header

A header is placed at the topmost section of the web page. A header is the first thing that a visitor sees while visiting websites. A website header should have clear fonts with navigations to the other pages. Bootstrap provides a handful number of components to design the header of a website.

Bootstrap Navbar

Navbar is the most popular component of bootstrap used for the headers. A navbar consists of a dropdown menu through which you can easily navigate to other pages. We can also embed forms in the navbar for searching any elements in websites.

Add .navbar, .navbar-default with navbar class. For responsive sites add .navbar-expand-{xs,sm,md,lg,xl} along with .navbar depending on screen size.
Add a header .navbar-header with <div> class.
Add a .navbar-brand with <a> tag
For list of menus add .navbar or nav navbar-nav in <ul> tag.
.form-inline - It is used for form controls and action.
.navbar-text - It is used for adding vertical centered text.
.collapse.navbar-collapse - It is used for grouping and hiding navbar contents by a parent breakpoint.
.dropdown class is used to create dropdown menu.

Example: Creating a navbar

Let us combine all the above classes and design a navbar with a dropdown menu and a search box.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
  <nav class="navbar navbar-expand-lg navbar-light bg-success">
	  <div class="container-fluid">
		<a class="navbar-brand" href="#">Studytonight</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  <span class="navbar-toggler-icon "></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
		  <ul class="navbar-nav ">
			<li class="nav-item">
			  <a class="nav-link active" aria-current="page" href="#">Home</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="#">Study Material</a>
			</li>			
		  </ul>
		  <form class="d-flex">
			<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
			<button class="btn btn-outline-success" type="submit">Search</button>
		  </form>
		</div>
	  </div>
  </nav>
</head>
</html>

Output:

Here is the output of the above program.

navbar

Jumbotron

It is a lightweight grey box for displaying the key contents of the websites. It increases the size of the contents. An example of jumbotron is the sale advertisement published on marketing websites.

Add .jumbotron under <div> class.
Add HTML tags to add contents to jumbotron.
It uses utility classes for typography and spacing to space contents.

Example: Creating a Jumbotron

Let us use the above classes to create a Jumbotron. We will extend the above code to show how different components can be combined with the header.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
  <nav class="navbar navbar-expand-lg navbar-light bg-success">
	  <div class="container-fluid">
		<a class="navbar-brand" href="#">Studytonight</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  <span class="navbar-toggler-icon "></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
		  <ul class="navbar-nav ">
			<li class="nav-item">
			  <a class="nav-link active" aria-current="page" href="#">Home</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="#">Study Material</a>
			</li>			
		  </ul>
		  <form class="d-flex">
			<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
			<button class="btn btn-outline-success" type="submit">Search</button>
		  </form>
		</div>
	  </div>
  </nav>
  <div class="jumbotron jumbotron-fluid text-center" >
		<div class="container-fluid">
			<h1>Jumbotron</h1>
			<p>Get started with our latest course</p>
			<p><a class="btn btn-primary btn-lg" href="#" role="button">Read more</a></p>
		</div>
  </div>
</head>
</html>

Output:

Here is the output of the above code.

Bootstrap header

Background image

You can make your header attractive by using images to the background of the header. Images attract viewers more than textual content. Just remember to use an image relevant to the contents.

Example: Inserting background image

Use .bg-image class to insert background image. To provide proper contrast use a mask. change color and opacity by manipulating RGBA code. Also, set the height of the image to prevent it from collapsing.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
  <nav class="navbar navbar-expand-lg navbar-light bg-success">
	  <div class="container-fluid">
		<a class="navbar-brand" href="#">Studytonight</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  <span class="navbar-toggler-icon "></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
		  <ul class="navbar-nav ">
			<li class="nav-item">
			  <a class="nav-link active" aria-current="page" href="#">Home</a>
			</li>
			<li class="nav-item">
			  <a class="nav-link" href="#">Study Material</a>
			</li>						
		  </ul>
		  <form class="d-flex">
			<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
			<button class="btn btn-outline-success" type="submit">Search</button>
		  </form>
		</div>
	  </div>
  </nav>
  <div class=" text-center bg-image" 
     style="background-image: url('https://thumbs.dreamstime.com/z/time-to-study-school-tools-around-blackboard-background-46060556.jpghttps://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXWVlnWkgAZJoAeWnMySEKUkMZd3wNSvwa9g&usqp=CAU');
     height: 400px;
    " >
    <div class="mask" style="background-color: rgba(1, 0.5, 0.2, 0.6);">
        <div class="text-primary">
          <h1 class="p-5">Heading</h1>
          <h4 class="p-5">Subheading</h4>
          <a class="btn btn-primary btn-lg" href="#!" role="button"
            >Lets go</a>
        </div>
    </div>
  </div>
</head>
</html>

Output:

background image

Conclusion

So here we learn to use bootstrap components to style the header of websites. Include navbar with dropdown menu, buttons, and form. Add jumbotron to the headers to flash messages. And to make it more attractive insert a background image. Bootstrap makes styling header very easy.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Bootstrap header

Bootstrap Navbar

Example: Creating a navbar

Output:

Jumbotron

Example: Creating a Jumbotron

Output:

Background image

Example: Inserting background image

Output:

Conclusion