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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more