Bootstrap: Creating Menus, Navbars, and Modals

In this article, we'll use Bootstrap to implement these three common website features:

In the first Bootstrap article, we worked on the codebrainery web page, starting with a basic template for the project. If you don’t already have it, you can download codebrainery here before we dig into Bootstrap further below.

Try Bootstrap

Let’s use Bootstrap to implement these three common website features:

Dropdown menu
Toggle navbar
Modal

Dropdown menus are buttons that reveal menu options to users when clicked. The Codebrainery homepage would benefit from a dropdown to add additional menu options without significantly changing the CSS layout.

In index.html, replace the current nav option that reads “About” with a dropdown menu.

First, locate the ul element that contains “Sign Up,” “Sign In” and “About”:

<ul class="nav navbar-nav navbar-right">
   <li><a href="#">Sign Up</a></li>
   <li><a href="#">Sign In</a></li>
   <li><a href="#">About</a></li>
 </ul>

Update the third li item with Bootstrap’s “dropdown” class and change the content to read “More”. Optionally, you can add a span with Bootstrap’s “caret” class to create a dropdown arrow icon:

    <ul class="nav navbar-nav navbar-right">
       <li><a href="#">Sign Up</a></li>
       <li><a href="#">Sign In</a></li>
       <li class="dropdown"><a href="#">More<span class="caret"></span></a></li>
     </ul>

The following attributes are needed in order to transform the “More” option into a dropdown menu:

class: dropdown-toggle
data-toggle: dropdown
role: button
aria-haspopup: true
area-expanded: false

Add these properties to the a element inside the li with the “dropdown” class:

    <ul class="nav navbar-nav navbar-right">
       <li><a href="#">Sign Up</a></li>
       <li><a href="#">Sign In</a></li>
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret">More</span></a>
       </li>
    </ul>

Finally, add dropdown menu items to appear when site visitors click the “More” option. This will be a ul element with Bootstrap’s “dropdown-menu” class:

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Sign Up</a></li>
        <li><a href="#">Sign In</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Start Learning</a></li>
            <li><a href="#">View All Courses</a></li>
            <li><a href="#">Chat with a CodeGuide</a></li>
          </ul>
        </li>
      </ul>

Launch your web browser and open index.html. Click on “More” in the top righthand corner of the page to see the dropdown menu in action!

A common challenge faced by web developers is how to lay out menus on devices with small screens. Bootstrap’s toggle navbar can toggle a menu button on such devices. When users click the button, menu options appear:

In index.html, add Bootstrap’s “navbar-default” class to the nav element:

    <nav class="navbar navbar-default">
        ...
    </div>

Next, locate the div with the “navbar-header” class:

    <div class="navbar-header">
       <a class="navbar-brand" href="#">Codebrainery.io</a>
    </div>

Inside this div, add the button element that will be toggled when a user visits the website on a small device. This button will contain attributes that work together to tell Bootstrap to hide or show the button depending on the user’s screen size.

Attributes:

type: button
classes: navbar-toggle & collapsed
data-toggle: collapse
data-target: #codebrainery-toggle-nav
aria-expanded: false

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#codebrainery-toggle-nav" aria-expanded="false">
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

Inside the button element, add four span elements with Bootstrap’s “icon-bar” class to create the appearance of a mobile menu icon. The first span will have the “sr-only” class:

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#codebrainery-toggle-nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

Step 3: Make the Nav “Toggle-able”

Now comes the interesting part. Locate the ul inside the nav element with “nav”, “navbar-nav” and “navbar-right” classes:

      <ul class="nav navbar-nav navbar-right">
        ...  
      </ul>

Enclose this ul in a div with Bootstrap’s “collapse” and “navbar-collapse” classes. Then add the id attribute assigned in the previous step:

    <div class="collapse navbar-collapse" id="codebrainery-toggle-nav">
      <ul class="nav navbar-nav navbar-right">
        ...
      </ul>
    </div>

Your completed toggle navbar should reflect the following structure:

    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#codebrainery-toggle-nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Codebrainery.io</a>
        </div>

        <div class="collapse navbar-collapse" id="codebrainery-toggle-nav">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Sign In</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Start Learning</a></li>
                <li><a href="#">View All Courses</a></li>
                <li><a href="#">Chat with a CodeGuide</a></li>
              </ul>
            </li>
          </ul>
        </div>
        
      </div> <!-- close container div -->
    </nav> <!-- close navbar nav -->

Reload index.html in your web browser, then narrow the browser window. When the browser window narrows to a width of 767px, the new nav will toggle on!

reference: getbootstrap.com/components/#navbar

Modals are like popup alerts meant to focus the user’s attention on a submission form, new product offer or breaking news:

We will use Bootstrap to implement a simple modal that alerts Codebrainery site visitors of a new product called Wizard.

Like dropdown menus and toggle navbars, modals are only shown when a special condition is met, and otherwise hidden.

Between the nav and section elements in index.html, add the code to generate a modal:


  <div class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h3 class="modal-title">New Product Alert!</h3>
        </div>
        <div class="modal-body">
          <h4>Codebrainery Wizard</h4>
          <p>Sign up today for tons of new, in-depth web development training, and live support from our team of Codebrainery CodeGuides.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Try it now</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Maybe later</button>
        </div>
      </div>
    </div>
  </div>

Now using jQuery, we will show the modal as soon as our web document has fully loaded. In app.js, add the following jQuery code:

$(document).ready(function(){
  $('.modal').modal('show');
});

Then add a script element to the head of index.html and set the src attribute to app.js:

    <script src="app.js"></script>

Make sure that app.js is the last script that loads (after jQuery and bootstrap.min.js).

Save your work and reload index.html in your web browser to see the modal pop up!

Click here to download a completed version of the Codebrainery.io homepage as a reference.

Reference: getbootstrap.com/components/modal

Author

Codecademy Team

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Meet the full team