Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

Guide To Understanding The Bootstrap Grid System Edit
Last Update:2024-10-17 15:00:17
The Change:2024-10-16 10:33:26

Here is a guide to understanding the Bootstrap Grid system. Think of the Bootstrap Grid system like tables. Tables can be hard to deal with. Tables are less forgiving when it comes to different screen sizes. One solution to this issue is the Bootstrap Grid System. 


Prerequisites For Using Bootstrap

Make sure that you have completed lesson 1 in order to understand this one.

Grid System Details

  • You can use up to 12 columns.
  • It is responsive to screen sizes.
  • Target divs with classes
    • xs - for smart phones
    • sm - for tablets
    • md - for desktops
    • lg - for large screens
  • Easily size div classes with single digit numbers

Bootstrap Script Library in Head Tag

Make sure in your head tag in your HTML that you use the Bootstrap Libraries. 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Example of Using the Bootstrap Grid

The code below give you a simple example of using the Bootstrap Grid. 
<div class="container-fluid">
 <h1>This is a Bootstrap Grid Example</h1>
 <p>Resize the browser window to see the effect.</p>
 <div class="row">
 <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div>
 <div class="col-sm-8" style="background-color:lightBlue;">.col-sm-8</div>
 </div>
</div>
Try Bootstrap Grid here

Manipulating Grid Numbers

You can manipulate the grid numbers to get the size you want. Since you already know that you can use up to 12 numbers in a grid edit them accordingly. This is a Bootstrap Grid Example This is a Bootstrap Grid Example 
<div class="container-fluid">
 <h1>This is a Bootstrap Grid Example</h1>
 <p>Resize the browser window to see the effect.</p>
 <div class="row">
 <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div>
 <div class="col-sm-8" style="background-color:lightBlue;">.col-sm-8</div>
 </div>
</div>
3 Column Grid Layout 3 Column Grid Layout 
<div class="container-fluid">
 <h1>This is a Bootstrap Grid Example</h1>
 <p>Resize the browser window to see the effect.</p>
 <div class="row">
 <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div>
 <div class="col-sm-4" style="background-color:lightBlue;">.col-sm-4</div>
 <div class="col-sm-4" style="background-color:red;">.col-sm-4</div>
 </div>
</div>
4 Column Grid Layout 4 Column Grid Layout