Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultResponsiveRoundedThumbnailAlignmentPicture element

Images

Default

Normal image 
<img src="../img/300x200.png" alt="Normal image">
<img src="../img/300x200.png" alt="Normal image">

Responsive

Responsive image 
<img src="../img/1200x600.png" alt="Responsive image">
<img src="../img/1200x600.png" alt="Responsive image">

Rounded

Image with rounded corners 
<img src="../img/300x200.png" alt="Image with rounded corners">
<img src="../img/300x200.png" alt="Image with rounded corners">

Thumbnail

Image thumbnail 
<img src="../img/100x100.png" alt="Image thumbnail">
<img src="../img/100x100.png" alt="Image thumbnail">

Alignment

Float

Image floated left Image floated right

Spacing utilities

Left-aligned image Centered image Right-aligned image

Text alignment

Left-aligned image
Centered image
Right-aligned image 
<h4 class="h5 text-muted mt-3">Float</h4>
<div class="clearfix">
  <img src="../img/100x100.png" alt="Image floated left">
  <img src="../img/100x100.png" alt="Image floated right">
</div>
<h4 class="h5 text-muted mt-3">Spacing utilities</h4>
<img src="../img/100x100.png" alt="Left-aligned image">
<img src="../img/100x100.png" alt="Centered image">
<img src="../img/100x100.png" alt="Right-aligned image">
<h4 class="h5 text-muted mt-3">Text alignment</h4>
<div>
  <img src="../img/100x100.png" alt="Left-aligned image">
</div>
<div>
  <img src="../img/100x100.png" alt="Centered image">
</div>
<div>
  <img src="../img/100x100.png" alt="Right-aligned image">
</div>
<h4 class="h5 text-muted mt-3">Float</h4> <div class="clearfix"> <img src="../img/100x100.png" alt="Image floated left"> <img src="../img/100x100.png" alt="Image floated right"> </div> <h4 class="h5 text-muted mt-3">Spacing utilities</h4> <img src="../img/100x100.png" alt="Left-aligned image"> <img src="../img/100x100.png" alt="Centered image"> <img src="../img/100x100.png" alt="Right-aligned image"> <h4 class="h5 text-muted mt-3">Text alignment</h4> <div> <img src="../img/100x100.png" alt="Left-aligned image"> </div> <div> <img src="../img/100x100.png" alt="Centered image"> </div> <div> <img src="../img/100x100.png" alt="Right-aligned image"> </div>

Picture element

If using the <picture> element put .img-* classes on the <img> tag and not the <picture> tag.

Image in picture tag 
<picture>
  <source srcset="../img/100x100.png">
  <img src="../img/100x100.png" alt="Image in picture tag">
</picture>
<picture> <source srcset="../img/100x100.png"> <img src="../img/100x100.png" alt="Image in picture tag"> </picture>