"section card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nirjhor/pen/ENWXwd?q=section%20card&limit=all&order=popularity&depth=everything&show_forks=false" /> <style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); body { color: #525c65; font-size: 16px; font-family: "Open Sans", sans-serif; line-height: 1.5rem; -webkit-font-smoothing: antialiased; } section { /* position: relative; */ background-color: #fafbfc !important; } .contain { padding-top: 4.5rem; padding-bottom: 4.5rem; padding-left: 0; padding-right: 0; max-width: 75.75rem; margin-left: auto; margin-right: auto; overflow: hidden; } /* .contain::before { content: ''; width: 2000px; z-index: -1000; background: left bottom; transform-origin: top left; position: absolute; top: 0; left: 0; } */ a { border-bottom: none; text-decoration: none; color: #525c65; } .programs__cards { float: left; display: block; width: 49.15254%; margin-right: 10px; margin-bottom: 0rem; margin-top: 0; border-radius: 6px; background-color: #fff; box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15); } .programs__cards--content { height: 12rem; padding-top: 0rem; padding-bottom: 0rem; } .programs__cards--content .left { float: left; display: block; margin-right: 1.69492%; width: 23.72881%; margin-left: 0 !important; } .programs__cards--content .left, .programs__cards--content .right { position: relative; top: 50%; transform: translateY(-50%); text-align: center !important; } img, picture, svg { margin: 0; max-width: 100%; height: auto; } .programs__cards--content .right { float: left; display: block; margin-right: 1.69492%; width: 74.57627%; max-width: 22.625rem; padding: 0; position: relative; top: 50%; transform: translateY(-50%); text-align: left; } .blue { color: #02b3e4 !important; font-size: 1.5rem; line-height: 2.25rem; font-weight: 400; } .mb-half { margin-bottom: 0.75rem; } p.small { font-size: 0.875rem; line-height: 1.5rem; margin-bottom: 0 !important; color: #525c65; font-weight: 400; }</style></head><body> <section> <div class="contain"> <a href="#" class="programs__cards programs-reveal" > <div class="programs__cards--content"> <div class="left text-center"> <img alt="Udacity Nanodegree Programs" src="https://d125fmws0bore1.cloudfront.net/assets/pages/homepage/icon-nanodegree-3e2b3f498d898f59afb38b5f083fba4cfae561ae395c2a6826b37cf4878d110b.svg"> </div> <div class="right"> <h4 class="mb-half blue">Nanodegree Programs</h4> <p class="mb-0 small">Master cutting-edge skills in programs built with the most innovative companies in the world.</p> </div> </div> </a> <a href="/courses/all" class="programs__cards programs-reveal"> <div class="programs__cards--content"> <div class="left text-center"> <img alt="Udacity Free Courses" src="https://d125fmws0bore1.cloudfront.net/assets/pages/homepage/icon-courses-3fd2d163f594822a46a4726178e19206ac7e4da3e21eb5c540c016d2ef6fbd30.svg"> </div> <div class="right"> <h4 class="mb-half green">Free Courses</h4> <p class="mb-0 small">Enhance your skillset and boost your hireability through flexible and independent learning.</p> </div> </div> </a> </div> </section> </body></html>

Related: See More

Paper Kit Pro
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
bootstrap 4 card

Questions / Comments: