"Responsive Data Cards (Bootstrap 4) "
Bootstrap 4.1.1 Snippet by fzs1994

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css' /> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="tile"> <div class="wrapper"> <div class="header">Event Title</div> <div class="banner-img"> <img src="http://via.placeholder.com/640x360" alt="Image 1"> </div> <div class="dates"> <div class="start"> <strong>STARTS</strong> 12:30 JAN 2015 <span></span> </div> <div class="ends"> <strong>ENDS</strong> 14:30 JAN 2015 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="footer"> <a href="#" class="Cbtn Cbtn-primary">View</a> <a href="#" class="Cbtn Cbtn-danger">Delete</a> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="tile"> <div class="wrapper"> <div class="header">Event Title</div> <div class="banner-img"> <img src="http://via.placeholder.com/640x360" alt="Image 1"> </div> <div class="dates"> <div class="start"> <strong>STARTS</strong> 12:30 JAN 2015 <span></span> </div> <div class="ends"> <strong>ENDS</strong> 14:30 JAN 2015 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="footer"> <a href="#" class="Cbtn Cbtn-primary">View</a> <a href="#" class="Cbtn Cbtn-danger">Delete</a> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="tile"> <div class="wrapper"> <div class="header">Event Title</div> <div class="banner-img"> <img src="http://via.placeholder.com/640x360" alt="Image 1"> </div> <div class="dates"> <div class="start"> <strong>STARTS</strong> 12:30 JAN 2015 <span></span> </div> <div class="ends"> <strong>ENDS</strong> 14:30 JAN 2015 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="footer"> <a href="#" class="Cbtn Cbtn-primary">View</a> <a href="#" class="Cbtn Cbtn-danger">Delete</a> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="tile"> <div class="wrapper"> <div class="header">Event Title</div> <div class="banner-img"> <img src="http://via.placeholder.com/640x360" alt="Image 1"> </div> <div class="dates"> <div class="start"> <strong>STARTS</strong> 12:30 JAN 2015 <span></span> </div> <div class="ends"> <strong>ENDS</strong> 14:30 JAN 2015 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="stats"> <div> <strong>INVITED</strong> 3098 </div> <div> <strong>JOINED</strong> 562 </div> <div> <strong>DECLINED</strong> 182 </div> </div> <div class="footer"> <a href="#" class="Cbtn Cbtn-primary">View</a> <a href="#" class="Cbtn Cbtn-danger">Delete</a> </div> </div> </div> </div> </div> </div>
/* Reset & General ---------------------------------------------------------------------- */ * { margin: 0px; padding: 0px; } body { background: #ecf1f5; font:14px "Open Sans", sans-serif; text-align:center; } .tile{ width: 100%; background:#fff; border-radius:5px; box-shadow:0px 2px 3px -1px rgba(151, 171, 187, 0.7); float:left; transform-style: preserve-3d; margin: 10px 5px; } .header{ border-bottom:1px solid #ebeff2; padding:19px 0; text-align:center; color:#59687f; font-size:600; font-size:19px; position:relative; } .banner-img { padding: 5px 5px 0; } .banner-img img { width: 100%; border-radius: 5px; } .dates{ border:1px solid #ebeff2; border-radius:5px; padding:20px 0px; margin:10px 20px; font-size:16px; color:#5aadef; font-weight:600; overflow:auto; } .dates div{ float:left; width:50%; text-align:center; position:relative; } .dates strong, .stats strong{ display:block; color:#adb8c2; font-size:11px; font-weight:700; } .dates span{ width:1px; height:40px; position:absolute; right:0; top:0; background:#ebeff2; } .stats{ border-top:1px solid #ebeff2; background:#f7f8fa; overflow:auto; padding:15px 0; font-size:16px; color:#59687f; font-weight:600; border-radius: 0 0 5px 5px; } .stats div{ border-right:1px solid #ebeff2; width: 33.33333%; float:left; text-align:center } .stats div:nth-of-type(3){border:none;} div.footer { text-align: right; position: relative; margin: 20px 5px; } div.footer a.Cbtn{ padding: 10px 25px; background-color: #DADADA; color: #666; margin: 10px 2px; text-transform: uppercase; font-weight: bold; text-decoration: none; border-radius: 3px; } div.footer a.Cbtn-primary{ background-color: #5AADF2; color: #FFF; } div.footer a.Cbtn-primary:hover{ background-color: #7dbef5; } div.footer a.Cbtn-danger{ background-color: #fc5a5a; color: #FFF; } div.footer a.Cbtn-danger:hover{ background-color: #fd7676; }

Related: See More

Navbar With Icons
Information Cards
Bootstrap 4 and CCS3 Product Cards with Transition
Responsive Invoice template

Questions / Comments:

This is an ideal base for my own usage, which is replacing a button within the bottom grid of 9 <div> elements.

I would like to add an extra row to the grid with a single "cell" that spans across the whole screen. Is this possible? Do I need to create a new CSS class to handle this?

skeleton (-1) - 4 years ago - Reply 0

Unable to undestood, can you please elaborate or share some idea by an image?

fzs1994 (-1) - 4 years ago - Reply 0

You have a 3x3 grid. The rows are class=stats, and then 3x <div>'s inside those.

I am wondering if this can be altered so that on 1 row, there is 1 full-width <div> instead.

I am trying for a calculator-style amendment to your layout. The 3x3 grid is replaced with 9 buttons, for numbers 1-9. Beneath this, I would like an extra 4th row with a single, very wide button for "0" (actually I would use a word rather than the number).

Adding only a single <div> just puts it to the first of 3 in the grid with the current CSS.

Hope that explains a bit further...??

skeleton (-1) - 4 years ago - Reply -1

Assign a new custom class to that single div and in CSS, set width to 100%.

So HTML, 

<div class="stats"> 
  <div class="letter-0">Letter 0 block</div>
</div>

And in CSS:

.stats div.letter-0{
  width: 100%;
}

fzs1994 (-1) - 4 years ago - Reply -1

You can achieve this by unordered list probably?

fzs1994 (-1) - 4 years ago - Reply 0