Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
Relative to parentMax width and heightRelative to viewportColumn classes

Sizing

Relative to parent

Width

Width 25%
Width 50%
Width 75%
Width 100%

Height

Height 25%
Height 50%
Height 75%
Height 100%
<h4 class="h5 text-muted mt-3">Width</h4>
<div class="bg-secondary">
  <div class="bg-light p-2 w-25">Width 25%</div>
  <div class="bg-light p-2 w-50">Width 50%</div>
  <div class="bg-light p-2 w-75">Width 75%</div>
  <div class="bg-light p-2 w-100">Width 100%</div>
</div>
<h4 class="h5 text-muted mt-3">Height</h4>
<div class="bg-secondary d-flex justify-content-between" style="height: 200px;">
  <div class="bg-light p-2 h-25">Height 25%</div>
  <div class="bg-light p-2 h-50">Height 50%</div>
  <div class="bg-light p-2 h-75">Height 75%</div>
  <div class="bg-light p-2 h-100">Height 100%</div>
</div>
<h4 class="h5 text-muted mt-3">Width</h4> <div class="bg-secondary"> <div class="bg-light p-2 w-25">Width 25%</div> <div class="bg-light p-2 w-50">Width 50%</div> <div class="bg-light p-2 w-75">Width 75%</div> <div class="bg-light p-2 w-100">Width 100%</div> </div> <h4 class="h5 text-muted mt-3">Height</h4> <div class="bg-secondary d-flex justify-content-between" style="height: 200px;"> <div class="bg-light p-2 h-25">Height 25%</div> <div class="bg-light p-2 h-50">Height 50%</div> <div class="bg-light p-2 h-75">Height 75%</div> <div class="bg-light p-2 h-100">Height 100%</div> </div>

Max width and height

Max-width

Max-width = 100%

Max-height

Max-height = 100% 
<h4 class="h5 text-muted mt-3">Max-width</h4>
<img src="../img/600x200.png" alt="Max-width = 100%" class="mw-100">
<h4 class="h5 text-muted mt-3">Max-height</h4>
<div style="height: 400px;">
  <img src="../img/200x600.png" alt="Max-height = 100%" class="mh-100">
</div>
<h4 class="h5 text-muted mt-3">Max-width</h4> <img src="../img/600x200.png" alt="Max-width = 100%" class="mw-100"> <h4 class="h5 text-muted mt-3">Max-height</h4> <div style="height: 400px;"> <img src="../img/200x600.png" alt="Max-height = 100%" class="mh-100"> </div>

Relative to viewport

Width

Width 100vw

Min-width

Min-width 100vw

Height

Height 100vh

Min-height

Min-height 100vh 
<h4 class="h5 text-muted mt-3">Width</h4>
<img src="../img/1000x200.png" alt="Width 100vw" class="vw-100">
<h4 class="h5 text-muted mt-3">Min-width</h4>
<img src="../img/1000x200.png" alt="Min-width 100vw" class="min-vw-100">
<h4 class="h5 text-muted mt-3">Height</h4>
<img src="../img/200x2000.png" alt="Height 100vh" class="vh-100">
<h4 class="h5 text-muted mt-3">Min-height</h4>
<img src="../img/200x2000.png" alt="Min-height 100vh" class="min-vh-100">
<h4 class="h5 text-muted mt-3">Width</h4> <img src="../img/1000x200.png" alt="Width 100vw" class="vw-100"> <h4 class="h5 text-muted mt-3">Min-width</h4> <img src="../img/1000x200.png" alt="Min-width 100vw" class="min-vw-100"> <h4 class="h5 text-muted mt-3">Height</h4> <img src="../img/200x2000.png" alt="Height 100vh" class="vh-100"> <h4 class="h5 text-muted mt-3">Min-height</h4> <img src="../img/200x2000.png" alt="Min-height 100vh" class="min-vh-100">

Column classes

Parent element must be a block-level element (display: block;)

All breakpoints

Width 1/12
Width 1/6
Width 1/4
Width 1/3
Width 5/12
Width 1/2
Width 7/12
Width 2/3
Width 3/4
Width 5/6
Width 11/12
Width 1/1

Responsive

Example: XS: 1/6, SM: 1/3, MD: 1/2, LG: 2/3, XL: 5/6, XXL: 1/1

Example
<h4 class="h5 text-muted mt-3">All breakpoints</h4>
<div class="bg-secondary">
  <div class="bg-light p-2 col-1">Width 1/12</div>
  <div class="bg-light p-2 col-2">Width 1/6</div>
  <div class="bg-light p-2 col-3">Width 1/4</div>
  <div class="bg-light p-2 col-4">Width 1/3</div>
  <div class="bg-light p-2 col-5">Width 5/12</div>
  <div class="bg-light p-2 col-6">Width 1/2</div>
  <div class="bg-light p-2 col-7">Width 7/12</div>
  <div class="bg-light p-2 col-8">Width 2/3</div>
  <div class="bg-light p-2 col-9">Width 3/4</div>
  <div class="bg-light p-2 col-10">Width 5/6</div>
  <div class="bg-light p-2 col-11">Width 11/12</div>
  <div class="bg-light p-2 col-12">Width 1/1</div>
</div>
<h4 class="h5 text-muted mt-3">Responsive</h4>
<p>Example: XS: 1/6, SM: 1/3, MD: 1/2, LG: 2/3, XL: 5/6, XXL: 1/1</p>
<div class="bg-secondary">
  <div class="bg-light p-2 col-2 col-sm-4 col-md-6 col-lg-8 col-xl-10 col-xxl-12">Example</div>
</div>
<h4 class="h5 text-muted mt-3">All breakpoints</h4> <div class="bg-secondary"> <div class="bg-light p-2 col-1">Width 1/12</div> <div class="bg-light p-2 col-2">Width 1/6</div> <div class="bg-light p-2 col-3">Width 1/4</div> <div class="bg-light p-2 col-4">Width 1/3</div> <div class="bg-light p-2 col-5">Width 5/12</div> <div class="bg-light p-2 col-6">Width 1/2</div> <div class="bg-light p-2 col-7">Width 7/12</div> <div class="bg-light p-2 col-8">Width 2/3</div> <div class="bg-light p-2 col-9">Width 3/4</div> <div class="bg-light p-2 col-10">Width 5/6</div> <div class="bg-light p-2 col-11">Width 11/12</div> <div class="bg-light p-2 col-12">Width 1/1</div> </div> <h4 class="h5 text-muted mt-3">Responsive</h4> <p>Example: XS: 1/6, SM: 1/3, MD: 1/2, LG: 2/3, XL: 5/6, XXL: 1/1</p> <div class="bg-secondary"> <div class="bg-light p-2 col-2 col-sm-4 col-md-6 col-lg-8 col-xl-10 col-xxl-12">Example</div> </div>