What Can You Do With Bootstrap?

Developers know that they can use Bootstrap to make stackable columns on responsive websites. But Bootstrap has prebuilt classes that allow you do so much more. Here is a short list of what you can do with it. So when you want to try something new on your website, check first to see if Bootstrap has a solution for you.

Elegant Forms

Bootstrap has form classes that make your forms much more graceful. As you can see from the image below, by starting with the Bootstrap classes for a form, you will make a much more elegant form.

An HTML Form Before and After Bootstrap
An HTML Form Before and After Bootstrap

To make your forms more attractive, you add the Bootstrap classes to your form and form fields. W3 Schools has several Bootstrap form layouts to get you started: Bootstrap Forms

Popup (Modal)

You can make a beautiful popup by starting with Bootstrap.

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, by starting with the Bootstrap modal you will make a much more graceful popup on your website. You can grab the code to get started over at W3 Schools.

It’s modal looks like this. You can also insert images into the modal with the <img> tag.

Example of a Bootstrap Modal Popup
Popup Modal

As you can see, this is much more graceful than a JavaScript prompt. Note that the background behind the popup is grayed out so that your website visitor focuses on only on the popup.

To be honest, when clients ask me to make popups for their websites, I generally try to convince them to try a different solution. Website visitors generally don’t prefer to have popups, and many users block popups. But if you need to make a popup, you may as well make it attractive by starting with Bootstrap.

Mobile Navigation

You can also use Bootstrap to create navigation that converts to the hamburger menu on mobile. The “hamburger” looks like this:

Hamburger

I have a separate slideshow on how to install the Bootstrap Navigation. In addition, you can use Bootstrap to create dropdown menus. If you go to the last slide, you will see the code to get you started on a dropdown navigation.

Accordion (Collapse)

Ever notice how on FAQ pages the question opens up when you click on it? You don’t need to know JavaScript to add an FAQ. You just need a bit of Bootstrap. An accordion looks like this:

Bootstrap 4 Accordion Example
Bootstrap 4 Accordion

You can find the code to make an accordion at W3Schools.

Image Handling

If you add the Bootstrap class ”img-fluid” to your images, your images will automatically work better. This code makes images autofit to the right size. It adds three properties that make your images responsive:

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

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


Interested in learning more about websites and Bootstrap?

The Bootstrap Grid System: Modern websites use stackable columns. The columns are next to each other on a desktop or tablet, but stack on a smartphone. This article walks you through creating columns.

HTML/CSS Curriculum: You need to understand HTML and CSS before you tackle frameworks. Check out the training program on WebDevStudents.com.