"layout"
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 lang='en' 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/juanv911/pen/avExKG?depth=everything&order=popularity&page=85&q=chat&show_forks=false" /> <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <style class="cp-pen-styles">body { background:#f0f0f0; padding:0px; margin:0px; font-family:Open Sans; font-size:12px; color:#999; } h1,h2,h3,h4,h5 { margin:0px; padding:0px; } a { color:#444; text-decoration:none } pre { white-space: pre-line; } p { line-height:25px; margin:0px; } a { cursor:pointer; text-decoration:none; } .menu { background:#2c3e50; height:60px; } .menu ul { width:980px; margin:0px auto; padding:0px; } .menu ul li{ float:left; list-style:none; display:inline; } .menu ul li.right{ float:right; font-size:21px; } .menu ul li.right i{ color:#ccc; } .menu ul li.active a{ color:#FFF; } .menu ul li a{ height:60px; line-height:60px; padding:0 10px; display:block; color:#ccc; text-transform:capitalize; } .menu ul li a:hover{ color:#fff; } .top{ background: #34495e;} .top ul{ margin: 0px auto; height: 80px; width: 980px; padding: 0px; } .top ul li{ height: 80px; line-height: 80px; list-style: none; float: left; color: white; margin-right: 10px; } .top ul li.logo a { color:white; text-decoration:none; font-size:25px; } .top ul li.right{ float:right; } .top ul li i{ color: white; font-size: 22px; line-height:40px; } .message_holder { background:#fdfdfd; border-bottom:solid 1px #ddd; } .message_holder .message { width:980px; height:45px; line-height:45px; margin:0 auto; } .container { width:980px; margin: 0 auto; margin-top:20px; position:relative; height;100%; } .container #posts { width:1000px; } .container #posts .post { width:280px; margin: 0 25px 25px 0; float:left; padding:0px; background: #fff; border: solid 1px #eee; border-bottom: solid 1px #e1e1e1; border-radius:3px; float: left; } .container #posts .post p{ line-height: 24px; color: #888; font-weight: 400; } .post h2 { padding:12px; color:#777; font-size:13px; } .post.chat h2 { padding:12px 0px 12px 20px; } .item:first-child{ border-top:none; margin:0px; } .item { padding:12px; border-top:solid 1px #eee; } .item.chat { padding:12px 0px 12px 20px; } .item img { float:left; border-radius:3px; } .item:nth-child(2n) { background:#fafafa; } .item.ask p,.item.answer p { margin-left: 60px; } .item .name { display:block; font-weight:bold; }</style></head><body> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'> <body> <div class="message_holder"> <div class="message">Question and Chat Tumblr Post Styles</div> </div> <div class="container" > <div id="posts" > <div class='post'> <h2>Questions and Answer</h2> <div class="item ask"> <img src="https://31.media.tumblr.com/avatar_fe7fae08b362_40.png"> <p><a class="name" href="">Jane Smith</a>A small river named Duden flows by their?</p> </div> <div class="item answer"> <img src="https://38.media.tumblr.com/avatar_1f3e83fb3f7b_40.png"> <p><a class="name" href="">Jonathan Doe</a>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </p> </div> </div> <div class='post question'> <h2>Questions and Answer</h2> <div class="item ask"> <img src="https://38.media.tumblr.com/avatar_6248be25ab70_40.png"> <p><a class="name" href="">Bobby</a>Why is the ocean blue?</p> </div> <div class="item answer"> <img src="https://38.media.tumblr.com/avatar_1f3e83fb3f7b_40.png"> <p><a class="name" href="">Jonathan Doe</a>The ocean is blue because water absorbs colors in the red part of the light spectrum. Like a filter, this leaves behind colors in the blue part of the light spectrum for us to see. The ocean may also take on green, red, or other hues as light bounces off of floating sediments and particles in the water.</p> </div> </div> <div class='post chat'> <h2>Chat</h2> <div class="item chat"> <p><a class="name" href="">Bobby</a>Hey, you know what sucks?</p> </div> <div class="item chat"> <p><a class="name" href="">Jonathan Doe</a>vaccuums</p> </div> <div class="item chat"> <p><a class="name" href="">Boby</a>Hey, you know what sucks in a metaphorical sense?</p> </div> <div class="item chat"> <p><a class="name" href="">Jonathan Doe</a>Hey, you know what just isn't cool?</p> </div> <div class="item chat"> <p><a class="name" href="">Jonathan Doe</a>lava</p> </div> </div> </div> </div> </body> </body></html>

Related: See More

Hipster As F*** Cards
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: