Understanding Grid System in Bootstrap

The following article describes the Grid System in Bootstrap.

In fact, the grid system in Bootstrap is a flexible and responsive layout system that helps to create complex layouts for websites and applications. In brief, the grid system is based on a 12-column system. Furthermore, it uses CSS Flexbox to align and distribute content within each column.

Basically, each row in the grid is divided into 12 equal-width columns, which you can use to place content. Also, you can specify the number of columns you want an element to span by using classes. For example, the class “col-md-6” will make an element span 6 out of the 12 columns on medium screens and above.

In general, Bootstrap uses different classes for different screen sizes, such as “col-sm” for small screens, “col-md” for medium screens, “col-lg” for large screens, and “col-xl” for extra-large screens. So, you can control how to display an element on different devices and screen sizes.

Example of Grid System in Bootstrap

For example, consider the following code:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">...</div>
    <div class="col-sm-6 col-md-4">...</div>
    <div class="col-sm-12 col-md-4">...</div>
  </div>
</div>

In this example, on small screens, each column will span 6 out of the 12 columns and be arranged in two rows. On medium screens and above, each column will span 4 out of the 12 columns and be arranged in a single row.

In summary, the grid system in Bootstrap makes it easy to create complex and responsive layouts by dividing the screen into a series of equal-width columns. The grid system allows you to control how elements are displayed on different devices and screen sizes, making it easier to create websites that look great on any device.

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Understanding Document Object Model (DOM) in JavaScript

Creating Classes in JavaScript

Bootstrap Frequently Asked Questions

Most Popular Bootstrap Interview Questions and Answers

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites