Images

Angular 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.

Show code

HTML

<img src="https://mdbootstrap.com/img/new/slides/041.webp" 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.

Show code

HTML

<img
  src="https://mdbootstrap.com/img/new/standard/city/041.webp"
  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.

Show code

HTML

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

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

Show code

HTML

<img
  src="https://mdbootstrap.com/img/new/standard/city/043.webp"
  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 mdbRipple directive. Don't forget to import MdbRippleModule to your project.

Show code

HTML

<a mdbRipple 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.

Can you see me?

Show code

HTML

<div class="bg-image">
  <img
    src="https://mdbootstrap.com/img/new/standard/city/053.webp"
    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.

Show code

HTML

<div class="bg-image hover-overlay ripple">
  <img src="https://mdbootstrap.com/img/new/fluid/city/055.webp" 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

Show code

HTML

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

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

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

Service	Why?	Consent
Ad storage	This cookie type is used for storing data related to advertising on our website. It helps in tailoring ads based on user preferences and interactions, enhancing the relevancy of ads presented to users.	No Yes
Ad user data	This setting allows for the transmission of user data to Google for the purposes of online advertising. It ensures that the ads you see across the web are more aligned with your interests and online activities.	No Yes
Ad Personalization	This consent setting enables personalized advertising. By allowing this, users receive ads specifically tailored to their interests and online behavior, making the advertising experience more relevant and engaging.	No Yes
Meta Pixel	This cookie is powered by the Meta Pixel technology, designed to track user behavior and interactions on our website. It helps in understanding how users engage with our content and services, enabling us to measure the effectiveness of our ads and improve targeting for our advertising campaigns on social media platforms. By analyzing this data, we can enhance our website's user experience and deliver more relevant advertising content to our audience.	No Yes

Service	Why?	Consent
Necessary cookies	Cookies of this type, are essential for our websites' operation, enabling services like secure access. Their absence may affect site functionality. Manage these cookies via browser settings.	No Yes
Functional storage	Cookies of this type, are essential for the proper functioning of our website. They remember your preferences and settings, such as language choice, thereby enhancing your overall experience and convenience while using our services.	No Yes
Security storage	Cookies of this type, are essential for protecting users. They support authentication processes, help in fraud prevention, and ensure overall protection of user data and privacy on our website.	No Yes
Analytics storage	Cookies of this type, are essential for collecting data related to your website usage, such as how long you visit and which pages you view. This information is vital for analyzing and improving the website's performance, ensuring a better user experience.	No Yes
Personalization storage	This type of storage is focused on personalizing your experience on our site. For instance, it can recommend videos or content based on your previous interactions, creating a more tailored and enjoyable browsing session.	No Yes
Clarity	This cookie is implemented to utilize Microsoft Clarity, a user behavior analytics tool. It helps us understand user experience issues and improve website navigation and content. It is crucial for enhancing site usability and performance, ensuring that our website meets the needs and expectations of all users effectively.	No Yes
reCAPTCHA	Enables the use of Google reCAPTCHA to prevent spam and abuse by distinguishing between human users and automated software. This cookie enhances website security without impacting user privacy.	No Yes

Images

Angular Bootstrap 5 Images

Responsive images

Thumbnails

Shadows

Ripple

Masks

Hover effects

Shapes

Related resources

Manage cookie settings