HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
XXL devices are defined as having a screen width from1400 pixels and above
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 |
XXL devices are defined as having a screen width from 1400 pixels and above.
The following example will result in a 50%/50% split on medium, large and extra large devices, and a 25%/75% split on XXL devices. On small and extra small devices, it will automatically stack (100%):
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6 col-xxl-9">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Note: Make sure that the sum always adds up to 12.
In the example below, we only specify the .col-xxl-6
class (without .col-md-*
, and/or .col-sm-*
).
This means that xxlarge devices will split 50%/50%. However,
for extra large, large, medium, small AND extra small devices, it will stack vertically (100% width):
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xxl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
In Bootstrap 5, there is an easy way to create equal width columns for all devices: just remove the number from .col-xxl-*
and only use the .col-xxl
class on a specified number of
col elements. Bootstrap will recognize how many columns there
are, and each column will get the same width.
If the screen size is less than 1400px, the columns will stack horizontally:
<!-- Two columns: 50% width on xxl and up-->
<div class="row">
<div class="col-xxl">1 of
2</div>
<div class="col-xxl">2 of 2</div>
</div>
<!-- Four
columns: 25% width on xxl and up -->
<div class="row">
<div class="col-xxl">1 of 4</div>
<div class="col-xxl">2 of 4</div>
<div class="col-xxl">3
of 4</div>
<div class="col-xxl">4 of 4</div>
</div>