PRO 30% Free • Stripe ($15) & Razorpay (₹899)
TopCourseAI Logo TopCourseAI
Try Pro
← Articles

Bootstrap: Creating Menus, Navbars, and Modals

Top Course Staff · 3 min read · Web development · PRO · 30% Free Preview Available

Bootstrap: Creating Menus, Navbars, and Modals

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 candownload codebrainery herebefore 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 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.

Inindex.html, replace the currentnavoption that reads “About” with a dropdown menu.

First, locate theulelement 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 thirdliitem with Bootstrap’s “dropdown” class and change the content to read “More”. Optionally, you can add aspanwith 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 theaelement inside theliwith 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 aulelement 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 openindex.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:

Inindex.html, add Bootstrap’s “navbar-default” class to thenavelement:

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

Next, locate thedivwith the “navbar-header” class:

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

Inside thisdiv, add thebuttonelement 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 thebuttonelement, add fourspanelements with Bootstrap’s “icon-bar” class to create the appearance of a mobile menu icon. The firstspanwill 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>

Now comes the interesting part. Locate theulinside thenavelement with “nav”, “navbar-nav” and “navbar-right” classes:

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

Enclose thisulin adivwith Bootstrap’s “collapse” and “navbar-collapse” classes. Then add theidattribute 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 -->

Reloadindex.htmlin 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 calledWizard.

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

Between thenavandsectionelements inindex.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. Inapp.js, add the following jQuery code:

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

Then add ascriptelement to theheadofindex.htmland set thesrcattribute toapp.js:

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

Make sure thatapp.jsis the last script that loads (after jQuery andbootstrap.min.js).

Save your work and reloadindex.htmlin your web browser to see the modal pop up!

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

Reference:getbootstrap.com/components/modal

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

30% Free Preview Reached · Unlock Remaining 70%

Complete Payment to Unlock Full Guide & Source Code

You are viewing the 30% preview. Join TopCourseAI Pro to unlock the remaining 70% of this article, unblur all code snippets, and gain full access to all 412 technical projects and guides.

✓ Full Access to All 160+ Projects
✓ Instant Blur Removal Everywhere
✓ Production Source Code & Blueprints
✓ All Future Deep Dives Included
Unlock All Projects ($15/mo Stripe) Unlock All Projects (₹899/mo UPI · 55% OFF)
Instant Unhindered Activation ·
End of Preview · Unlock Complete Blueprint & Source Code

Ready to access the complete step-by-step tutorial?

Gain full unhindered access to all 412 technical projects and guides, unblur all source code snippets, and download runnable scripts.

Unlock All Projects ($15/mo Stripe) Unlock (₹899/mo UPI · 55% OFF)
Previous Blueprint

Bolt.new: Build a Full-Stack App in Minutes

Next Blueprint

Browser Compatibility

Related Blueprints & Guides

View all 166 →
Web development

Accessibility on the Platform

Codecademy is committed to providing a high-quality learning experience for all learners. That includes accommodating different usage forms such as auditory, motor, or visual restrictions, limited hardware, or other acce...

Web development

Affordances, Signifiers, and Clickability

For users on the web, the mouse click is perhaps the most fundamental human-computer interaction. The webbecamethe web partially through the power ofhypertext, or text in one document that links to other documents or res...

Web development

Authentication and OAuth

Authenticationis the process used by applications to determine and confirm identities of users. It ensures that the correct content is shown to users. More importantly, it ensures that incorrect content is secured and u...

Production AI Blueprints

Ready to build production-grade AI systems?

Enjoyed this guide? Continue exploring our library of 166+ production blueprints, multi-agent swarms, and autonomous agent systems with 100% unblurred, executable source code.

Explore All 166 Articles More AI Agent Guides