css - Bootstrap 4 - Card columns behaviour -
this question has answer here:
is there way change bootstrap 4 card-columns default top-to-bottom behaviour left-to-right?
right i'm displaying news in school project, , it's kind of senseless see 1 hour old , 3 months old news next each other.
thank in advance!
try example
html
<div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <div class="card-block"> <h5 class="text-bold">tawshif ahsan khan</h5> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <div class="card-block"> <h4 class="card-title">tawshif ahsan khan</h4> <div class="meta"> <a href="#">friends</a> </div> <div class="card-text"> tawshif web designer living in bangladesh. </div> </div> <div class="card-footer"> <span class="float-right">joined in 2013</span> <span><i class=""></i>75 friends</span> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <p class="card-block"> lorem ipsum dolor sit amet, consectetur adipisicing elit. quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, @ magnam nobis! </p> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <div class="card-block"> <figure class="profile"> <img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt=""> </figure> <h4 class="card-title mt-3">tawshif ahsan khan</h4> <div class="meta"> <a>friends</a> </div> <div class="card-text"> tawshif web designer living in bangladesh. </div> </div> <div class="card-footer"> <small>last updated 3 mins ago</small> <button class="btn btn-secondary float-right btn-sm">show</button> </div> </div> </div> </div> <div class="row mb-5"> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-primary "> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <blockquote class="card-blockquote p-3"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. integer posuere erat.</p> <footer> <small> famous in <cite title="source title">source title</cite> </small> </footer> </blockquote> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <div class="card-block"> <figure class="profile"> <img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt=""> </figure> <h4 class="card-title mt-3">tawshif ahsan khan</h4> <div class="meta card-text"> <a>friends</a> </div> <div class="card-text"> tawshif web designer living in bangladesh. </div> </div> <div class="card-footer"> <small>last updated 3 mins ago</small> <button class="btn btn-info float-right btn-sm">follow</button> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <div class="card-block"> <figure class="profile profile-inline"> <img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt=""> </figure> <h4 class="card-title">tawshif ahsan khan</h4> <div class="card-text"> tawshif web designer living in bangladesh. </div> </div> <div class="card-footer"> <small>last updated 3 mins ago</small> <button class="btn btn-info float-right btn-sm">follow</button> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif"> <div class="card-block"> <figure class="profile profile-inline"> <img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt=""> </figure> <h4 class="card-title">tawshif ahsan khan</h4> <div class="card-text"> tawshif web designer living in bangladesh. </div> </div> <div class="card-footer"> <button class="btn btn-info btn-sm">follow</button> </div> </div> </div> </div> </div> css
html { font-family: lato, 'helvetica neue', arial, helvetica, sans-serif; font-size: 14px; } h5 { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; margin: 0; } .card { font-size: 1em; overflow: hidden; padding: 0; border: none; border-radius: .28571429rem; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; } .card-block { font-size: 1em; position: relative; margin: 0; padding: 1em; border: none; border-top: 1px solid rgba(34, 36, 38, .1); box-shadow: none; } .card-img-top { display: block; width: 100%; height: auto; } .card-title { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; } .card-text { clear: both; margin-top: .5em; color: rgba(0, 0, 0, .68); } .card-footer { font-size: 1em; position: static; top: 0; left: 0; max-width: 100%; padding: .75em 1em; color: rgba(0, 0, 0, .4); border-top: 1px solid rgba(0, 0, 0, .05) !important; background: #fff; } .card-inverse .btn { border: 1px solid rgba(0, 0, 0, .05); } .profile { position: absolute; top: -12px; display: inline-block; overflow: hidden; box-sizing: border-box; width: 25px; height: 25px; margin: 0; border: 1px solid #fff; border-radius: 50%; } .profile-avatar { display: block; width: 100%; height: auto; border-radius: 50%; } .profile-inline { position: relative; top: 0; display: inline-block; } .profile-inline ~ .card-title { display: inline-block; margin-left: 4px; vertical-align: top; } .text-bold { font-weight: 700; } .meta { font-size: 1em; color: rgba(0, 0, 0, .4); } .meta { text-decoration: none; color: rgba(0, 0, 0, .4); } .meta a:hover { color: rgba(0, 0, 0, .87); }
Comments
Post a Comment