Hackforge Academy

Explanation

Bootstrap's grid system uses containers, rows, and columns to create responsive layouts.

Code:

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

Explanation

Bootstrap divides a row into 12 columns, allowing developers to control column widths.

Code:

<div class="row">
  <div class="col-4">4 columns</div>
  <div class="col-8">8 columns</div>
</div>

Explanation

Responsive column classes allow different layouts at different screen sizes.

Code:

<div class="col-12 col-md-6 col-lg-4">
  Product
</div>

Explanation

Multiple columns can be placed inside a row to create card or dashboard layouts.

Code:

<div class="row">
  <div class="col-md-4">Card 1</div>
  <div class="col-md-4">Card 2</div>
  <div class="col-md-4">Card 3</div>
</div>

Explanation

Bootstrap containers automatically provide responsive widths and horizontal spacing.

Code:

<div class="container">
  <h1>Responsive Page</h1>
</div>

<div class="container-fluid">
  Full Width Content
</div>