What Else Can Bootstrap Do?

💡 The Concept

Bootstrap does a lot more than columns. Here is a tour of the most useful features you will reach for on real projects.

Responsive Images

Add class="img-fluid" to your images in a Bootstrap website. I recommend adding it to all of your images. It makes images autofit to the right size by applying three responsive properties:

• display: block;
• max-width: 100%;
• height: auto;

<img src="photo.jpg" class="img-fluid" alt="Description">

Bootstrap also has a variety of image classes you can add to quickly style your images. W3Schools has a nice summary: Bootstrap Images

Elegant Forms

Bootstrap has form classes that make your forms much more graceful. By adding Bootstrap classes to your form fields, you get a polished look without writing custom CSS.

W3Schools has several Bootstrap form layouts to get you started: Bootstrap Forms

Modal (Popup)

Popups are called modals in design because they overlay on top of the web page and prevent any other activity until they are dismissed. Even if you know some JavaScript, starting with the Bootstrap modal gives you a much more polished result.

<!-- Button to open the modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
   Open Popup
</button>

<!-- The modal -->
<div class="modal fade" id="myModal" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Hello!</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body">
            <p>This is a Bootstrap modal.</p>
         </div>
      </div>
   </div>
</div>

Note that the background behind the popup is grayed out, keeping your visitor focused on the popup. When clients ask me to build popups, I usually try to suggest alternatives first. Many visitors find popups disruptive and some browsers block them. But if a popup is what the project calls for, Bootstrap makes it easy to build an attractive one.

Hamburger Navigation

You can use Bootstrap to create navigation that converts to a hamburger menu on mobile. Bootstrap also supports dropdown menus using the same approach.

On smaller screens, the full menu collapses into a hamburger icon like this:

W3Schools has the code to get you started: Bootstrap Navbar

Accordion

Ever notice how on FAQ pages the question opens up when you click on it? You do not need to know JavaScript to add an accordion. Bootstrap handles all the show and hide behavior for you.

W3Schools has the code to get you started: Bootstrap Accordion

This is just a sample of what Bootstrap offers. The full documentation at getbootstrap.com covers dozens more components. As you build more projects, you will find yourself reaching for Bootstrap features regularly.

★ Key Takeaways

Bootstrap comes with a wide range of ready-made components beyond the grid. This lesson introduced forms, modals, hamburger navigation, and accordions. Each one saves you the time of writing custom CSS and JavaScript from scratch. Next, you will learn how to publish your website to the internet. Getting your site live is one of the most satisfying steps in web development.

❓ Frequently Asked Questions

← Back to Bootstrap and Frameworks Lessons

← Back to All Lessons