Easy Card Layout with Bootstrap

Many content-rich websites are using card layouts to provide a quick view of the site content. An example of this is the layout of Pinterest.

Bootstrap

Bootstrap provides great CSS and JavaScript libraries that make responsive web design quick and simple. In order to use the JavaScript portion of Bootstrap, you will also need to include JQuery. You can include these directly from the source in the head section of your page without needing to download anything.

Include the following code in the head section of your HTML page:
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- Latest compiled and minified BootStrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Latest compiled and minified BootStrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap Grid System

Bootstrap treats a page as a grid of 12 columns. You can specify the size of a div for 3 different screen sizes by using sm (small), md (medium), lg (large). The sum of all columns in a row needs to add up to 12.
For more information about this, visit the W3 School Bootstrap Grid tutorial.

Replicating the Pinterest Layout

In replicating the Pinterest Layout, we will use a total of 6 columns for a medium screen. Since Bootstrap needs a sum total of 12, we will set a size of 2 for each column because 2 * 6 columns = 12.

The following code has a row, and 6 columns on a medium screen:
<div class="row"> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> </div>

Style the content

The typical use of the card layout has a shadow around each card. The box-shadow CSS property allows us to easily add this feature. In the typical card layout shown on Pinterest, the cards are of varying sizes and extend down each column. Within each column, we will create a new row with a column that spans 100% of the space. This will be our actual card where we will add the shadow.

The following code is placed in between each column div (The content will need to be changed to display different information in each card): <div class="sub-box"> <div class="content-body"> <div class="feature-all-txt"> <center> <img class="img-responsive full-wid" src="/images/games/smash_up.png" /> </center> <div class="feature-head"> Header Here </div> <div class="feature-txt"> Sample Card Text Here. </div> </div> </div> <div class="feature-foot"> Footer Here </div> </div> The following code is used to style the CSS: The Bootstrap row class was overwritten to set the margins of the row to 0. This prevents the row from spanning all the way to the edge of the website.
.content-body {padding: 1em; background-color: #dddddd;} .row {margin:0;} .sub-box { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border: solid #042037 1px; margin-bottom: 1em; } .feature-foot {background-color:#042037; color:white; padding:1em;} .feature-head {color:#551800; font-size: 1.5em;}

Putting it all together:

Add multiple cards with the sub-box class to expand the cards down your columns. The following is a link to the sample page that I created for this tutorial.
View Sample Page