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.
- The Encalm Lounge Delhi Airport T3 review - June 21, 2023
- Review : Reliance Jio Cinema Premium - June 20, 2023
- Web Services Part I – SOAP - May 15, 2017
I hope you would find above article informative and interesting. In case you need any further information, please feel free to comment , I shall try to reply the comment at the earliest. If you like this article, please like my Facebook page and advise/suggest me for more topics of your interest. Happy Coding!