"Bootstrap Animations - 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 Animations--> <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> <!--Section: Live preview--> <section> <div class="row mb-4 d-flex flex-column"> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(121).jpg" alt="A view on mountains." class="img-fluid z-depth-1 wow bounceIn"> </div> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" alt="Cottage on a lake surrounded by mountains." class="img-fluid z-depth-1 wow tada" data-wow-delay="0.2s"> </div> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(122).jpg" alt="Cyclist riding down the mountain path." class="img-fluid z-depth-1 wow fadeInLeft" data-wow-delay="0.3s"> </div> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(1).jpg" alt="View on mountains from mountain top." class="img-fluid z-depth-1 wow fadeInRight"> </div> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow jello"> </div> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(7).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow swing"> </div> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg" alt="View on mountains from mountain top." class="img-fluid z-depth-1 wow wobble"> </div> <div class="col-md-4 mb-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow zoomIn"> </div> <div class="col-md-4 mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(125).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow flipInX"> </div> </div> </section> <!--Section: Live preview--> <hr class="my-4"> <div class="text-center darken-grey-text mb-4"> <h3 class="font-bold mb-3">Here you can find more Animations:</h3> <a class="btn btn-danger" href="https://mdbootstrap.com/css/animations/" target="_blank">Bootstrap Animations</a> </div> </div> <!--MDB Animations--> </main> <!-- MDB core JavaScript --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script> </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-color: #eee; } .darken-grey-text { color: #2E2E2E; }
new WOW().init();

Related: See More

Argon Design System
Hamburger Icon Animations
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form

Questions / Comments: