CodePen Embed - Bootstrap Card Layout

Live

This Pen is owned by Michael Peterman on CodePen.

See more by @michaelkpeterman on CodePen

External CSS

//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"GoJZGN\",\"auto_save\":true},\"hashid\":\"GoJZGN\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[],\"id\":6044652,\"user_id\":147387,\"html\":\"<div class=\\\"container\\\">\\n<div class=\\\"row\\\">\\n   <div class=\\\"col-sm-12 col-md-6 featured-container\\\">\\n     <div class=\\\"card featured\\\">\\n     </div>\\n  </div>\\n  <div class=\\\"col-sm-12 col-md-6\\\">\\n    <div class=\\\"card sub-featured\\\">\\n    <h2>This is a heading</h2>\\n      <p>Nunc tincidunt euismod mi at dapibus. Donec eu leo gravida, venenatis diam et, convallis nulla. Donec pharetra sem non ex semper tempus. In volutpat, diam non vestibulum scelerisque, purus magna egestas ante, in tincidunt lorem metus ut lectus. Sed eu tincidunt nisl, </p>\\n    </div>\\n  </div>\\n  <div class=\\\"col-sm-6 col-md-3\\\">\\n    <div class=\\\"card non-featured\\\">\\n    <h2>Category</h2>\\n    </div>\\n  </div>\\n  <div class=\\\"col-sm-6 col-md-3\\\">\\n    <div class=\\\"card non-featured accent\\\">\\n    <h2>This is a heading</h2>\\n    </div>\\n  </div>\\n</div>\\n</div>\",\"css\":\"body {\\n  padding-top: 120px;\\n  padding-bottom: 220px;\\n}\\n\\n.card {\\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\\n  transition: all 0.2s ease-in-out;\\n}\\n\\n.featured {\\n  height: 90vh;\\n  background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/J98HWXTPPV.jpg);\\n  background-size: cover;\\n  background-position: 50%;\\n  min-height: 414px;\\n  opacity: 0.8;\\n}\\n\\n.sub-featured {\\n  height: 49vh;\\n  margin-bottom: 5vh;\\n  min-height: 226px;\\n  max-height: 326px;\\n}\\n\\n.sub-featured h2 {\\n  font-size: 1.2em;\\n}\\n\\n.non-featured {\\n  height: 36vh;\\n  min-height: 167px;\\n}\\n\\n.card {\\n  background-color: #efefef;  \\n  padding: 10px 15px;\\n  position: relative;\\n}\\n\\n.non-featured h2 {\\n  font-size: 1.1em;\\n  position: absolute;\\n  bottom: 5px;\\n}\\n\\n.accent {\\n  background-color: #33a2ae;\\n  background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/0UR6B61LVN.jpg);\\n  background-position: 50%;\\n  opacity: 0.9;\\n}\\n\\n@media screen and ( max-width: 992px ) {\\n  .col-md-6 {\\n    margin-bottom: 5vh;\\n  }\\n  \\n  .sub-featured {\\n    margin-bottom: 0vh;\\n  }\\n}\\n\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2015-12-09T16:58:44.000Z\",\"updated_at\":\"2016-05-09T18:36:03.000Z\",\"title\":\"Bootstrap Card Layout\",\"description\":\"\",\"slug_hash\":\"GoJZGN\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"015187ae-45a0-74f4-901a-3521b195e1cf\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-22d4d33aab19e5279e72.js"}