<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="row last-buffer"> <div class="col-md-12 top-buffer" > <h2> Watch</h2> </div> <div class="col-md-12 top-buffer" > <a href="#" class="btn btn-default btn-lg double-height" style="width:100%">TiVo</a> </div> <div class="col-md-12 top-buffer "> <a class="btn btn-success btn-lg double-height" style="width:100%"> <span class="fa-stack fa-2x"> <i class="fa up-10pct fa-volume-up fa-stack-2x"></i> </span> <span class="btn btn-lg col2">  Volume Up</span> </a> </div> <div class="col-md-12 top-buffer "> <a class="btn btn-success btn-lg double-height" style="width:45%"> <span class="fa-stack fa-2x"> <i class="fa up-10pct fa-volume-up fa-stack-2x"></i> </span> <span class="btn btn-lg col2">  Volume Up</span> </a> <a class="btn btn-success btn-lg double-height" style="width:50%"> <span class="fa-stack fa-2x"> <i class="fa up-10pct fa-volume-up fa-stack-2x"></i> </span> <span class="btn btn-lg col2">  Volume Up</span> </a> </div> <div class="col-md-12 top-buffer mini-half clearfix"> <a href="#" class="btn btn-primary btn-lg double-height"><span va>Try2</span></a> <a href="#" class="btn btn-primary btn-lg double-height"><span va>Try2</span></a> </div> <div class="col-md-12 top-buffer mini-half clearfix"> <a href="#" class="btn btn-primary btn-lg">Small X</a> <a href="#" class="btn btn-primary btn-lg">Small Y</a> </div> <div class="col-md-12 top-buffer" > <a href="#" class="btn btn-primary btn-lg" style="width:100%">SKYD Rack Monitor</a> </div> <div class="col-md-12 top-buffer" > <a class="btn btn-lg btn-success" href="#" style="width:100%"> Font Awesome<br>Version 4.7.0<i class="fa fa-flag fa-2x pull-right"></i></a> </div> <div class="col-md-12 top-buffer" > <a href="#" class="btn btn-default btn-lg double-height" style="width:100%">SKYD Rack Monitor</a> </div> </div> </div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3" style="background:red"> <div class="row last-buffer"> <div class="col-md-12 top-buffer" > <a href="#" class="btn btn-primary btn-lg" style="width:100%">SKYD Rack Monitor</a> </div> <div class="col-md-12 top-buffer" > <a href="#" class="btn btn-primary btn-lg" style="width:100%">SKYD Rack Monitor</a> </div> <div class="col-md-12 top-buffer" > <a href="#" class="btn btn-primary btn-lg" style="width:100%">SKYD Rack Monitor</a> </div> <div class="col-md-12 top-buffer mini clearfix" style="background:blue"> <a href="#" class="btn btn-primary btn-lg">Small X</a> <a href="#" class="btn btn-primary btn-lg">Small Y</a> </div> <div class="col-md-12 top-buffer mini clearfix" style="background:blue"> <a href="#" class="btn btn-primary btn-lg">Small X</a> <a href="#" class="btn btn-primary btn-lg">Small Y</a> </div> <div class="col-md-12 top-buffer" > <a href="#" class="btn btn-primary btn-lg" style="width:100%">SKYD Rack Monitor</a> </div> </div> </div> </div> </div>

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); @import url("https://fonts.googleapis.com/css?family=Titillium+Web:200,400"); .top-buffer { margin-top:2%; } .btn-lg.double-height { line-height: 4; } .last-buffer:last-child { margin-bottom:2%; } .mini-half a:first-child { margin-right:1%; float:left !important; width:49%; } .mini-half a:last-child { margin-left:1%; float:right !important; width:49%; } .grey { background: grey; } .top { padding-bottom:10%; } .bottom { vertical-align: bottom; left: 0px; } .colx {position: absolute; z-index: 1; bottom: 0px; left: 0px;} .col2 {position: absolute; z-index: 1; bottom: -5%; left: 0px; clear: both;} .col3 {position: absolute; z-index: 1; bottom: -5%; left: 5%; } .up-10pct { top: -5%; } .floating-box { display: inline-block; overflow: hidden; padding: 0; } .fb2 { display: inline-block; position: absolute; left: 20px; bottom:0px; } .fb3 { float: left; clear: both; } .va { top: 100%; transform: translateY(-100%); -ms-transform: translateY(-100%); -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); } body, html{ background: #3b382f; width: 100%; height: 100%; overflow: hidden; font-family: 'Titillium Web', sans-serif; } h1, h2, h3, h4, h5, h6 { color: gray; } h3 { font-size: 18px; margin: 0 auto 15px; }