Try Bootstrap

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

  • Dropdown menu
  • Toggle navbar
  • Modal

Dropdown Menu

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.

Step 1: Add the Dropdown Class

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>

Step 2: Add the Dropdown Properties

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>

Step 3: Add Dropdown Items

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!

Toggle Navbar

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:

Step 1: Add the Toggle Navbar Button

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>

Step 2: Add the Navbar Button's "Menu Icon"

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

Modal

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.

Step 1: Create the Modal HTML

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>

Step 2: Trigger the Modal with jQuery

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