Bootstrap Grid XLarge

In this tutorial bootstrap class col-xl in Grid System will be described. Hope you will enjoy this tutorial.

Grid Classes

No. Class Names Description
1. .col The class col is used for extra small devices such as width of screen less than 576px.
2. .col-sm The class col-sm is used for small devices such as width of screen greater than 576px.
3. .col-md The class col-md is used for medium devices such as width of screen nearly equal to or greater than 768px.
4. .col-lg The class col-lg is used for large devices such as width of screen greater than 992px.
5. .col-xl The class col-xl is used for extra large devices such as width of screen greater than 1200px.

Example of Extra Large columns

In this example class col-xl-3 is used for Extra large sized columns while 3 show 25% width. As this is already described that, there are 12 columns in a row.

<div class="container">
  <div class="row">
    <div class="col-xl-3 bg-info">
      <p>Dummy text 1...</p>
    </div>
    <div class="col-xl-3 bg-success">
      <p>Dummy text 2...</p>
    </div>
    <div class="col-xl-3 bg-warning">
      <p>Dummy text 3...</p>
    </div>
    <div class="col-xl-3 bg-primary">
      <p>Dummy text 4...</p>
    </div>
  </div>
</div>

Output of above code

Dummy text 1...

Dummy text 2...

Dummy text 3...

Dummy text 4...


Example of Fluid container

In this example example class container-fluid is used for full width box. While other all classes like col-xl-3 is used for extra large sized devices.

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-3 bg-info">
      <p>Dummy text 1...</p>
    </div>
    <div class="col-xl-3 bg-success">
      <p>Dummy text 2...</p>
    </div>
    <div class="col-xl-3 bg-warning">
      <p>Dummy text 3...</p>
    </div>
    <div class="col-xl-3 bg-primary">
      <p>Dummy text 4...</p>
    </div>
  </div>
</div>

Output of above code

Dummy text 1...

Dummy text 2...

Dummy text 3...

Dummy text 4...


Example of Auto Layout Columns

In this example not are division of column's width is fixed. The width of the columns will be auto change.

<div class="container-fluid">
  <div class="row">
    <div class="col-xl bg-info">
      <p>Dummy text 1...</p>
    </div>
    <div class="col-xl bg-success">
      <p>Dummy text 2...</p>
    </div>
    <div class="col-xl bg-warning">
      <p>Dummy text 3...</p>
    </div>
    <div class="col-xl bg-primary">
      <p>Dummy text 4...</p>
    </div>
  </div>
</div>

Output of above code

Dummy text 1...

Dummy text 2...

Dummy text 3...

Dummy text 4...








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.