"alignment"
Bootstrap 3.3.0 Snippet by skavan

<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 id="example"> <div class="btn btn-warning btn-lg double-height align-root" style="width:200px"> <div id="div-1-padding">   <i class="fa align-center-center fa-volume-up fa-3x"></i> <h4 class="align-bottom-left">Volume Status</h4> <h6 class="align-bottom-right text-muted">40db</h6> <h6 class="align-top-center text-muted">Extra Data</h6> </div> </div> </div><!-- /id=example --> <div> <div class="col-md-3 bcolor last-buffer"> <div class="btn btn-lg double-height top-buffer align-root full-width"> <div>   <i class="fa fa-power-off fa-4x align-center-center"></i> </div> </div> <div class="" > <h2 class="pull-left"> Watch</h2> </div> <div class="btn btn-warning btn-lg double-height top-buffer align-root full-width"> <div id="div-1-padding" >   <i class="fa align-center-center fa-volume-up fa-3x"></i> <h4 class="align-bottom-left">Volume Status</h4> <h6 class="align-bottom-right text-muted">40db</h6> <h6 class="align-top-center text-muted">Extra Data</h6> </div> </div> <div> <div class="btn btn-warning btn-lg double-height top-buffer align-root pull-left half-width"> <div id="div-1-padding" >   <i class="fa align-center-center fa-volume-up fa-2x"></i> <h4 class="align-bottom-left">STEREO</h4> <h6 class="align-bottom-right text-muted"></h6> <h6 class="align-top-center text-muted"></h6> </div> </div> <div class="btn btn-warning btn-lg double-height top-buffer align-root pull-right half-width"> <div id="div-1-padding" >   <i class="fa align-center-center fa-volume-up fa-2x"></i> <h4 class="align-bottom-left">EFFECT</h4> <h6 class="align-bottom-right text-muted"></h6> <h6 class="align-top-center text-muted"></h6> </div> </div> </div> <div class="btn btn-warning btn-lg double-height top-buffer align-root" style="width:100%"> <div id="div-1-padding" >   <img class="align-center-center" width=75 height=75 src="http://icdn.pro/images/en/t/i/tivo-logo-icone-6557-128.png"></img> <h4 class="align-bottom-left">TiVo</h4> <h6 class="align-bottom-right text-muted">40db</h6> <h6 class="align-top-center text-muted"></h6> </div> </div> <div class="btn btn-warning btn-lg double-height top-buffer align-root" style="width:100%"> <div id="div-1-padding" >   <h3 class="align-center-center">98 dB</h3> <h4 class="align-bottom-left">Volume Status</h4> <h6 class="align-bottom-right text-muted">40db</h6> <h6 class="align-top-center text-muted">Extra Data</h6> </div> </div> <div style="clear:both;"> </div> </div> <div class="col-md-6">Part 2</div> <div class="col-md-3">Part 3</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"); body, html{ width: 100%; height: 100%; overflow: hidden; font-family: 'Titillium Web', sans-serif; } .align-root { position:relative; color:#fff; } .align-bottom-left { color:#fff; position:absolute; bottom:0; left:0; margin:6px; line-height:1; } .align-bottom-right { /*background-color:#88d;-->*/ position:absolute; bottom:0; right:0; margin:6px; line-height:1; } .align-top-center { position:absolute; top: 0; left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translateX(-50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */ margin:2px; line-height:1; } .align-center-center { color:#fff; position:absolute; top: 48%; left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translate(-50%,-50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */ margin:0px; } .full-width { width:100%; } .half-width { width:49%; } .btn-lg.double-height { line-height: 4; } .top-buffer { margin-top:2%; } .last-buffer:last-child { margin-bottom:2%; } .bcolor{ background-color: red; }

Related: See More


Questions / Comments: