Developing the Navbar in Bootstrap from scratch | Tutorial – 7
In this bootstrap website development tutorial we will develop the navbar in bootstrap from scratch. We will use the inbuilt classes of the Navbar component in provided in bootstrap.
Here’s what you need to know before getting started with the navbar:
- Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
- Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
- Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar.
- Ensure accessibility by using a nav element or, if using a more generic element such as a div, add a role=”navigation” to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
- .navbar-brand for your company, product, or project name.
- .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
- .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
- .form-inline for any form controls and actions.
- .navbar-text for adding vertically centered strings of text.
- .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.
Bootstrap Navbar documentation – https://getbootstrap.com/docs/4.1/components/navbar/
Setting up everything Library into our Project Offline –
Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE
The folder hierarchy should look like this –
- test code
- bootstrap
- css
- bootstrap.min.css
- js
- bootstrap.min.js
- jquery-3.3.1.slim.min.js
- popper.min.js
- css
- css
- style.css (our custom css file)
- fontawesome-free-5.6.3-web
- css
- all.css (the only one we need to link in our project for font awesome icons)
- js
- etc
- etc
- css
- imgs
- logo_text_white_small.png
- default.html
- bootstrap
If you already have the entire code folder from the previous tutorial, then the only changes you have to do is to create imgs folder and add an image for the logo & following are the changes that needs to be done in the default.html page and style.css –
default.html page –
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="fontawesome-free-5.6.3-web/css/all.css">
<!-- Our Custom CSS style sheet -->
<link rel="stylesheet" href="css/style.css">
<title>Home - Simple Snippets</title>
</head>
<!-- xs<576 | 576<sm<768 | 768<md<992 | 992<lg<1200 | 1200<xl -->
<body>
<header>
<div class="p-1" id="topHeader">
<div class="container">
<div class="row">
<div class="col-12 text-right">
<a class="p-1" href="tel:+919090909090"> <i class="fas fa-phone"></i> +(91) 9090909090 </a>
<a class="p-1" href="mailto:[email protected]"> <i class="fas fa-envelope"></i> [email protected] </a>
</div>
</div>
</div>
</div>
<div id="bottomHeader">
<div class="container-fluid">
<nav class="navbar navbar-dark navbar-expand-md" style="background-color:#004d80;">
<a class="navbar-brand" href="">
<img src="imgs/logo_text_white_small.png" width="250px" alt="">
</a>
<button data-toggle="collapse" data-target="#navbarToggler" type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" href="#">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Designing</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">SEO Services</a>
<a class="dropdown-item" href="#">Software Development</a>
<a class="dropdown-item" href="#">Mobile App Development</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Graphic Designing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>style.css page –
.myrows{
border: 3px solid green;
padding: 5px;
}
.mycols{
border: 3px solid red;
}
.mycontainer{
background-color: aqua;
}
#topHeader{
border-bottom: 1px solid #ebebeb;
}
#topHeader a{
color: #2c3e50;
font-weight: 600;
font-size: 0.89rem;
}
.container-fluid{
padding-left: 0;
padding-right: 0;
}
nav ul li a {
font-size: 1.1rem;
font-weight: 600;
}