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

So in this article, I will walk you through how to build a simple website using Bootstrap 4.0, while highlighting the most important new features of the library.

If you want to learn Bootstrap 4.0 the right way, check out this free course on Scrimba!

what we will make
We are going to build a basic portfolio website. While it’s simple, it covers many of the core concepts you’ll need to learn to use Bootstrap 4.0 properly.

If you want to play with code, check out this Scrimba Playground. If you do not understand something in the article and need to experiment for yourself, feel free to use it as a reference.

navbari
Let’s start with the navbar. In Bootstrap 4.0 they have simplified the navbar, as they now require slightly less markup. Here’s what we need to create the simplest possible navbar:

The bg-light class makes the background a light gray while the navbar-light class makes the text a darker color. By default, the text color in the navbar is blue, however, I think it looks better with the navbar-light class.

The three classes to note here are navbar-nav, navbar-link, and navbar-item. Together they make up the navigation options just the way you want them.

However, now we’ll need to make it responsive, because we want our navigation options to fit into the hamburger icon on the smaller screen.

This tells Bootstrap that we want the navbar options to toggle between expanded and collapsed states at the md breakpoint, which is at768px.

We also need to wrap our navigation options in a div (with two classes collapse and navbar-collapse) that tells Bootstrap that this is the part we want to collapse.

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

Main Content —Grid and Card

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

grid making

In order for them to display well this way, and also to 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 only use the library because of the grid.

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

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

To convert div to card we will just add class card. If we want an image to appear in the header of the card, we’ll add card-img-top. For the rest of the content, we’ll use the card-body, card-title, and card-text classes.

However, there is a problem that this layout will not look good if the grid has many rows. As you can see, we will need to add some spacing between the lines.

MT stands for margin-top, and 3 is a number on a scale of 1 to 5, where 5 is the highest. You can also do pb-4 for example, which will set padding-bootum to 4. You probably got the point by now. Once we’ve added that, we have a nice grid with cards on our website.

Contact Form

Lastly, let’s also add a contact form. This will 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.

Leave a Reply

Your email address will not be published. Required fields are marked *