Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

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

AI engine

Finished 13.09.2021 for Techify

Ut pretium ultricies dignissim. Sed sit amet mi eget urna placerat vulputate. Ut vulputate est non quam dignissim elementum. Donec a ullamcorper diam.

Read more
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.

AI engine

Finished 13.09.2021 for Techify

Ut pretium ultricies dignissim. Sed sit amet mi eget urna placerat vulputate. Ut vulputate est non quam dignissim elementum. Donec a ullamcorper diam.

Read more
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

MDB graphics

Position


Side modal

MDB graphics

Position






John Doe

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.