Bootstrap Tutorial: Learn to build first Bootstrap 4 site

A quick tutorial to get you up to speed with the latest version of Bootstrap.

In my opinion, the best way to learn a new technology is often to start building stuff from day one. This gives a sense of meaning to the learning process. Plus, it’s satisfying to see a product appear before you as you struggle your way through the material.

So in this article, I’ll walk you through building a simple website using Bootstrap 4.0 while highlighting the most important new features of the library.

The bg-light class makes the background light grey while the navbar-light class gives the text a dark colour. By default, the text colour in navbars is blue, however, I think it looks better with the navbar-light class.

Let’s add some content to our navbar, at the same level as the brand anchor tag:

The display-3 and lead classes are typography classes, which make the text a bit more opinionated and better looking in my view. You can read more about typography in Bootstrap 4.0 here.

The Main Content — Grid and Cards

Below our jumbotron we’re going to add the main content of our website, which will consist of four cards. A card is a whole new component of Bootstrap 4.0, and it’s replacing panels, wells, and thumbnails from Bootstrap 3.0.

Let’s first have a look at what we want to build:

Creating the grid

In order to make them appear nicely like this, and to also make sure they work well responsively, we’ll need to wrap the cards in a grid. The grid is one of the core pieces of Bootstrap, and many developers use the library solely because of the grid.

We’ll start off by creating a very simple grid with no content. In Bootstrap, you always create rows first and then wrap columns inside the rows. By default, the grid can be divided into 12 columns in the width.

Above the sm breakpoint, we want each of the cards to take up half the width, so we’ll give the columns a col-sm-6 class. When the screen reaches the lg breakpoint though, we want four cards in the width, so we’ll do col-lg-3.

To turn a div into a card we’ll simply add the class card. If we want an image to appear in the header of the card, we’ll add the card-img-top. As for the rest of the content, we’ll use the classes card-body, card-title , and card-text.

One problem, though, is that this layout won’t look good when the grid gets multiple rows. As you can see, we’ll need to add some spacing in-between the rows.

This will introduce you to a new spacing concept in Bootstrap 4.0, where you can add classes to set the padding and margin. We’ll simply add the class mt-3 to the card divs.

<div class="card mt-3">
...
</div>

The mt stands for margin-top, and the 3 is a number on a scale from 1 to 5, where 5 is the most. You can also do for example pb-4, which would set thepadding-bootom to 4. You probably get the point by now. Once we’ve added this, we have a nice grid with cards on our website.

Contact form

Finally, let’s also add a contact form. It’ll simply be a new row in our grid. This time we’ll also use the offset class, as we don’t want it to be full-width, at least not above the md breakpoint.

So from md and upwards we’ll give it a width of six columns, and an offset of three:

The controls — like the <input> and <textarea>—are styled with the form-control class. They make it look like a classical Boostrap form:

And that’s it! You’ve now created your very first Bootstrap 4.0 website. If you want to learn the library properly, be sure to check out our free course on Scrimba.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services,
and staff.