Lesson 26 - Bootstrap - Introduction to the grid systems

In the previous lesson, Bootstrap - Multimedia objects and containers, we discussed media objects. Today we finally got to the long-promised grid system of Bootstrap. Today's and the next lesson belongs to the most useful ones in this course. You're going to learn a very simple and effective tool. The Bootstrap's grid system is built on flexbox since version 4, the older versions used the float CSS property.

Introduction to grid systems

For the start, we should introduce what grid systems are about, let's start from the beginning. Dividing the content evenly into a grid is not just a web thing, this principle is used basically since medieval times, not only for text but for illustrations as well. We'll find it in newspapers and magazines. You may know that the logos of most companies are made on the basis of precious shapes which match with each other. Apart from the aesthetic function, the grid also make information aligned this way better to comprehend for people. Let's have a look at the layout of a popular Bootstrap template Gantella for a web administration:

We can see that the layout is divided into six imaginary columns. The sizes of all the containers on the page are then always whole multiples of the columns' size. The web makes a very solid impression.

If we positioned the items on the page as if it didn't matter, we could end up similarly to the legendary website of the family hotel Rustic Meadows, today already replaced by a newer version, thank God.

Tables

Many years ago, tables were used to create website layouts. Their advantage was that the website content was optically aligned in a table so the layout made a consistent and balanced impression. A table layout of such an outdated website could look something like this:

<table>
    <tr>
        <td colspan="2"><h1>Header</h1></td>
    </tr>
    <tr>
        <td><h2>Menu</h2></td>
        <td>Content...</td>
    </tr>
    <tr>
        <td colspan="2"><small>Footer</small></td>
    </tr>
</table>

The result in the browser:

Tables are not used to position elements anymore because of 2 important disadvantages.

• It's not semantic - Search engines understand a table as some data source. If we place the whole page in it or a part of the page with some content, the search engines probably won't understand it which can cause less visitors for us.
• It's not responsive - If we reduce the window size of the page with a table, the table doesn't wrap and an ugly scrollbar shows up. A website with table layout would be almost unusable on mobile devices.

Grid systems

Webdesigners were thinking about how to create a grid without the <table> element to avoid its disadvantages. This way, grid systems were made. Grid systems are predefined classes which we assign to <div> elements and these elements then get a certain width. These systems usually divide the parent element into 12 columns. Back then, the width was set in percentage, so one column took 8,33%. Nowadays, we use flexbox. Number 12 was chosen becuse it has many divisors. We can place into the container:

• An element stretched through the whole width (12 column size)
• An element stretched through one half of the width (6 column size)
• An element stretched through one third of the width (4 column size)
• An element stretched through one fourth of the width (3 column size)
• An element stretched through one sixth of the width (2 column size)
• An element stretched through one twelfth of the width (1 column size)

Of course, we can set multiples of these values as well, e.g. to insert into the container an element which takes 2/3 of the content, we'd set its width to 8 columns. On the other hand, we aren't able to place e.g. 5 elements in a row, we can place only 4 or 6. This restriction is the price for aesthetic consistency of the grid.

Let's try an example with the Bootstrap grid:

<div class="container-fluid bg-light">
    <div class="row">
        <div class="col-3 border bg-success text-white">
            One fourth
        </div>
        <div class="col-3 border bg-success text-white">
            One fourth
        </div>
        <div class="col-6 border bg-warning">
            One half
        </div>
    </div>
</div>

We've already introduced containers. If we work with the grid, we define the container's rows and columns. A row wraps columns, we define a row as a <div> with the .row class. We can define columns in several ways, the simplest is to assign the col- class, where after the dash there's a number specifying how many columns of the grid should the column occupy. If we wanted all the columns to have the same size, we'd just assign the .col class to them.

In the example below, the first two columns occupy 3/12, which is one fourth of the content. If you thought you wouldn't need fractions as a webdesigner, you're probably disappointed nowi a bit The last one occupies 6/12 of the grid, which is one half.

The result in the browser:

The grid above isn't responsive yet, we're going to show how to do that in the last lesson. Next time, we're going to complete our Bootstrap framework knowledge with the lesson Bootstrap - Bootstrap's grid system. Look forward to it, it's gonna be a ride