What is bootstrap anyway?

Bootstrap is a powerful open-source front-end framework created to facilitate the responsive development of websites and web apps through a set of templates that can be found in the framework's documentation.

Before I begin to explain more about Bootstrap, I'd like to clarify what the term "responsivity" really means.

Responsivity

Responsive web design, a term originally defined by Ethan Marcotte in his article in 2010, is also emerging in the field of architecture. "Responsive architecture" studies how physical spaces can respond to the presence of people passing through them. Some architects are experimenting with art installations and wall structures that bend, flex, and expand themselves as the crowd approaches them.

That's exactly what responsiveness in web development is. With so many inconsistent window widths, different screen resolutions, and even user preferences, websites must be responsive and work perfectly with all those variables. Responsive website layouts adapt themselves based on the size and capabilities of the user's devices, whether it's a phone, tablet, desktop, TV, or even a game console.

Now that you know more about responsiveness, let's talk about the importance of the Bootstrap framework.

Web developers using Bootstrap can build responsive websites much faster, without spending time worrying about basic commands and functions.

Let's install bootstrap

It can be installed via CDN, which, in my opinion, is the easiest way to start using it.

Create a new index.html file in your project root and include the Bootstrap CSS and JS tags in it. Always remember that the CSS tag must be placed inside the <head> tag, and the JavaScript tag must always be placed at the bottom of the <body> tag. Just like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>Demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Include the Popper scripts along with the Bootstrap JS script, so you can use dropdowns, popovers, and tooltips in your project. Here's an updated example:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

Now, let's use Bootstrap for the first time. Open your index.html file, and it should look like this:

To make the text centered on the page, simply give the <h1> element a class of text-center, like this:

 <h1 class="text-center">Hello, world!</h1>

Now it should look like this:

Note that we didn't even open a CSS file. That's the "magic" of Bootstrap. To finish this first tutorial, let's style it a bit more. Now, I want the background to be black, add some margin to the <h1>element so that it doesn't touch the top of the page, and change the color of the <h1> element to white so that it's visible on the black background.

To achieve this, we'll make the following changes:

Give the <body> element a class of bg-black to set the background color to black.
Add the class my-3 to the <h1> element to add top and bottom margin.
Add the class text-white to the <h1> element to set the text color to white.

<body class="bg-black">                                                    
  <h1 class="text-center my-5 text-white">Hello, world!</h1>

And, without using any css file, the result:

That's correct! Bootstrap is a powerful and versatile framework with extensive capabilities. Many big companies, such as Mastercard, Spotify, and Twitter, utilize Bootstrap in complex and innovative ways. Here are some websites made with Bootstrap that I admire:

Forbes India

Fox News

Made Together

All those websites are incredibly well-crafted projects. Bootstrap truly shines in the hands of skilled developers. Now, let's explore how these skilled developers harness the power of the Bootstrap framework.

Layout

Containers

Containers are fundamental building blocks in Bootstrap that can contain, pad, and align other elements within a given device or view-port. When structuring the HTML of a Bootstrap project, containers must be parent elements and cannot be nested. In other words, it is important not to place one container inside another container.

Just like in real life, containers must be separate elements that contain other elements. Let's fix our previous website and wrap the <h1> element inside a container with a white background. Our code will look like this:

<body class="bg-black">
   <div class="container bg-white">                                                                       
      <h1 class="text-center my-5">Hello, world!</h1>
    </div>                
</body>

As a result, we can explicitly see the space that the container is occupying. The added container with the white background provides a clear visual separation and delineates the area where the <h1> element is placed.

There are two types of containers: container, which we just used, and container-fluid. The container-fluid class can be used if you want a full-width container, spanning the entire width of the view-port. Let's update our code to use container-fluid:

The use of containers will be extremely frequent during the development of your Bootstrap projects. There are other essential building blocks you need to be aware of before you continue experimenting with Bootstrap. I will now discuss them in detail.

Grid system: rows and columns

Bootstrap offers a powerful mobile-first grid system that allows us to quickly build layouts of various sizes and shapes, as I've mentioned before. This grid system is constructed using two fundamental building blocks: rows and columns.

Rows

In Bootstrap, we have containers and rows. Rows are child elements of containers, meaning they are designed to reside inside containers. It's important to adhere to this rule to ensure clean code structure. By following this guideline, you can maintain a well-organized and structured code base.

Now, let's follow the proper approach and fix our website by creating a row inside the container component. To create a row, we need to add a <div> element with a class of row. Here's the updated code:

<body class="bg-black">
    <div class="container bg-white">
      <div class="row">
        <h1 class="text-center my-5">Hello, world!</h1>
      </div>

Indeed, at this point, there may not be any visible changes on the client side of our website. However, as we continue to make adjustments and apply Bootstrap's structure, the pieces will come together, and the website will start to take shape. Stay patient, and soon things will begin to make sense.

Columns

Just like containers and rows, columns are also fundamental building blocks of Bootstrap. With these components alone, we can create many interesting layouts and structures. Let's dive into understanding columns in more detail.

Let's imagine the scenario where you're moving to another country. Logically, you'll need a container to ship all your stuff. However, you won't just throw your stuff into the container because if you did, everything would break. Instead, you put a lot of boxes inside that container to keep everything organized. That's the spirit of the Bootstrap grid system. Containers are equivalent to containers, and boxes are equivalent to rows. But now we also have columns, right? Of course! Let's imagine you have a lot of old porcelain among your belongings. Would you just throw this beautiful and expensive porcelain inside the boxes? Don't even think of that! Instead, use small compartments to organize the interior of your boxes. In the Bootstrap world, these small compartments are what we call columns.

Now, let's work on our website again and finally add a column to contain the <h1> element. Remember, columns are child elements of rows, which are child elements of a container. To fix our code, we simply need to add a <div> element and give it a class of col. Here's the updated code:

 <body class="bg-black">
    <div class="container bg-white">
      <div class="row">
        <div class="col">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
      </div>
    </div>

The cool thing about rows and columns is that within each row, you can fit up to 12 columns. The reason why nothing changed in our code is that we have only one column inside our row. Therefore, this single column naturally occupies the space of 12 columns.

To better understand this concept, let's make a subtle change to our code. Instead of using the class col for our column, let's use col-12, which means that our column should occupy the space of 12 columns. Here's the updated code:

<div class="col-12">
   <h1 class="text-center my-5">Hello, world!</h1>
</div>

No changes, right? That's because in Bootstrap, the classes col and col-12 have the same meaning. Both of them occupy the entire available space of a row. However, let's consider a scenario where we need three columns on the same row, aligned vertically. If we want equal division, we can use the col-4 class for each column. This class will make each column occupy the space of 4 columns, which is one-third of the row's width. To differentiate the columns visually, let's add the bg-primary class for a background color and text-white class for a white text color.

<div class="col-4 bg-primary text-white">
   <h1 class="text-center my-5">Hello, world!</h1>
</div>

Now here's our result:

Things are starting to get interesting, right? Now let's add two more columns to this row with the same classes. I've made some visual changes to the second column to help us better visualize our grid. Here's the updated code:

<div class="row">
        <div class="col-4 bg-primary text-white">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
        <div class="col-4">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
        <div class="col-4 bg-primary text-white">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
</div>

Here's what we have on our website now:

Note that now we have a font-size of 40px

Pretty cool, right? Everything is perfectly aligned and centered on our screen. But what if we test our website on other screen sizes, like a tablet? Let's see how it looks:

Our layout still looks great, even the font-size was automatically adjusted to fit the new screen size. This is one of the benefits of using Bootstrap's responsive grid system. It ensures that our website maintains its structure and readability across various devices and screen sizes.

To test our layout on the screen size of an iPhone 5/SE, here's how it would look:

I'm not satisfied with this result as the columns appear squeezed within the row. However, this is the point I wanted to reach in order to move on to the next topic: Responsiveness.

See you all in the next blog about Bootstrap Responsiveness! Thank you for reading through the entire article, and please let me know if you find any mistakes.

Blog

The bootstrap framework for newbies Part 01

Pedro Furquim