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 Bootstrap. So when you want to try something new on your website, check first to see if Bootstrap has a solution for you.

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

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

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

The Bootstrap Modal looks like this. You can also insert images into the modal with the <img> tag.

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:

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.

The Bootstrap 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:

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

Bootstrap Image Handling

If you add the Bootstrap class ”img-fluid” to your images in a Bootstrap website, 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