Rate this docs

Background image

Bootstrap background image

Bootstrap background image is an illustration chosen by a user placed behind all other objects on the website. It may be full or partially visible.


Full Page Background Image

See live preview


        <body>

            <div class="bg"></div>

            <p class="py-5 text-center">This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

        </body>

      


        body, html {
          height: 100%;
        }
        .bg {
          /* The image used */
          background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");

          /* Full height */
          height: 100%;

          /* Center and scale the image nicely */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }

      

Half Page Background Image

See live preview


        <body>

            <div class="bg"></div>

            <p class="py-5 text-center">This example creates a half page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

        </body>

      


        body, html {
          height: 100%;
        }
        .bg {
          /* The image used */
          background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(11).jpg");

          /* Half height */
          height: 50%;

          /* Center and scale the image nicely */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }

      

Background image layout - first option

See live preview


        <html lang="en">
            <body>

                <!-- Main navigation -->
                <header>
                  <!--Navbar-->
                  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
                    <div class="container">
                      <a class="navbar-brand" href="#">
                        <strong>MDB</strong>
                      </a>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>
                      <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                        <ul class="navbar-nav mr-auto">
                          <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                              <span class="sr-only">(current)</span>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Profile</a>
                          </li>
                        </ul>
                        <form class="form-inline">
                          <div class="md-form my-0">
                            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                          </div>
                        </form>
                      </div>
                    </div>
                  </nav>
                  <!-- Full Page Intro -->
                  <div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
                    <!-- Mask & flexbox options-->
                    <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
                      <!-- Content -->
                      <div class="container">
                        <!--Grid row-->
                        <div class="row">
                          <!--Grid column-->
                          <div class="col-md-6 white-text text-center text-md-left mt-xl-5 mb-5 wow fadeInLeft" data-wow-delay="0.3s">
                            <h1 class="h1-responsive font-weight-bold mt-sm-5">Make purchases with our app </h1>
                            <hr class="hr-light">
                            <h6 class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt
                            dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae
                            iste.</h6>
                            <a class="btn btn-white">Download</a>
                            <a class="btn btn-outline-white">Learn more</a>
                          </div>
                          <!--Grid column-->
                          <!--Grid column-->
                          <div class="col-md-6 col-xl-5 mt-xl-5 wow fadeInRight" data-wow-delay="0.3s">
                            <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png" alt="" class="img-fluid">
                          </div>
                          <!--Grid column-->
                        </div>
                        <!--Grid row-->
                      </div>
                      <!-- Content -->
                    </div>
                    <!-- Mask & flexbox options-->
                  </div>
                  <!-- Full Page Intro -->
                </header>
                <!-- Main navigation -->
                <!--Main Layout-->
                <main>
                  <div class="container">
                    <!--Grid row-->
                    <div class="row py-5">
                      <!--Grid column-->
                      <div class="col-md-12 text-center">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                      </div>
                      <!--Grid column-->
                    </div>
                    <!--Grid row-->
                  </div>
                </main>
                <!--Main Layout-->

            </body>
        </html>

      


        html,
        body,
        header,
        .view {
          height: 100%;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .view {
            height: 1000px;
          }
        }
        @media (min-width: 800px) and (max-width: 850px) {
          html,
          body,
          header,
          .view {
            height: 600px;
          }
        }

        .btn .fa {
          margin-left: 3px;
        }

        .top-nav-collapse {
          background-color: #424f95 !important;
        }

        .navbar:not(.top-nav-collapse) {
          background: transparent !important;
        }

        @media (max-width: 991px) {
          .navbar:not(.top-nav-collapse) {
            background: #424f95 !important;
          }
        }

        .btn-white {
          color: black !important;
        }

        h6 {
          line-height: 1.7;
        }

        .rgba-gradient {
          background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
          background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
          background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(29, 210, 177, 0.7)));
          background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
          background: linear-gradient(to 45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
        }

      


        // Animations init
        new WOW().init();

      

Background image layout - second option

See live preview


        <html lang="en">
            <body>

                <header>
                  <!-- Navbar -->
                  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
                    <div class="container">
                      <a class="navbar-brand" href="#">
                        <strong>MDB</strong>
                      </a>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>
                      <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                        <ul class="navbar-nav mr-auto">
                          <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                              <span class="sr-only">(current)</span>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Profile</a>
                          </li>
                        </ul>
                        <form class="form-inline">
                          <div class="md-form my-0">
                            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                          </div>
                        </form>
                      </div>
                    </div>
                  </nav>
                  <!-- Navbar -->
                  <!-- Full Page Intro -->
                  <div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/91.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
                    <!-- Mask & flexbox options-->
                    <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
                      <!-- Content -->
                      <div class="container">
                        <!--Grid row-->
                        <div class="row mt-5">
                          <!--Grid column-->
                          <div class="col-md-6 mb-5 mt-md-0 mt-5 white-text text-center text-md-left">
                            <h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
                            <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                            <h6 class="mb-3 wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga
                            nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea
                            dolor molestiae, quisquam iste, maiores. Nulla.</h6>
                            <a class="btn btn-outline-white wow fadeInLeft" data-wow-delay="0.3s">Learn more</a>
                          </div>
                          <!--Grid column-->
                          <!--Grid column-->
                          <div class="col-md-6 col-xl-5 mb-4">
                            <!--Form-->
                            <div class="card wow fadeInRight" data-wow-delay="0.3s">
                              <div class="card-body">
                                <!--Header-->
                                <div class="text-center">
                                  <h3 class="white-text">
                                    <i class="fa fa-user white-text"></i> Register:</h3>
                                  <hr class="hr-light">
                                </div>
                                <!--Body-->
                                <div class="md-form">
                                  <i class="fa fa-user prefix white-text active"></i>
                                  <input type="text" id="form3" class="white-text form-control">
                                  <label for="form3" class="active">Your name</label>
                                </div>
                                <div class="md-form">
                                  <i class="fa fa-envelope prefix white-text active"></i>
                                  <input type="email" id="form2" class="white-text form-control">
                                  <label for="form2" class="active">Your email</label>
                                </div>
                                <div class="md-form">
                                  <i class="fa fa-lock prefix white-text active"></i>
                                  <input type="password" id="form4" class="white-text form-control">
                                  <label for="form4">Your password</label>
                                </div>
                                <div class="text-center mt-4">
                                  <button class="btn btn-indigo">Sign up</button>
                                  <hr class="hr-light mb-3 mt-4">
                                  <div class="inline-ul text-center d-flex justify-content-center">
                                    <a class="p-2 m-2 tw-ic">
                                      <i class="fa fa-twitter white-text"></i>
                                    </a>
                                    <a class="p-2 m-2 li-ic">
                                      <i class="fa fa-linkedin white-text"> </i>
                                    </a>
                                    <a class="p-2 m-2 ins-ic">
                                      <i class="fa fa-instagram white-text"> </i>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!--/.Form-->
                          </div>
                          <!--Grid column-->
                        </div>
                        <!--Grid row-->
                      </div>
                      <!-- Content -->
                    </div>
                    <!-- Mask & flexbox options-->
                  </div>
                  <!-- Full Page Intro -->
                </header>
                <!-- Main navigation -->
                <!--Main Layout-->
                <main>
                  <div class="container">
                    <!--Grid row-->
                    <div class="row py-5">
                      <!--Grid column-->
                      <div class="col-md-12 text-center">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                      </div>
                      <!--Grid column-->
                    </div>
                    <!--Grid row-->
                  </div>
                </main>
                <!--Main Layout-->

            </body>
        </html>

      


        html,
        body,
        header,
        .view {
          height: 100%;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .view {
            height: 1000px;
          }
        }
        @media (min-width: 800px) and (max-width: 850px) {
          html,
          body,
          header,
          .view {
            height: 650px;
          }
        }

        .top-nav-collapse {
          background-color: #3f51b5 !important;
        }

        .navbar:not(.top-nav-collapse) {
          background: transparent !important;
        }

        @media (max-width: 991px) {
          .navbar:not(.top-nav-collapse) {
            background: #3f51b5 !important;
          }
        }

        .rgba-gradient {
          background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
          background: -webkit-gradient(linear, 45deg, from(rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%)));
          background: linear-gradient(to 45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
        }

        .card {
          background-color: rgba(126, 123, 215, 0.2);
        }

        .md-form label {
          color: #ffffff;
        }

        h6 {
          line-height: 1.7;
        }

      


        // Animations init
        new WOW().init();

      

Background image layout - third option

See live preview


        <html lang="en">
            <body>

                <header>
                  <!--Navbar-->
                  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
                    <div class="container">
                      <a class="navbar-brand" href="#"><strong>MDB</strong></a>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>
                      <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                        <ul class="navbar-nav mr-auto">
                          <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Profile</a>
                          </li>
                        </ul>
                        <form class="form-inline">
                          <div class="md-form my-0">
                            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                          </div>
                        </form>
                      </div>
                    </div>
                  </nav>
                  <!-- Navbar -->
                  <!-- Full Page Intro -->
                  <div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
                    <!-- Mask & flexbox options-->
                    <div class="mask rgba-black-light d-flex justify-content-center align-items-center">
                      <!-- Content -->
                      <div class="container">
                        <!--Grid row-->
                        <div class="row">
                          <!--Grid column-->
                          <div class="col-md-12 mb-4 white-text text-center">
                            <h1 class="h1-reponsive white-text text-uppercase font-weight-bold mb-0 pt-md-5 pt-5 wow fadeInDown" data-wow-delay="0.3s"><strong>Minimalist intro</strong></h1>
                            <hr class="hr-light my-4 wow fadeInDown" data-wow-delay="0.4s">
                            <h5 class="text-uppercase mb-4 white-text wow fadeInDown" data-wow-delay="0.4s"><strong>Photography & design</strong></h5>
                            <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">portfolio</a>
                            <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">About me</a>
                          </div>
                          <!--Grid column-->
                        </div>
                        <!--Grid row-->
                      </div>
                      <!-- Content -->
                    </div>
                    <!-- Mask & flexbox options-->
                  </div>
                  <!-- Full Page Intro -->
                </header>
                <!-- Main navigation -->
                <!--Main Layout-->
                <main>
                  <div class="container">
                    <!--Grid row-->
                    <div class="row py-5">
                      <!--Grid column-->
                      <div class="col-md-12 text-center">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                      </div>
                      <!--Grid column-->
                    </div>
                    <!--Grid row-->
                  </div>
                </main>
                <!--Main Layout-->

            </body>
        </html>

      


        html,
        body,
        header,
        .view {
          height: 100%;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .view {
            height: 100vh;
          }
        }

        .top-nav-collapse {
          background-color: #78909c !important;
        }

        .navbar:not(.top-nav-collapse) {
          background: transparent !important;
        }

        @media (max-width: 991px) {
          .navbar:not(.top-nav-collapse) {
            background: #78909c !important;
          }
        }

        h1 {
          letter-spacing: 8px;
        }

        h5 {
          letter-spacing: 3px;
        }

        .hr-light {
          border-top: 3px solid #fff;
          width: 80px;
        }

      


        // Animations init
        new WOW().init();

      

Background video layout

See live preview


        <html lang="en" class="full-height">
            <body>

              <!-- Main navigation -->
              <header>
                <!-- Navbar -->
                <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
                  <div class="container">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                      <ul class="navbar-nav mr-auto smooth-scroll">
                        <li class="nav-item">
                          <a class="nav-link" href="#home">Home
                            <span class="sr-only">(current)</span>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#about" data-offset="90">About</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#features" data-offset="90">Features</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#services" data-offset="90">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#opinions" data-offset="30">Opinions</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#team" data-offset="90">Team</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#contact" data-offset="90">Contact</a>
                        </li>
                      </ul>
                      <!-- Social Icon  -->
                      <ul class="navbar-nav nav-flex-icons">
                        <li class="nav-item">
                          <a class="nav-link">
                            <i class="fa fa-facebook light-green-text-2"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link">
                            <i class="fa fa-twitter light-green-text-2"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link">
                            <i class="fa fa-instagram light-green-text-2"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </nav>
                <!-- Navbar -->
                <!-- Full Page Intro -->
                <div class="view">
                  <video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay muted loop>
                    <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
                  </video>
                  <!-- Mask & flexbox options-->
                  <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
                    <!-- Content -->
                    <div class="container px-md-3 px-sm-0">
                      <!--Grid row-->
                      <div class="row wow fadeIn">
                        <!--Grid column-->
                        <div class="col-md-12 mb-4 white-text text-center wow fadeIn">
                          <h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">Creative Agency</h3>
                          <hr class="hr-light my-4 w-75">
                          <h4 class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit deleniti consequuntur nihil.</h4>
                          <a href="#!" class="btn btn-rounded btn-outline-white">
                            <i class="fa fa-home"></i> Visit us
                          </a>
                        </div>
                        <!--Grid column-->
                      </div>
                      <!--Grid row-->
                    </div>
                    <!-- Content -->
                  </div>
                  <!-- Mask & flexbox options-->
                </div>
                <!-- Full Page Intro -->
              </header>
              <!-- Main navigation -->
              <!--Main Layout-->
              <main>
                <div class="container">
                  <!--Grid row-->
                  <div class="row py-5">
                    <!--Grid column-->
                    <div class="col-md-12 text-center">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                    <!--Grid column-->
                  </div>
                  <!--Grid row-->
                </div>
              </main>
              <!--Main Layout-->

            </body>
        </html>

      


        html,
        body,
        header,
        .view {
          height: 100%;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .view {
            height: 100vh;
          }
        }

        .top-nav-collapse {
          background-color: #563e91 !important;
        }

        .navbar:not(.top-nav-collapse) {
          background: transparent !important;
        }

        @media (max-width: 991px) {
          .navbar:not(.top-nav-collapse) {
            background: #563e91 !important;
          }
        }

        .rgba-gradient {
          background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
          background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
          background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
        }

      


        // Animations init
        new WOW().init();

      

Cards with background image MDB Pro component

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project


        <!-- Card -->
        <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

            <!-- Content -->
            <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div>
                    <h5 class="pink-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
                    <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                        optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                        Odit sed qui, dolorum!.</p>
                    <a class="btn btn-pink"><i class="fa fa-clone left"></i> View project</a>
                </div>
            </div>
            <!-- Content -->
        </div>
        <!-- Card -->

      

Project section with background image cards MDB Pro component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.

Travel

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project
Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project
Entertainment

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project


        <!--Projects section v.4-->
        <section>

            <!--Section heading-->
            <h2 class="h1-responsive font-weight-bold text-center my-5">Our best projects</h2>
            <!-- Section description -->
            <p class="grey-text text-center w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

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

                <!--Grid column-->
                <div class="col-md-12 mb-4">
                    <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.jpg);">
                        <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                            <div>
                                <h6 class="purple-text"><i class="fa fa-plane"></i><strong> Travel</strong></h6>
                                <h3 class="card-title py-3 font-weight-bold"><strong>This is card title</strong></h3>
                                <p class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                                    optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                                    Odit sed qui, dolorum!</p>
                                <a class="btn btn-secondary btn-rounded"><i class="fa fa-clone left"></i> View project</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-6 mb-4">
                    <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg);">
                        <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                            <div>
                                <h6 class="pink-text"><i class="fa fa-pie-chart"></i><strong> Marketing</strong></h6>
                                <h3 class="card-title py-3 font-weight-bold"><strong>This is card title</strong></h3>
                                <p class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                                    optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                                    Odit sed qui, dolorum!</p>
                                <a class="btn btn-pink btn-rounded"><i class="fa fa-clone left"></i> View project</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-6 mb-4">
                    <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20%2847%29.jpg);">
                        <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                            <div>
                                <h6 class="green-text"><i class="fa fa-eye"></i><strong> Entertainment</strong></h6>
                                <h3 class="card-title py-3 font-weight-bold"><strong>This is card title</strong></h3>
                                <p class="pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                                    optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                                    Odit sed qui, dolorum!</p>
                                <a class="btn btn-success btn-rounded"><i class="fa fa-clone left"></i> View project</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

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

        </section>
        <!--Projects section v.4-->

      

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue