Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap Images - examples & tutorial

Images

Bootstrap 5 Images

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.


Responsive images

Images in MDB are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

...

          <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="img-fluid" alt="..." />
        

Thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

...

          <img
            src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
            class="img-thumbnail"
            alt="..."
          />
        

Shadows

By using our shadow classes you can add a shadow to the image. In the example below, we add shadow-2-strong class.


          <img
            src="https://mdbootstrap.com/img/new/standard/city/042.jpg"
            class="img-fluid shadow-2-strong"
            alt=""
          />
        

By adding .hover-shadow class to the element you can apply a shadow hover effect.


          <img
            src="https://mdbootstrap.com/img/new/standard/city/043.jpg"
            class="img-fluid hover-shadow"
            alt=""
          />
        

Ripple

You can change the image into a clickable element and apply a ripple effect to it by simply adding .ripple class.

example

          <a class="ripple" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/044.jpg"
            />
          </a>
        

Masks

You can cover the image with mask to achieve the desired contrast and for example, place text on it.

Sample

Can you see me?


          <div class="bg-image">
            <img
              src="https://mdbootstrap.com/img/new/standard/city/053.jpg"
              class="img-fluid"
              alt="Sample"
            />
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
              <div class="d-flex justify-content-center align-items-center h-100">
                <p class="text-white mb-0">Can you see me?</p>
              </div>
            </div>
          </div>
        

Hover effects

By using .hover-overlay class you can apply gentle and decorative hover effects to the image.


          <div class="bg-image hover-overlay ripple">
            <img src="https://mdbootstrap.com/img/new/fluid/city/055.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(57, 192, 237, 0.2)"></div>
            </a>
          </div>
        

Shapes

By using border utilities you can change the shape of the image.

.rounded
.rounded-circle
.rounded-pill

          <img
            src="https://mdbootstrap.com/img/new/standard/city/047.jpg"
            class="img-fluid rounded"
            alt=""
          />

          <img
            src="https://mdbootstrap.com/img/new/standard/city/047.jpg"
            class="img-fluid rounded-circle"
            alt=""
          />

          <img
            src="https://mdbootstrap.com/img/new/standard/city/047.jpg"
            class="img-fluid rounded-pill"
            alt=""
          />