Tech Junkie Blog: Bootstrap 4: Grid System Cheat Sheet

Sunday, July 29, 2018

Bootstrap 4: Grid System Cheat Sheet

One of the main concept of working with Bootstrap is the Grid system.  It could be intimidating at first to work with the Grid system.  But the system is quite elegant and simple solution.

The most important thing you have to remember about the grid system is that it divides the page into 12 columns, and it is responsive meaning it will adjust to the size of the client's screen.

You can control the size of the column with the .col-sm, .col-md, .col-lg, .col-xl, which translates to small, medium, large, and extra large screens.  In addition to the screen size you can also control the with of the column with the -n at the end of class attribute.  For example if you want a column for a small screen to span three columns it would be .col-sm-3.

Here is the cheat sheet, I am going to use color coding for the different sizes.

Small - Green
Medium - Orange
Large - Red
Extra Large - Blue


Oh, before I forget the grid system needs to be wrapped around by a .row CSS class.

1. First let's create our small columns, with this code


<body>
    <br/>
    <blockquote>
        <div class="container-fluid">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-1 font-weight-bold bg-success border border-dark">col-sm-1</div>
                    <div class="col-sm-2 font-weight-bold bg-success border border-dark">col-sm-2</div>
                    <div class="col-sm-3 font-weight-bold bg-success border border-dark">col-sm-3</div>
                    <div class="col-sm-4 font-weight-bold bg-success border border-dark">col-sm-4</div>
                    <div class="col-sm-5 font-weight-bold bg-success border border-dark">col-sm-5</div>
                    <div class="col-sm-6 font-weight-bold bg-success border border-dark">col-sm-6</div>
                    <div class="col-sm-7 font-weight-bold bg-success border border-dark">col-sm-7</div>
                    <div class="col-sm-8 font-weight-bold bg-success border border-dark">col-sm-8</div>
                    <div class="col-sm-9 font-weight-bold bg-success border border-dark">col-sm-9</div>
                    <div class="col-sm-10 font-weight-bold bg-success border border-dark">col-sm-10</div>
                    <div class="col-sm-11 font-weight-bold bg-success border border-dark">col-sm-11</div>
                    <div class="col-sm-12 font-weight-bold bg-success border border-dark">col-sm-12</div>
                </div>


The resulting visual looks like this in the browser. As you can see col 1 to 4 can fit into one line.  As the columns increase in size it takes up more space. 5+6 = 11 so it can fit in one line.  However, anything after 6 will only fit into one line if it's in the same row.  It's gets simple if you just add everything to 12 so 7+4+1 = 12, or 7+3+2 = 12 would be okay.




















2. Now let's do the same thing for the medium columns, with this code.
                <div class="row">
                    <div class="col-md-1 font-weight-bold bg-warning border border-dark">col-md-1</div>
                    <div class="col-md-2 font-weight-bold bg-warning border border-dark">col-md-2</div>
                    <div class="col-md-3 font-weight-bold bg-warning border border-dark">col-md-3</div>
                    <div class="col-md-4 font-weight-bold bg-warning border border-dark">col-md-4</div>
                    <div class="col-md-5 font-weight-bold bg-warning border border-dark">col-md-5</div>
                    <div class="col-md-6 font-weight-bold bg-warning border border-dark">col-md-6</div>
                    <div class="col-md-7 font-weight-bold bg-warning border border-dark">col-md-7</div>
                    <div class="col-md-8 font-weight-bold bg-warning border border-dark">col-md-8</div>
                    <div class="col-md-9 font-weight-bold bg-warning border border-dark">col-md-9</div>
                    <div class="col-md-10 font-weight-bold bg-warning border border-dark">col-md-10</div>
                    <div class="col-md-11 font-weight-bold bg-warning border border-dark">col-md-11</div>
                    <div class="col-md-12 font-weight-bold bg-warning border border-dark">col-md-12</div>
                </div>


This the visual output in the browser.














3.  We'll do the same things for the lg, and xl columns


                <div class="row">
                    <div class="col-lg-1 font-weight-bold bg-danger border border-dark">col-lg-1</div>
                    <div class="col-lg-2 font-weight-bold bg-danger border border-dark">col-lg-2</div>
                    <div class="col-lg-3 font-weight-bold bg-danger border border-dark">col-lg-3</div>
                    <div class="col-lg-4 font-weight-bold bg-danger border border-dark">col-lg-4</div>
                    <div class="col-lg-5 font-weight-bold bg-danger border border-dark">col-lg-5</div>
                    <div class="col-lg-6 font-weight-bold bg-danger border border-dark">col-lg-6</div>
                    <div class="col-lg-7 font-weight-bold bg-danger border border-dark">col-lg-7</div>
                    <div class="col-lg-8 font-weight-bold bg-danger border border-dark">col-lg-8</div>
                    <div class="col-lg-9 font-weight-bold bg-danger border border-dark">col-lg-9</div>
                    <div class="col-lg-10 font-weight-bold bg-danger border border-dark">col-lg-10</div>
                    <div class="col-lg-11 font-weight-bold bg-danger border border-dark">col-lg-11</div>
                    <div class="col-lg-12 font-weight-bold bg-danger border border-dark">col-lg-12</div>
                </div>
                <div class="row">
                    <div class="col-xl-1 font-weight-bold bg-primary border border-dark">col-xl-1</div>
                    <div class="col-xl-2 font-weight-bold bg-primary border border-dark">col-xl-2</div>
                    <div class="col-xl-3 font-weight-bold bg-primary border border-dark">col-xl-3</div>
                    <div class="col-xl-4 font-weight-bold bg-primary border border-dark">col-xl-4</div>
                    <div class="col-xl-5 font-weight-bold bg-primary border border-dark">col-xl-5</div>
                    <div class="col-xl-6 font-weight-bold bg-primary border border-dark">col-xl-6</div>
                    <div class="col-xl-7 font-weight-bold bg-primary border border-dark">col-xl-7</div>
                    <div class="col-xl-8 font-weight-bold bg-primary border border-dark">col-xl-8</div>
                    <div class="col-xl-9 font-weight-bold bg-primary border border-dark">col-xl-9</div>
                    <div class="col-xl-10 font-weight-bold bg-primary border border-dark">col-xl-10</div>
                    <div class="col-xl-11 font-weight-bold bg-primary border border-dark">col-xl-11</div>
                    <div class="col-xl-12 font-weight-bold bg-primary border border-dark">col-xl-12</div>
                </div>


The completed visual looks like the following.



























If you look at the page at fullscreen everything looks the same.  The cheat sheet becomes valuable when you resize the page.  As you resize the browser size you can see visually what column size would fit on the screen.  Here is an example of when the xl columns will start stacking.

































Now let's see when the large columns stack, but before that resize the page just a little bit, you will notice that the large columns are still intact.  As you make the page smaller you will see that the large columns starts to stack.  This is call the breaking point of the column.





































This is the breaking point for the large columns





































Eventually when the screen gets too small all the columns are stacked, they've all reached their breaking point.



































































Here is the complete code for the cheat sheet.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- Optional theme -->
    <title></title>
</head>
<body>
    <br/>
    <blockquote>
        <div class="container-fluid">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-1 font-weight-bold bg-success border border-dark">col-sm-1</div>
                    <div class="col-sm-2 font-weight-bold bg-success border border-dark">col-sm-2</div>
                    <div class="col-sm-3 font-weight-bold bg-success border border-dark">col-sm-3</div>
                    <div class="col-sm-4 font-weight-bold bg-success border border-dark">col-sm-4</div>
                    <div class="col-sm-5 font-weight-bold bg-success border border-dark">col-sm-5</div>
                    <div class="col-sm-6 font-weight-bold bg-success border border-dark">col-sm-6</div>
                    <div class="col-sm-7 font-weight-bold bg-success border border-dark">col-sm-7</div>
                    <div class="col-sm-8 font-weight-bold bg-success border border-dark">col-sm-8</div>
                    <div class="col-sm-9 font-weight-bold bg-success border border-dark">col-sm-9</div>
                    <div class="col-sm-10 font-weight-bold bg-success border border-dark">col-sm-10</div>
                    <div class="col-sm-11 font-weight-bold bg-success border border-dark">col-sm-11</div>
                    <div class="col-sm-12 font-weight-bold bg-success border border-dark">col-sm-12</div>
                </div>
                <div class="row">
                    <div class="col-md-1 font-weight-bold bg-warning border border-dark">col-md-1</div>
                    <div class="col-md-2 font-weight-bold bg-warning border border-dark">col-md-2</div>
                    <div class="col-md-3 font-weight-bold bg-warning border border-dark">col-md-3</div>
                    <div class="col-md-4 font-weight-bold bg-warning border border-dark">col-md-4</div>
                    <div class="col-md-5 font-weight-bold bg-warning border border-dark">col-md-5</div>
                    <div class="col-md-6 font-weight-bold bg-warning border border-dark">col-md-6</div>
                    <div class="col-md-7 font-weight-bold bg-warning border border-dark">col-md-7</div>
                    <div class="col-md-8 font-weight-bold bg-warning border border-dark">col-md-8</div>
                    <div class="col-md-9 font-weight-bold bg-warning border border-dark">col-md-9</div>
                    <div class="col-md-10 font-weight-bold bg-warning border border-dark">col-md-10</div>
                    <div class="col-md-11 font-weight-bold bg-warning border border-dark">col-md-11</div>
                    <div class="col-md-12 font-weight-bold bg-warning border border-dark">col-md-12</div>
                </div>
                <div class="row">
                    <div class="col-lg-1 font-weight-bold bg-danger border border-dark">col-lg-1</div>
                    <div class="col-lg-2 font-weight-bold bg-danger border border-dark">col-lg-2</div>
                    <div class="col-lg-3 font-weight-bold bg-danger border border-dark">col-lg-3</div>
                    <div class="col-lg-4 font-weight-bold bg-danger border border-dark">col-lg-4</div>
                    <div class="col-lg-5 font-weight-bold bg-danger border border-dark">col-lg-5</div>
                    <div class="col-lg-6 font-weight-bold bg-danger border border-dark">col-lg-6</div>
                    <div class="col-lg-7 font-weight-bold bg-danger border border-dark">col-lg-7</div>
                    <div class="col-lg-8 font-weight-bold bg-danger border border-dark">col-lg-8</div>
                    <div class="col-lg-9 font-weight-bold bg-danger border border-dark">col-lg-9</div>
                    <div class="col-lg-10 font-weight-bold bg-danger border border-dark">col-lg-10</div>
                    <div class="col-lg-11 font-weight-bold bg-danger border border-dark">col-lg-11</div>
                    <div class="col-lg-12 font-weight-bold bg-danger border border-dark">col-lg-12</div>
                </div>
                <div class="row">
                    <div class="col-xl-1 font-weight-bold bg-primary border border-dark">col-xl-1</div>
                    <div class="col-xl-2 font-weight-bold bg-primary border border-dark">col-xl-2</div>
                    <div class="col-xl-3 font-weight-bold bg-primary border border-dark">col-xl-3</div>
                    <div class="col-xl-4 font-weight-bold bg-primary border border-dark">col-xl-4</div>
                    <div class="col-xl-5 font-weight-bold bg-primary border border-dark">col-xl-5</div>
                    <div class="col-xl-6 font-weight-bold bg-primary border border-dark">col-xl-6</div>
                    <div class="col-xl-7 font-weight-bold bg-primary border border-dark">col-xl-7</div>
                    <div class="col-xl-8 font-weight-bold bg-primary border border-dark">col-xl-8</div>
                    <div class="col-xl-9 font-weight-bold bg-primary border border-dark">col-xl-9</div>
                    <div class="col-xl-10 font-weight-bold bg-primary border border-dark">col-xl-10</div>
                    <div class="col-xl-11 font-weight-bold bg-primary border border-dark">col-xl-11</div>
                    <div class="col-xl-12 font-weight-bold bg-primary border border-dark">col-xl-12</div>
                </div>
            </div>
        </div>
    </blockquote>
</body>
</html>




No comments:

Post a Comment