Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningModals advanced features
Modals are quite complex components with many options available. In this lesson, we'll explore some of the more advanced ones.
Step 1 - change the size of the modal
Modals have three optional sizes, available via modifier classes to be placed on a
.modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal
scrollbars on narrower viewports.
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 500px |
| Large | .modal-lg |
800px |
| Extra large | .modal-xl |
1140px |
<div class="modal-dialog modal-xl">Extra large modal</div>
<div class="modal-dialog modal-lg">Large modal</div>
<div class="modal-dialog">Default modal</div>
<div class="modal-dialog modal-sm">Small modal</div>
Modal can also be fullscreen.
Fullscreen option makes a modal cover the entire user viewport. It's available via modifier classes that are placed on a .modal-dialog .
| Class | Availability |
|---|---|
.modal-fullscreen |
Always |
.modal-fullscreen-sm-down |
Below 576px |
.modal-fullscreen-md-down |
Below 768px |
.modal-fullscreen-lg-down |
Below 992px |
.modal-fullscreen-xl-down |
Below 1200px |
.modal-fullscreen-xxl-down |
Below 1400px |
Let's change the modal in our project to Extra Large. According to the knowledge given above, it is enough to add the modal-xl class to the element with the modal-dialog class:
<!-- Section: Projects modals -->
<section class="">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Change the size of the modal here -->
<div class="modal-dialog modal-xl">
Now when you click on the image on the tab, the modal will be much bigger.
Step 2 - modify the content of the modal
Since the construction of the modal is so similar to the construction of the card, we can use it similarly. This means that inside the modal-body we can freely insert various elements, such as graphics, buttons or icons.
Additionally, nothing prevents you from using a grid inside a modal.
So let's replace our default modal with a modal with a bit more complex content. The content itself will be nothing new - it's just a grid with graphic on the left and icons with text on the right. So we won't go into the details of this as we've covered it many times in previous lessons.
<!-- Section: Projects modals -->
<section class="">
<!-- Modal project 1 -->
<div class="modal fade" id="project-1" tabindex="-1" aria-labelledby="project-1Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-1Label">AI engine</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Section: Design Block -->
<section>
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/full/98.jpg" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="px-4 py-5 px-md-5 text-white text-center">
<h3 class="text-uppercase fw-bold mb-4">
The future is <u style="color: hsl(210, 12%, 80%)">now</u>
</h3>
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Harum quia laboriosam error consequuntur fugit,
doloribus rerum, iure nesciunt amet quidem veniam
cupiditate hic fugiat dolore aperiam quisquam libero
earum quibusdam?
</p>
</div>
</div>
</div>
<div class="hover-overlay">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Support 24/7</p>
<p class="text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nihil quisquam quibusdam modi sapiente magni molestias
pariatur facilis reprehenderit facere aliquam ex.
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Safe and solid</p>
<p class="text-muted mb-0">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Extremely fast</p>
<p class="text-muted mb-0">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?
</p>
</div>
</div>
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Live analytics</p>
<p class="text-muted mb-0">
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Projects modals -->
Note, however, that we changed the ID of our modal to id="project-1". Therefore, we also need to change the ID in data-attributes in our trigger, i.e. in the card.
<!-- First column -->
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100" />
<!-- Change the ID in the data attribute here -->
<a href="#!" data-mdb-ripple-init data-mdb-modal-init data-mdb-target="#project-1">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
Now when you click on an image in a card, an extra large modal will be launched with new content inside.
Step 3 - add the other 2 modals
Each of the cards in the My projects section applies to a different project, so each of them should run its own modal with details about that project.
Inside the Projects modals section, I'm going to add 3 different modals, each with slightly different content.
Of course, you can modify the content of modals according to your preferences. Feel free to experiment with modals if you want.
<!-- Section: Projects modals -->
<section class="">
<!-- Modal project 1 -->
<div class="modal fade" id="project-1" tabindex="-1" aria-labelledby="project-1Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-1Label">AI engine</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Section: Design Block -->
<section>
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/full/98.jpg" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="px-4 py-5 px-md-5 text-white text-center">
<h3 class="text-uppercase fw-bold mb-4">
The future is <u style="color: hsl(210, 12%, 80%)">now</u>
</h3>
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Harum quia laboriosam error consequuntur fugit,
doloribus rerum, iure nesciunt amet quidem veniam
cupiditate hic fugiat dolore aperiam quisquam libero
earum quibusdam?
</p>
</div>
</div>
</div>
<div class="hover-overlay">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Support 24/7</p>
<p class="text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nihil quisquam quibusdam modi sapiente magni molestias
pariatur facilis reprehenderit facere aliquam ex.
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Safe and solid</p>
<p class="text-muted mb-0">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Extremely fast</p>
<p class="text-muted mb-0">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?
</p>
</div>
</div>
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Live analytics</p>
<p class="text-muted mb-0">
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal project 2 -->
<div class="modal fade" id="project-2" tabindex="-1" aria-labelledby="project-2Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-2Label">Balanced design</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Section: Design Block -->
<section>
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/full/7.jpg" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="px-4 py-5 px-md-5 text-white text-center">
<h3 class="text-uppercase fw-bold mb-4">
The future is <u style="color: hsl(210, 12%, 80%)">now</u>
</h3>
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Harum quia laboriosam error consequuntur fugit,
doloribus rerum, iure nesciunt amet quidem veniam
cupiditate hic fugiat dolore aperiam quisquam libero
earum quibusdam?
</p>
</div>
</div>
</div>
<div class="hover-overlay">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Support 24/7</p>
<p class="text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nihil quisquam quibusdam modi sapiente magni molestias
pariatur facilis reprehenderit facere aliquam ex.
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Safe and solid</p>
<p class="text-muted mb-0">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Extremely fast</p>
<p class="text-muted mb-0">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?
</p>
</div>
</div>
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Live analytics</p>
<p class="text-muted mb-0">
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal project 3 -->
<div class="modal fade" id="project-3" tabindex="-1" aria-labelledby="project-3Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-3Label">Metaverse 2.0</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Section: Design Block -->
<section>
<div class="row gx-lg-5 align-items-center">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/full/30.jpg" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="px-4 py-5 px-md-5 text-white text-center">
<h3 class="text-uppercase fw-bold mb-4">
The future is <u style="color: hsl(210, 12%, 80%)">now</u>
</h3>
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Harum quia laboriosam error consequuntur fugit,
doloribus rerum, iure nesciunt amet quidem veniam
cupiditate hic fugiat dolore aperiam quisquam libero
earum quibusdam?
</p>
</div>
</div>
</div>
<div class="hover-overlay">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Support 24/7</p>
<p class="text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nihil quisquam quibusdam modi sapiente magni molestias
pariatur facilis reprehenderit facere aliquam ex.
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Safe and solid</p>
<p class="text-muted mb-0">
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
</p>
</div>
</div>
<div class="d-flex align-items-start mb-5">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Extremely fast</p>
<p class="text-muted mb-0">
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?
</p>
</div>
</div>
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
</div>
</div>
<div class="flex-grow-1 ms-4">
<p class="fw-bold mb-1">Live analytics</p>
<p class="text-muted mb-0">
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Design Block -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Projects modals -->
Step 4 - update the triggers
Also remember about triggers. You need to add the data-attributes to the corresponding element in the cards. Make sure that each trigger points to the appropriate ID of the modal it is supposed to launch.
Notice that I added a triggers to the "read more" buttons in addition to the photos in the cards.
<!-- Section: My projects -->
<section class="mb-10 text-center">
<h2 class="fw-bold mb-7 text-center">My projects</h2>
<div class="row gx-lg-5">
<!-- First column -->
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-1">
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">AI engine</h5>
<p class="text-muted">
<small>Finished <u>13.09.2021</u> for
<a href="" class="text-dark">Techify</a></small>
</p>
<p class="card-text">
Ut pretium ultricies dignissim. Sed sit amet mi eget urna
placerat vulputate. Ut vulputate est non quam dignissim
elementum. Donec a ullamcorper diam.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>
</div>
</div>
</div>
<!-- First column -->
<!-- Second column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-2">
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Balanced design</h5>
<p class="text-muted">
<small>Finished <u>12.01.2022</u> for
<a href="" class="text-dark">Rubicon</a></small>
</p>
<p class="card-text">
Suspendisse in volutpat massa. Nulla facilisi. Sed aliquet
diam orci, nec ornare metus semper sed. Integer volutpat
ornare erat sit amet rutrum. Ut vulputate est non quam.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>
</div>
</div>
</div>
<!-- Second column -->
<!-- Third column -->
<div class="col-lg-4 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-3">
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Metaverse 2.0</h5>
<p class="text-muted">
<small>Finished <u>10.11.2022</u> for
<a href="" class="text-dark">Venom Tech</a></small>
</p>
<p class="card-text">
Curabitur tristique, mi a mollis sagittis, metus felis mattis
arcu, non vehicula nisl dui quis diam. Mauris ut risus eget
massa volutpat feugiat. Donec.
</p>
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>
</div>
</div>
</div>
<!-- Third column -->
</div>
</section>
<!-- Section: My projects -->
Note: Modals have many more options. Some of them are available in the paid version of MDB Pro.
It is not required for this tutorial, but if you want to see what additional options the MDB Pro modals have, you can click through the buttons in the demo below.
Click the buttons to launch the modals.
Frame modal
Position
Side modal
Position
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.