Code Using Bootstrap Grid System

Lecture 97:- Code Using Bootstrap Grid System

Here is an example of how to use Bootstrap's grid system to create a responsive layout for a website:

phpCopy code

<div class="container">  <div class="row">    <div class="col-md-8">      <!-- Left content here -->    </div>    <div class="col-md-4">      <!-- Right content here -->    </div>  </div>  <div class="row">    <div class="col-sm-6 col-md-4">      <!-- First column here -->    </div>    <div class="col-sm-6 col-md-4">      <!-- Second column here -->    </div>    <div class="col-sm-12 col-md-4">      <!-- Third column here -->    </div>  </div> </div>

In this example, there are two rows with different layouts. On medium screens (width between 768px and 992px), the first row has two columns, the first taking up 8/12 of the row, and the second taking up 4/12 of the row. On small screens (width between 576px and 768px), the second row has three columns, each taking up 4/12 of the row.

The .container class sets the max-width for the layout, and the .row class creates a new row. The .col-* classes define the width of each column. The .col-sm-* classes target small screens, and the .col-md-* classes target medium screens.

You can adjust the layout for different screen sizes by changing the .col-* classes. You can also use other breakpoint classes (col-xs-*, col-lg-*, and col-xl-*) to target other screen sizes.