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.
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.
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:
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.
