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.
Beyond my professional realm, I'm a passionate blogger covering Lifestyle, AI, Technology, and Food. I explore intriguing subjects that spark my curiosity, from cutting-edge tech and captivating gadgets to the dynamic world of Artificial Intelligence. My aim is to share insightful perspectives and simplify concepts for all levels of expertise. Join me on this journey to uncover the wonders of technology, Artificial Intelligence, gadgets' allure. Step into a limitless realm of curiosity and unwavering enthusiasm.
- Revolutionizing Justice: How AI is Reshaping India’s Legal System - August 20, 2023
- Exploring the Boundaries of Creativity: Artificial Intelligence and Generating Images, Pros and Cons - August 15, 2023
- The 10 Best Political TV Series of All Time - July 31, 2023
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!