"Bootstrap Jumbotron - Material Design & Bootstrap 4"
Bootstrap 4.0.0 Snippet by MDBootstrap

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body class="hm-gradient"> <main> <!--MDB --> <div class="container mt-4"> <div class="text-center darken-grey-text mb-4"> <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1> <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a> </div> <div class="row mb-4"> <div class="col-md-12"> <div class="card" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg);"> <div class="text-white text-center d-flex align-items-center py-5 px-4 my-5"> <div> <h1 class="card-title pt-3 mb-5 font-bold"><strong>Create a great website with MDB</strong></h1> <p class="mx-5 mb-5">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-outline-white"><i class="fa fa-clone left"></i> View project</a> </div> </div> </div> </div> </div> <!--Jumbotron--> <div class="jumbotron"> <h1 class="h1-reponsive mb-3 blue-text"><strong>Hello, world!</strong></h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typography and spacing to space content out within the larger container. </p> <p class="lead"> <a class="btn btn-cyan btn-lg" href="#" role="button">Learn more</a> </p> </div> <!--Jumbotron--> <div class="jumbotron text-center mb-4"> <!--Title--> <h4 class="card-title font-bold pb-2"><strong>My adventure</strong></h4> <!--Card image--> <div class="view overlay hm-white-slight my-4"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid" alt=""> <a href="#"> <div class="mask"></div> </a> </div> <h5 class="indigo-text font-bold mb-4">Photography</h5> <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p> <!--Linkedin--> <a class="mr-3 li-ic"><i class="fa fa-linkedin grey-text"> </i></a> <!--Twitter--> <a class="mr-3 tw-ic"><i class="fa fa-twitter grey-text"> </i></a> <!--Dribbble--> <a class="fb-ic"><i class="fa fa-facebook grey-text"> </i></a> </div> <!--Jumbotron--> <!--News card--> <div class="card border-primary mb-4 text-center hoverable"> <div class="card-body"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-4 offset-md-1 mx-3 my-3"> <!--Featured image--> <div class="view overlay hm-white-slight"> <img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.jpg" class="img-fluid" alt="Sample image for first version of blog listing"> <a> <div class="mask"></div> </a> </div> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-7 text-left ml-3 mt-3"> <!--Excerpt--> <a href="" class="green-text"> <h6 class="font-bold pb-1"><i class="fa fa-desktop"></i> Work</h6> </a> <h4 class="mb-4"><strong>This is title of the news</strong></h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, 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.</p> <p>by <a><strong>Carine Fox</strong></a>, 19/08/2016</p> <a class="btn btn-success">Read more</a> </div> <!--Grid column--> </div> <!--Grid row--> </div> </div> <!--News card--> <!--Jumbotron--> <div class="jumbotron text-center mdb-color lighten-2 white-text z-depth-2"> <!--Title--> <h1 class="card-title h2-responsive mt-2 font-bold"><strong>Material Design for Bootstrap</strong></h1> <!--Subtitle--> <p class="mt-4"><strong>Powerful and free Material Design UI KIT</strong></p> <!--Text--> <div class="d-flex justify-content-center"> <p class="card-text my-2" style="max-width: 43rem;">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p> </div> <hr class="my-4 rgba-white-light"> <button type="button" class="btn btn-outline-white">Buy now <i class="fa fa-diamond ml-1"></i></button> <button type="button" class="btn btn-outline-white">Download <i class="fa fa-download ml-1"></i></button> </div> <!--Jumbotron--> <hr class="my-4"> <div class="text-center darken-grey-text mb-4"> <h3 class="font-bold mb-3">Here you can find more Jumbotrons:</h3> <a class="btn btn-danger" href="https://mdbootstrap.com/components/bootstrap-jumbotron/" target="_blank">Bootstrap Jumbotrons</a> </div> </div> <!--MDB --> </main> </body>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css); .hm-gradient { background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); } .darken-grey-text { color: #2E2E2E; }

Related: See More

Argon Design System
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: