Bootstrap grid tutorial

The Bootstrap grid system is a powerful tool for creating responsive layouts that work on a variety of screen sizes. Here’s a step-by-step tutorial on how to use the Bootstrap grid system:

Include the Bootstrap CSS and JavaScript files in your HTML document.
Create a container element with the class “container” or “container-fluid” to contain your grid.

<div class="container">
  <!-- Your grid goes here -->
</div>

Create a row element inside the container to define the horizontal rows of your grid. Each row should have a class of “row”.

<div class="container">
  <div class="row">
    <!-- Columns go here -->
  </div>
</div>

Inside the row element, create columns using the “col-” classes. The “col-” classes specify the width of the columns based on a 12-column grid system.

For example, to create two equal-width columns, you can use the “col-6” class:

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

You can also use additional classes to specify the column width at different screen sizes. For example, to make a column take up the full width on small screens, you can use the “col-sm-12” class:

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

You can also use offset classes to create space between columns. For example, to create a column that is offset by one column, you can use the “offset-1” class:

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

Finally, you can nest columns inside other columns to create more complex layouts. For example, to create a row with two columns, where the first column contains two sub-columns and the second column contains one sub-column, you can use the following code:

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-6">Sub-column 1</div>
        <div class="col-6">Sub-column 2</div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-12">Sub-column 3</div>
      </div>
    </div>
  </div>
</div>

These are the basic steps for using the Bootstrap grid system to create responsive layouts. With this knowledge, you can create a variety of layouts that work on different screen sizes and devices.

Previous: Customizing Bootstrap templates

Next: Styling Bootstrap forms