"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 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/astrocoder/pen/EWVdZr?depth=everything&order=popularity&page=75&q=develop&show_forks=false" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700'> <style class="cp-pen-styles"> body{ background-color: #F7F7F7; font-family: 'Roboto Condensed', sans-serif; } #logo{ margin: 50px 0 0 50px; } h2{ font-weigth: bold; font-size: 1.5em; } .login{ margin: 0 auto; padding: 34px 0 0; width: 300px; text-align: center; } #social{ margin-top: 40px; margin-bottom: 10px; } .social-item{ width: 40px; height: 40px; color: #fff; font-size: 23px; line-height: 40px; margin: 0px 2px; display: inline-block; } .social-item[rel=facebook] { background: #3b5997; } .social-item[rel=googleplus] { background: #dc4e42; } .social-item[rel=linkedin] { background: #0077B4; } .social-item[rel=twitch] { background: #6441A4; } .login-item input{ border: 1px solid #E1E1E1; margin-top: 10px; padding: 13px 50px; font-weight: 400; } .login-item i{ position: relative; top: 2px; left: 30px; color: #818286; font-size: 20px; } #forgot{ margin: 15px; } #forgot a{ color: #808285; text-decoration: none; font-weight: 400; } .login-footer{ text-align: center; } .login-footer input{ border: none; padding: 15px 70px; background-color: #DDDDDD; color: white; } .login-footer p{ color: #969798; margin-top: 17px; } .login-footer span{ color: black; font-weight: bold; } .login-footer span:hover{ border-bottom: 2px solid black; }</style></head><body> <a href="https://www.kinguin.net"><img src="https://cdns.kinguin.net/media/page/logo/websites/1/kinguin-small.png" alt="" id="logo" /></a> <div class="login"> <h2>Welcome home, player!</h2> <div id="social"> <div class="social-container"> <div class="social-item" rel="facebook"></div> <div class="social-item" rel="googleplus"></div> <div class="social-item" rel="linkedin"></div> <div class="social-item" rel="twitch"></div> </div> </div> <div class="login-item"> <i class="fa fa-user"></i> <input type="text" placeholder="Login"/> </div> <div class="login-item"> <i class="fa fa-lock"></i> <input type="password" placeholder="Password"/> </div> <p id="forgot"><a href="">Forgot Password?</a></p> <div class="login-footer"> <input type="submit" value="SIGN IN"/> <p>or <span>CREATE NEW ACCOUNT</span></p> </div> </div> </body></html>

Related: See More

Paper Bootstrap Wizard
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: