Setting a background image in Bootstrap can seem troublesome, especially for novice web developers. Thanks to this tutorial, you will not only learn how to use this functionality without any problems, but you will also learn advanced tricks that will allow you to create truly amazing projects with unconventional design.

MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.

Masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible by providing a proper contrast. They are most often used on images.

A flag is used to represent a political state.

Documentation and examples for displaying related images and text with the figure component in MDB.

MDB shadows are lighter and brighter than standard Material Design shadows, which we consider a bit rough. Thanks to this, projects built with MDB gain an outstanding look and unique design.

Divider lines for Bootstrap 5 layouts. Examples of horizontal divider lines (hr) as well as vertical divider lines for clearer organization of your content.

Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

MDB is supported by an extensive Material Design color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

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

MDB now supports color modes, or themes, as of v7.0.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.