Large Grid Example

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It is the building block of web development and is essential for creating the structure and content of a website. If you're looking for an HTML tutorial, here's a basic outline to get you started:

	XSmall	Small	Medium	Large	extra Large	XXL
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Screen width	`>=576px`	>=576px	>=768px	=992px	>=1200px	>=1400px

The following example will result in a 25%/75% split on all devices (extra small, small, medium, large, xlarge and xxlarge).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.

Example

    <div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Auto Layout Columns

In Bootstrap 5, there is an easy way to create equal width columns for all devices: just remove the number from .col-* and only use the .col class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width:

Example

    <!-- Two columns: 50% width-->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four columns: 25% width-->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

You can click on above box to edit the code and run again.

Output

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4