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" class="img-fluid">
<img src="../img/1200x600.png" alt="Responsive image" class="img-fluid">

Rounded

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

Thumbnail

Image thumbnail 
<img src="../img/100x100.png" alt="Image thumbnail" class="img-thumbnail">
<img src="../img/100x100.png" alt="Image thumbnail" class="img-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" class="float-start">
  <img src="../img/100x100.png" alt="Image floated right" class="float-end">
</div>
<h4 class="h5 text-muted mt-3">Spacing utilities</h4>
<img src="../img/100x100.png" alt="Left-aligned image" class="d-block">
<img src="../img/100x100.png" alt="Centered image" class="d-block mx-auto">
<img src="../img/100x100.png" alt="Right-aligned image" class="d-block ms-auto">
<h4 class="h5 text-muted mt-3">Text alignment</h4>
<div class="text-start">
  <img src="../img/100x100.png" alt="Left-aligned image">
</div>
<div class="text-center">
  <img src="../img/100x100.png" alt="Centered image">
</div>
<div class="text-end">
  <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" class="float-start"> <img src="../img/100x100.png" alt="Image floated right" class="float-end"> </div> <h4 class="h5 text-muted mt-3">Spacing utilities</h4> <img src="../img/100x100.png" alt="Left-aligned image" class="d-block"> <img src="../img/100x100.png" alt="Centered image" class="d-block mx-auto"> <img src="../img/100x100.png" alt="Right-aligned image" class="d-block ms-auto"> <h4 class="h5 text-muted mt-3">Text alignment</h4> <div class="text-start"> <img src="../img/100x100.png" alt="Left-aligned image"> </div> <div class="text-center"> <img src="../img/100x100.png" alt="Centered image"> </div> <div class="text-end"> <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" class="img-thumbnail">
</picture>
<picture> <source srcset="../img/100x100.png"> <img src="../img/100x100.png" alt="Image in picture tag" class="img-thumbnail"> </picture>