Bootstrap Grid System

Lecture 96:- Bootstrap Grid System

Bootstrap's grid system allows you to create a responsive layout for your website. It uses a 12-column grid that can be divided into rows and columns to create different layouts for different screen sizes.

Each column is represented by a .col-* class, where * is a number from 1 to 12 that represents the column width. For example, .col-6 means the column will occupy half of the row, and .col-3 means the column will occupy a fourth of the row.

The grid system is responsive, meaning the number of columns changes based on the screen size. For example, on extra small screens, the columns will stack vertically, while on larger screens, they will appear side by side.

To create a row, you can use the .row class. Each row can contain one or more columns, and you can nest columns within columns to create more complex layouts.

Here's an example of how to create a row with two equal-width columns:

phpCopy code

<div class="row">  <div class="col-6">Column 1</div>  <div class="col-6">Column 2</div> </div>

You can also use different grid classes for different screen sizes to create a more complex layout.