"flex"
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/MrAndrewMcG/pen/MJybNp?depth=everything&order=popularity&page=40&q=react&show_forks=false" /> <style class="cp-pen-styles">body { width: 95%; height: 100; margin: 0 auto; background-color: #2d2d2d; } h1, h2, h3, p { text-align: center; color: #f3f3f3; font-family: 'Share Tech Mono', monospace; } h1 { margin: 10px; } .demo-wrap { background-color: #4e4e4f; height: 375px; width: 80%; margin: 0 auto; border: 2px solid #f3f3f3; border-radius: 5px; display: flex; } .box { background-color: #3c78b7; border-radius: 5px; margin: 5px; padding: 10px 10px; display: flex; justify-content: center; align-items: center; } .box p { font-size: .8em; } .one { background-color: #9fbee0; } .two { background-color: #6597cd; } .three { background-color: #2c5887; } .four { background-color: #19324d; } .property-container { display: flex; justify-content: center; } .property-box { width: 32%; padding: 5px; } .property-box h3 { font-size: 1.2em; background-color: #3c78b7; padding: 5px 0; border-radius: 5px; margin-top: 0; font-size: 1em; } .property-box p { background-color: #4e4e4f; padding: 3px; margin: 5px auto; width: 90%; border-radius: 5px; } .property-box p:hover { background-color: #676769; } .property-box .selected { border: 2px solid #3c78b7; } .fd-row { flex-direction: row; } .fd-row-reverse { flex-direction: row-reverse; } .fd-column { flex-direction: column; } .fd-column-reverse { flex-direction: column-reverse; } .jc-flex-start { justify-content: flex-start; } .jc-flex-end { justify-content: flex-end; } .jc-center { justify-content: center; } .jc-space-between { justify-content: space-between; } .jc-space-around { justify-content: space-around; } .ai-flex-start { align-items: flex-start; } .ai-flex-end { align-items: flex-end; } .ai-stretch { align-items: stretch; } .ai-center { align-items: center; } .property-info p { text-align: left; font-family: 'Roboto', sans-serif; } .property-info h3 { color: #3c78b7; font-size: 1.2em; text-align: left; } .mdn-link a { text-decoration: none; background-color: #3c78b7; padding: 5px; color: white; border-radius: 5px; font-size: .8em; } .mdn-link a:hover { background-color: #5c92ca; } </style></head><body> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:300|Share+Tech+Mono" rel="stylesheet"> </head> <body> <h1>flexbox

Related: See More

Awesome Landing Page
Boostrap Weather + Display Flex

Questions / Comments: