Images, cards and footer


In the first row, we have two columns. One of them is a perfect place for an outstanding image that will be an eye-catcher for our visitors. The second column will be useful for heading, short description and a call to action button.

Step 1

In the first column of the first row place an image. You can use any image you want, by providing a correct URL.



<div class="col-md-7">

  <!--Featured image -->
  <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid">

</div>

    

Pay attention to the special class "img-fluid". It makes our image responsive, which means that it will always adjust to the screen size and its parent's width. Thanks to that our visitors can enjoy viewing it on both mobile and desktop.

Step 2

We can easily enhance our image by adding a subtle shadow, plus hover and waves effects. To achieve this we need to place the image within a special wrapper.

Replace the code of our image with the code below.



<div class="view overlay z-depth-1-half">
  <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="card-img-top" alt="">
  <div class="mask rgba-white-light"></div>
</div>

    

Save the file and refresh your browser. Now you can enjoy all the effects.

Step 3

As we said aleardy, in the second column we'll place a heading, short description and a call to action. That will help our visitor to quickly understand what our website is about (heading and description) and what action we expect from them (the call to action button).



<!--Grid column-->
<div class="col-md-5">

  <h2>Some awesome heading</h2>
  <hr>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem
      voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis
      natus quaerat!</p>
  <a href="https://mdbootstrap.com/" class="btn btn-primary">Get it now!</a>

</div>
<!--Grid column-->

    

If you want to play with the project, you can change a call to action button. MDB provides you a huge variety of buttons.

Just go to BUTTONS DOCUMENTATION section in our documentation and use the element you like the most.

Save the file and open it in the browser.

Thanks to MDB our project is growing fast, so let's keep going!

Step 4

In the second row, we are going to add some detailed information about our website. Our cards will do the work.

Cards are a great way to present content to the users. They are clear, easy to use and elegant. Facebook uses cards, Google uses cards, LinkedIn uses cards. You also should do that, especially given that MDB provides you with a range of really outstanding cards.

Go to the CARDS DOCUMENTATION and grab the Card with Waves Effect. Then paste it into every column of the second row.

After all that your second row should look like this:



<!--Grid row-->
<div class="row">

  <!--Grid column-->
  <div class="col-lg-4 col-md-12">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg" class="card-img-top" alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" class="card-img-top" alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="card-img-top" alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>
  <!--Grid column-->

</div>
<!--Grid row-->

    

Save the file and open it in the browser. Our layout still needs a few improvements, but we'll take care of it later.

Step 5

Now it's time for the footer.

Go to the FOOTER DOCUMENTATION and grab the code for the Basic Footer. Then paste it into our project:



<!-- Footer -->
<footer class="page-footer font-small blue pt-4 mt-4">

  <!-- Footer Links -->
  <div class="container-fluid text-center text-md-left">

    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-md-6 mt-md-0 mt-3">

        <!-- Content -->
        <h5 class="text-uppercase">Footer Content</h5>
        <p>Here you can use rows and columns here to organize your footer content.</p>

      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none pb-3">

      <!-- Grid column -->
      <div class="col-md-3 mb-md-0 mb-3">

          <!-- Links -->
          <h5 class="text-uppercase">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">

          <!-- Links -->
          <h5 class="text-uppercase">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Footer Links -->

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2018 Copyright:
    <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

    

You can see that our footer already contains the color class "blue", which makes it blue. You can easily change it by using one of over 300 defined color classes provided by MDB

In the next lesson, you will learn how to manipulate MDB colors.

You may also notice the classes .text-center .text-md-left which center footers elements on small screens.

Alright, the main layout of our website is done, but there's still a lot of details to improve.

I.e. the Navbar and footer colors are slightly different, and their links are stretched full-width, which doesn't look good. Also the content in our rows of the <main> section are too close to each other. And there are few more things which should be fixed as well.

So this website definitely requires more work to make sure it looks professional. We'll take care of that in the next lesson.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits