Bootstrap 4 Help

Updated Oct. 15, 2019

If you’re tempted to add your own styles to a page you are making with Bootstrap CSS — stop and consult these pages FIRST. It’s so much better to work with styles that Bootstrap has already given us.

  • Spacing — read everything under Notation to add margin or padding to any element
  • Textalignments, bold, italics, etc.
  • Typography — make headings much larger, style pullout quotes and source attributions, and more — LOTS here
  • Images — aligning them, centering, making responsive
  • Buttons — make them bigger, smaller, full-width, etc.
  • Colors — add the Bootstrap colors with these special styles
  • Alerts — even more colors (lighter colors)
  • Forms — all the styles for form controls, labels, etc.

Collapse is a Bootstrap replacement for jQuery hide/show.

Remember, all the things can be found in links on the left side of the Bootstrap Documentation pages.

IMPORTANT: The special layouts and devices such as the Carousel can be found on the Examples page. The code for those is in the GitHub repo on THAT PAGE — click the “Download source code” button and download the zipped repo file. Find the files you need by opening, in order, these folders:

  1. site
  2. docs
  3. 4.3
  4. examples

Happy Bootstrapping!

Examples of Bootstrap apps

Building personal projects is the best way to get better at code and front-end development. Here are two personal projects I made with Bootstrap 3 (note: NOT 4 — they are older).

You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.

The reason I chose to use Bootstrap for each of those projects was because my main aim was to work with JavaScript and handling data, so I did not want to spend a lot of time thinking out the design and writing CSS. That’s exactly the kind of project for which Bootstrap is great!

Each of the examples also has a README at GitHub if you’re curious about the why and how of it.

Bootstrap Themes

Now that you have invested time in learning to use Bootstrap, you should know that it’s easy to change the theme and get new colors and fonts in one simple step.

The free themes at are the easiest to use. Simply download the theme as shown below. Then REPLACE the bootstrap.min.css file that’s already in your /css/ folder. Reload your Bootstrap-styled page and see the magic!

Open the menu for the theme you want, and select bootstrap.min.css.

It would take you only a few minutes to try the above. I encourage you to try it!

For more ambitious projects, you should consider buying one of the complex Bootstrap themes from Some very nice themes are only $10. This is a one-time charge. For less than $20 (in most cases), using one of these themes gives you the ability to produce a very sophisticated website hosted on your own server at your own domain name. You will be using the same Bootstrap styles and classes you have already used, plus new ones that might be specific to the theme you chose. You’ll get icons and fonts with the theme that are all part of the deal, and you can mix and match a variety of sliding sections, sliders, and other cool components.

Don’t forget — there’s lots of examples you can use on the Bootstrap site. You can download an example and use it to learn how to do a cool new design thing.

A nice example of a single-page Web app

This is as good as it gets: NPR’s annual roundup of the best books of the past year is an ideal one-page app.

NPR’s Book Concierge


Above: Mobile screens. Below: Desktop, with one book selected (third from left). Fully responsive design, using Bootstrap.


Above: Click any book and get this modal overlay, which you can also use to simply browse all titles. In a single-page app, you never leave the original Web page.

They have merged all their JavaScript into one minified file. Separately, they have merged all their CSS into another single minified file (plus two separate font-handling files).

At the bottom of the HTML source, you can see the entire dataset for all the books in the form of a minified JSON object.

The HTML is super-clean and readable. If you have used Bootstrap, you can understand it completely.