Bootstrap’s grid system is a simple yet very powerful feature of Bootstrap. It helps you lay out other elements and images in a neat and orderly fashion on a page.
In this lab, we will use a simple Bootstrap grid to analyze its responsive behavior.
Instructions below apply to the Chrome browser; should you wish to use another browser instead, then you are to find and use matching procedures on that browser.
In text below, we refer to the location of the Web Server’s document root directory as<doc_root></doc_root>which is specific to your Lab environment.
Setting Up The Environment
Check if the <doc_root>B</doc_root> directory exists.
If the <doc_root>B</doc_root> directory does not exists, copy the C:LabFilesB directory over to the <doc_root></doc_root>directory.
Start nginx if is not running.
Review the Lab File
Using your text editor, open <doc_root>Bgrid.html</doc_root>
You should see the following content:
<!doctype html>
<html>
<head>
<title>Bootstrap Grid</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<div >
<div >
<div >"col-sm-3"</div>
<div >"col-md-3"</div>
<div >"col-md-3"</div>
<div >"col-md-3"</div>
</div>
<div >
<div >"col-md-4"</div>
<div >"col-md-4"</div>
<div >"col-md-4"</div>
</div>
<div >
<div >"col-md-6"</div>
<div >"col-md-6"</div>
</div>
<div >
<div >"col-md-8"</div>
<div >"col-md-4"</div>
</div>
</div>
<!-- <script src="js/jquery-1.9.1.js"></script>-->
<!-- <script src="js/bootstrap.min.js"></script>-->
</body>
</html>
Review the grid structure built using div elements which are styled with the .container, .row, and .col-* classes. We are using the **md moniker which applies to devices with medium desktop screen resolution.
Notice that our grid does not require any JS files, which are commented out at the bottom of the page.
Keep the editor open on the file — we will need it a bit later.
Open your Chrome browser and navigate to the following URL: http:\localhostBgrid.html
You should see the following page content:
In Chrome, press F12 to open the DevTools console.
If necessary, click the Dock side icon in the middle to dock the console to the bottom of the browser window.
Click Elements on the left hand side of the DevTools toolbar.
The source of the currently loaded page should be displayed.
Expand the first div.container / div.row element and move your mouse over the
elements.
Observe how the corresponding cell is being highlighted in your grid.
The blue portion of the highlighted cell demarcates your main cell content boundaries, the green ones are the configured padding.
Note: You can also try and click the Arrow icon on the left-most end of the DevTools toolbar, or press Ctrl-Shift-C which will active the HTML element selection mode.
Testing Grid’s Responsiveness
Now let’s see how the Bootstrap’s grid responds to changes in the page width.
Click the “Toogle device mode” icon on the left-hand side of the DevTools toolbar right to the left of the Element tab.
You should be placed in the Device emulation window.
Note: You can also use the Ctrl-Shift-M key combination to switch to this mode.
Using the emulator window handle represented by three vertical bars (|||) start making the window more narrow.
At a certain value of the screen width, the layout of your page will change stacking up all the cells in one column.
Interestingly enough, all the cells are now fit into a single column with a width of 750px.
Start increasing the width of the page, the layout should change back to the original horizontal one after a specific page width.
Try to identify the value of that threshold for the layout change.
Before you spend more time that is needed, try to remember the value of the breakpoint for md devices as captured in its CSS media rule:
@media (min-width: 992px)
That’s the one.
Click in the Screen window on the Device emulator toolbar and change the width of the screen to 991 (pixels)
Your page layout should have all the cells stacked-up.
Click in the Screen window on the Device emulator toolbar again and change the width of the screen to 992 (pixels).
Now, your page layout should have all the cells laid out horizontally.
In other words, the @media (min-width: 992px) rule is honored by Chrome.
Change the Column Type
Let’s see how the behavior of your grid may be affected by your changing the column type from md to sm (tablets and such).
Switch back to your text editor opened on <doc_root>Bgrid.html</doc_root>
Replace the -md- parts of the column class names with -sm-
After the change, grid.html should looks as follows:
*… Content omitted for space … *
<body>
<div >
<div >
<div >"col-sm-3"</div>
<div >"col-sm-3"</div>
<div >"col-sm-3"</div>
<div >"col-sm-3"</div>
</div>
<div >
<div >"col-sm-4"</div>
… *Content omitted for space … *
Save the file.
Switch to Chrome and reload the page.
Repeat the page width change steps as performed in the previous lab part.
As you would expect, the sm device CSS media rule now applies:
@media (min-width: 768px)
So the “stacking up” occurs at screen widths below 768 pixels.
We are almost done in this lab.
Lab Clean-up
Close your browser.
Close the editor.
Review
In this lab we reviewed the responsive behavior of Bootstrap’s grids.