Hi All! Hope you are doing well. In our last post, we talked about Bootstrap framework and promised to discuss more details about Bootstrap in coming posts. Bootstrap itself is so vast, that it can not be covered in one or two posts. Therefore we shall split the discussion one or two elements at a time. This post is second in the Bootstrap Series. Today we shall discuss about getting started with Bootstrap, understand Grid System, Column Classes and Containers.
In olden days, any HTML programming was being done using Tables, so that we can place user interface elements at proper place. Table programming was very time consuming and not developer friendly. With the introduction of CSS, we started using Divs with margin, padding and other formatting tricks. Bootstrap has introduced a better concept. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or view-port size increases.
Bootstrap provide various starting template in a form of Example repository. It is highly advised to download the repository and use the examples to suit your requirements. There are multiple examples of Starter Templates, Theme Template, Grid examples, Jumbotron, Navigation Bar, Cover Page, Carouse, Blog, Dashboard and Sign-in pages. You can use following template (please feel free to edit as required) to start to the new and exciting journey of bootstrap.
Bootstrap Grid System
Bootstrap 3 introduced 12 column responsive grid system. The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts. 12 Columns means, you can either create 3 column layout with fixed 4 column each or any other uneven combination, but total column should not exceed 12.
I have created a code playground example at JsFiddle, to demonstrate Bootstrap Grid System, using following code.
If you face any problem in viewing the above code in WordPress, please use JsFiddle link, fully working code is available there. In our future post, we shall explore many more features of Bootstrap.
At JituOnline dot in, he explores the intersection of cutting-edge technology and human lifestyle... whether it's decoding the latest AI models or reviewing the gadgets that define our era, his mission is to make the "limitless realm" of tech accessible to everyone... Join him as he uncovers how tomorrow’s automation elevates today’s living...
- N8N Python Docker Setup: Self-Hosting Struggles vs. Competitors - February 11, 2026
- Zero Trust Architecture Principles and Implementation Roadmap - February 9, 2026
- Build AI Web Apps with Gemini AI Studio No Code - February 9, 2026
I really hope this article gave you some fresh insights or sparked a new idea for your next project. If something clicked... or if you have a burning question... don’t be a stranger! Drop a comment below on connect using below links.
Connect With Me Facebook page Instagram Linkedin Twitter/X: Twitter/X Email : jitu9968 at gmail dot com
