Bootstrap 5 Grid Examples

Bootstrap 5 – A Comprehensive Guide to Modern Web Development

About Lesson

Certainly! Here are examples of various grid layouts using the Bootstrap 5 grid system:

Three Equal Columns:

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

Three Equal Columns Using Numbers:

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

Three Unequal Columns:

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

Setting One Column Width:

<div class="container">
  <div class="row">
    <div class="col-8">Wide Column</div>
    <div class="col-4">Narrow Column</div>
  </div>
</div>

More Equal Columns:

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

Row Cols:

<div class="container">
  <div class="row-cols-3">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
    <div class="col">Column 4</div>
    <div class="col">Column 5</div>
    <div class="col">Column 6</div>
  </div>
</div>

More Unequal Columns:

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">Column 1</div>
    <div class="col-lg-4 col-md-6">Column 2</div>
    <div class="col-lg-4 col-md-6">Column 3</div>
    <div class="col-lg-4 col-md-6">Column 4</div>
  </div>
</div>

Equal Height:

<div class="container">
  <div class="row align-items-stretch">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Nested Columns:

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

</div>
  </div>
</div>

Responsive Classes:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">Column 1</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Column 2</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Column 3</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Column 4</div>
  </div>
</div>

Mix and Match:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">Column 1</div>
    <div class="col-md-6 col-lg-4">Column 2</div>
    <div class="col-lg-4">Column 3</div>
  </div>
</div>

No Gutters:

<div class="container">
  <div class="row g-0">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

These examples demonstrate various grid layouts using the Bootstrap 5 grid system. Feel free to customize them according to your specific requirements. Make sure to include the necessary Bootstrap 5 CSS file in your project for the grid system to work properly.

Join the conversation