Quick Introduction to Bootstrap 4 Grid Systems
For a project to be successful it needs a blueprint or skeletal framework for guidance. In Bootstrap 4, we have what we call the Grid System. It’s basically a creation of rows and columns to form the 12-column standard grid system.
The Bootstrap 4 Grid System is quite handy when formatting web content to be responsive on smartphones, desktops or larger display screens. You can create an infinite number of rows and columns or format them with regard to your website requirements. Instead of pixels, this time we are working with rem & em, and a new addition is the –sm prefix for mobile phones.
There are three resources you need to work in Bootstrap 4. You need simple knowledge on how CSS and HTML work and min.css availability (but in this case CDN link will work). Then you need the patience to work carefully and through every process for more impactful results.
Begin with a Simple Grid
Creating the base grid is no hassle, first develop an index.html file set up then paste the contents below.
Next create div that will be the container class. All the rows and columns should be placed within this container for them to be properly placed on your browser or screen. Containers can be fixed (with no additional spaces on either side) or they can be container-fluid (which means have liquid like grids). In this tutorial we work with the fixed container.
Below is how to create a HTML container. A quick Bootstrap tip, always work with one container and have all the row elements within it. This helps center elements properly onto your screen.
Now to create rows within the container. You can create as many rows as required then once they are defined the columns come in next. Here is a sample
You create columns using the prefix class ‘col’ then specify the size using the 12-scale guideline. There are basically five class prefixes for columns;
- Col-xs suited for extra small screen displays of at most 34em
- Col-sm for small displays of at least 34em
- Col-md for a stand display of at least 48em width
- Col-lg for desktop-size displays of at least 62em width
- Col-xl for extra-large screen displays of 75em and above
Now, say we want a single column to span the entire 12 columns in Bootstrap 4. You can create this using the class col-xs-12, 12 denoting the number of columns to span across.
Example, create 3 columns of equal width in one row using the class col-xs-4 three times for each of them. Bootstrap will span this across six of its columns as shown by the code below;
The col-1, col-2, and col-3 are basically to help our three columns pick their individual CSS styling. But to make this clearer, we assign each custom class a unique color. Now add some styling on the header section then close with a </head> tag as shown below;
Below is what should appear on your browser output;
By specifying the class col-sm-4, this means all elements within the container class will span 3 grids to add up to 12 columns on smaller screens.
Now what if we want our code to affect larger screens as well? Luckily, Bootstrap 4 automatically figures this out using the code setup below;
The class col-lg-12 is set to affect larger displays of 62em and above. Simultaneously, the col-sm-4 remains intact to affect smaller screens of at least 34em. This is responsive web design explained in a single sentence. The output should show the elements occupying 3 distinct columns for smaller screen, while they occupy the entire 12-column setup for large screens.
Format grids for various screens
How can you create a flexible layout that will be responsive on desktop, tablets or smartphones? Begin by creating a fresh HTML File labelled grids_view.html. then place your basic markup as shown below (it’s almost similar to our first example).
Now let’s format our grid to suit desktop displays.
We are going to use the prefix class ‘col-md-‘for our columns. It’s okay to work with ‘col-lg-‘or ‘col-xl’; there won’t be much of a different if the desktop screen is 1200px and above.
First let us determine our div container and inside it create eight col-md-3 class columns, inside each column set a h3 tag, text and link. Include a header section in a col-md-12 class to span it across the entire screen. Below is what you should have;
Now we need to style our grid a little to make it more presentable. See the code below and the final look when viewed on a desktop
We just need to throw in some extra code to make our elements responsive on tablet screens. Tablets can display content in portrait or landscape view. Landscape will have a col-md- class while Portrait will have a col-sm- class.
Create two main column layouts using the class col-sm-6. Bootstrap will automatically display the remaining columns on the second row of the grid. Copy paste the below code to achieve
The result on the tablet will look like this;
Finally, to format your elements for mobile you will use the col-xs-12 class. A smartphone’s landscape view can be achieved with a col-sm- class while portrait is achieved using a col-xs- class. The grid will be displayed on a single column per row as shown below;
The final result on your smartphone will look as below;
That’s it! You now have an understanding of how Bootstrap 4 grid systems work. Additionally, you can easily format your grids to suit any display of choice using the simple guideline provided above.