Bootstrap 4 có rất nhiều cải tiến, trong đó có Cards hỗ trợ làm giao diện Danh sách bài viết, Danh sách chức năng hoặc Portfolio rất nhanh chóng. Kết hợp thêm WOW.js, bạn sẽ có rất nhiều bất ngờ.
Tham khảo các bài viết:
Ví dụ
<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Cards with WOW.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<section class="container mt-5 mb-5">
<div class="card-columns">
<div class="card wow bounce"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card wow flash p-3">
<blockquote class="card-block card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow pulse"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow rubberBand card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow shake text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow headShake"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.jpg" alt="Card image"> </div>
<div class="card wow swing p-3 text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow tada">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow wobble"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card wow jello p-3">
<blockquote class="card-block card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow bounceIn"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card wow bounceInDown p-3">
<blockquote class="card-block card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow bounceInLeft"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow bounceInRight card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow bounceInUp text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow fadeIn">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow fadeInDown"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card wow fadeInDownBig p-3">
<blockquote class="card-block card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow fadeInLeft"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow fadeInLeftBig card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow fadeInRight text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow fadeInRightBig"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.jpg" alt="Card image"> </div>
<div class="card wow swing p-3 text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow fadeInUp">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow fadeInUpBig"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card wow flipInX card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow flipInY text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow lightSpeedIn"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card wow rotateIn"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow rotateInDownLeft card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow rotateInDownRight text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow rotateInUpLeft"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.jpg" alt="Card image"> </div>
<div class="card wow swing p-3 text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow rotateInUpRight">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow hinge card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow rollIn text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow zoomIn">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow zoomInDown"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow zoomInLeft card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow zoomInRight text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow zoomInUp"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.jpg" alt="Card image"> </div>
<div class="card p-3 text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow slideInDown text-center">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow slideInLeft"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.jpg" alt="Card image"> </div>
<div class="card wow swing p-3 text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
</blockquote>
</div>
<div class="card wow slideInRight">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card wow slideInUp"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script>
</body>
</html>Chúc các bạn thành công!
