Grid layouts

0. Quick view

1. Introduction

2. How it works

We can see that every col (column) are contained in a row, and a row is inside of a container. The class name for columns are not limited to col. It can be extended as a full format like col-**-#. ** refers to the breakpoints. We have xs, sm, md, lg, xl and xxl from extra small to extra extra large. And the # can be any number from 1 to 12 which stands for the number of columns (12 in total) that the div spans.

Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it. (eg .col-sm-4 applies to sm, md, lg, xl, and xxl). This means you can control container and column sizing and behavior by each breakpoint.

In our practice, the three most common columns are sm (small, the size for phones), md (medium, the size for tablets), and lg (large, the size for computers). For example, in the third row of the image, we have col-sm-8 and col-sm-4. By default, if a smaller breakpoint is not defined (xs in this example), it would span the whole width. So, when the viewport's width is less than 576 pixels (defined by breakpoints), each of the divs will take up a whole row. And when it is greater than 576 pixels, the two columns will be in the same row, and the one with col-sm-8 with take up 8/12 of the width and the one with col-sm-4 will take up 4/12 of the width.

3. Example layouts

Here we will give 3 examples for the common used layouts. Look into the example, it will help you understand how to use the cheatsheet above to structure your page accordingly.

Content in full width

Use the basic structure container - row - col and put all your content inside of the col tag, and it will automatically occupy the whole width of its contaienr.

Here's the code:

    <div class="container">
        <div class="row">
            <div class="col bg-tint">
                <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
            </div>
        </div>
    </div>
                            

2/3 content and 1/3 box on the right (responsive)

As mentioned above, the whole width of the viewport is divided into 12 equal-width columns. So, when we want an elements to take two thirds of the screen, we can do some simple calculation: 12 columns * 2/3 = 8 which means the element will take 8 columns. And the box on the right will have 4 columns.

Also, we need to consider about the responsive layout. When the screen size goes smaller, if we squeeze the element, it may look ugly. In this case, on the third row of our cheatsheet, we have col-sm-8. It means only when the screen is wider than "small" which is 576 pixels (medium is 769 pixels), the elements will occupy 8 columns of 12. Or it will take up the whole width.

Here's the code:

    <div class="container">
        <div class="row">
            <div class="col-sm-8 bg-tint">
                <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
            </div>
            <div class="col-sm-4">
                <div class="box-header-tint large">Box header</div>
                <div class="box-bdr-gold">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                </div>
            </div>
        </div>
    </div>
                            

3 equal width columns in one row (responsive)

Like the above example, we are also applying the responsive classes here. As we want each column to take up 1/3 of the screen size, there will be 4 columns for each. And the column will go full width when the screen width is smaller than 576 pixels.

Here's the code:

    <div class="container">
        <div class="row">
            <div class="col-sm-4 bg-tint">
                <h4>col-sm-4</h4>
                <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
            </div>
            <div class="col-sm-4 bg-tint">
                <h4>col-sm-4</h4>
                <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
            </div>
            <div class="col-sm-4 bg-tint">
                <h4>col-sm-4</h4>
                <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
            </div> 
        </div>
    </div>