Bootstrap Grid System
Bootstrap’s grid system is a responsive, mobile-first layout system that allows you to create flexible and scalable layouts for your web pages. The grid system is based on a 12-column layout, which you can use to divide your content into different sections or columns. Here’s an overview of how the Bootstrap grid system works:
HTML:
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
Bootstrap Grid System
In this example, we have a container with a single row and three columns. Each column has the col-md-4 class, which means that it takes up 4 out of 12 columns (i.e. one-third of the available space) on medium-sized screens and larger. On smaller screens, the columns will stack vertically to provide a better viewing experience on mobile devices.
You can use different class names to specify the number of columns that a column should take up on different screen sizes. Here are some examples:
- col-xs-12 col-sm-6 col-md-4 col-lg-3: This column will take up the full width of the screen on extra-small devices, half the screen on small devices, one-third of the screen on medium devices, and one-fourth of the screen on large devices.
- col-xs-6 col-sm-4 col-md-3 col-lg-2: This column will take up half the screen on extra-small devices, one-third of the screen on small devices, one-fourth of the screen on medium devices, and one-sixth of the screen on large devices.
- col-xs-12 col-sm-12 col-md-6 col-lg-6: This column will take up the full width of the screen on extra-small and small devices, half the screen on medium devices, and half the screen on large devices.
You can also use offset classes to create gaps between columns, and nesting to create more complex layouts with sub-columns.
Here’s an example of a more complex layout with nested columns and offsets:
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">Sub-column 1</div>
<div class="col-md-6">Sub-column 2</div>
</div>
</div>
<div class="col-md-4">Column 2</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">Column 3</div>
</div>
</div>
In this example, we have a container with two rows. The first row has two columns, with the first column containing two sub-columns. The second column takes up 4 out of 12 columns (i.e. one-third of the available space) on medium-sized screens and larger. The second row has a single column that takes up 6 out of 12 columns (i.e. half of the available space) on medium-sized screens and is centered using the col-md-offset-3 class.
You can customize the appearance and behavior of your Bootstrap layouts by adjusting the HTML, CSS, and JavaScript code, and by using Bootstrap’s built-in classes and components.