How to Create the Standard Bootstrap Navbar and Button for Mobile Devices
Bootstrap is an HTML, CSS and JavaScript framework. Using it, you can easily build mobile-first responsive websites. It offers you plenty of pre-set CSS styling for web elements, including navigation bars.
In this tutorial, you will learn how to easily create a basic Bootstrap responsive navbar. Then you’ll learn how to use a Bootstrap Standard Navbar Button for mobile devices.
To be able to use Bootstrap, you must install it first. For the purpose of this tutorial, you can install it anywhere on your local PC – it doesn’t have to be a web server. Let’s do it together.
Step #1. Download Bootstrap
-
- Proceed to getboostrap.com and click on the “Download Bootstrap” button:
-
- On the next “Getting Started” page, click on another “Download Bootstrap” button:
-
- Save this file anywhere on your hard drive:
Step #2. Install Bootstrap on your local PC
-
- Unzip this file
- Rename the resulting folder to bootstrap
Step #3. Create a basic index.html file
-
- In your bootstrap folder create an index.html file with the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>Step #4. Create a responsive navbar
-
- Right beneath the opening body div, create a new div with the container Bootstrap class:
<div class="container"><!-- Start navbar container div -->
-
- Hit Enter a few times to create some space and close this new div:
</div><!-- Finish navbar container div -->
-
- Inside your new container div create the nav tag for your new navbar:
<nav class="navbar navbar-default">
-
- On your keyboard, press the Enter key a couple of times and close the tag:
-
- Inside the nav tag, create another container div and start creating the actual contents of the navbar:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
-
- Delete the <h1> tag and its content.
- Find where your navbar-header div closes and right underneath it create another div, with no classes yet.
-
- Inside this div, start an unordered list containing the actual elements of your responsive navbar:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
-
- Save your index.html file.
- Open this file in your browser. You should now see your responsive navbar. You are almost ready to make it the standard mobile navbar. Before you do though, let’s improve it slightly.
- Please go back to your index.html file.
- In your nav tag, change the default to inverse to get the following code:
<nav class="navbar navbar-inverse">
-
- Save the file.
- Go back to your site and refresh the page. Your navbar looks a bit nicer now:
Well done! Your responsive navbar is now ready for you to work further on it.
Watch the video below to learn how to replace the navbar you just created with the standard Bootstrap menu button for mobile users.