Image

Images can be made responsive using the .img-fluid class, so that their widths never exceed their parent elements' widths.

responsive image
<div class="row">		
  <div class="col-6">
    <!-- Responsive image -->
    <img src="..." class="img-fluid" alt="responsive image">
  </div>
</div>

Rounded images #

Images can be rounded using the following utility classes:

  • The .rounded class creates images with rounded corners.
  • The .rounded-circle class creates fully circular images, provided that the actual images are square in shape.
  • The .rounded-top class creates images with rounded corners only on the top, while the .rounded-bottom class creates images with rounded corners only on the bottom.
  • The .rounded-left class creates images with rounded corners only on the left, while the .rounded-right class creates images with rounded corners only on the right.
rounded image circle image

rounded top image rounded bottom image

rounded left image rounded right image
<!-- Rounded image -->
<img src="..." class="img-fluid rounded" alt="rounded image">

<!-- Circle image -->
<img src="..." class="img-fluid rounded-circle" alt="rounded circle image">

<!-- Rounded top image -->
<img src="..." class="img-fluid rounded-top" alt="rounded top image">

<!-- Rounded bottom image -->
<img src="..." class="img-fluid rounded-bottom" alt="rounded bottom image">

<!-- Rounded left image -->
<img src="..." class="img-fluid rounded-left" alt="rounded left image">

<!-- Rounded right image -->
<img src="..." class="img-fluid rounded-right" alt="rounded right image">

Alignment #

Images can be aligned using utility classes on the parent element. For example:

  • The .text-center class aligns the image to the center.
  • The .text-right class aligns the image to the right.
responsive image
<!-- Aligned to center -->
<div class="text-center">
  <img src="..." class="img-fluid rounded" alt="...">
</div>
responsive image
<!-- Aligned to right -->
<div class="text-right">
  <img src="..." class="img-fluid rounded" alt="...">
</div>

Up next: Links

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.