<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-12"> <div class="update-nag"> <div class="update-split"><i class="glyphicon glyphicon-refresh"></i></div> <div class="update-text">Cms v0.2.5 is available! <a href="#">Update Now</a> </div> </div> </div> <div class="col-md-12"> <div class="update-nag"> <div class="update-split update-info"><i class="glyphicon glyphicon-folder-open"></i></div> <div class="update-text">Plugin <a href="#">Donatirino</a> v0.2 is available! <a href="#">Update Now</a> </div> </div> </div> <div class="col-md-12"> <div class="update-nag"> <div class="update-split update-success"><i class="glyphicon glyphicon-leaf"></i></div> <div class="update-text">Theme <a href="#">WooStyliz</a> v1.4 is available! <a href="#">Update Now</a> </div> </div> </div> <div class="col-md-12"> <div class="update-nag"> <div class="update-split update-danger"><i class="glyphicon glyphicon-warning-sign"></i></div> <div class="update-text"> <strong>Warning</strong> Some type of problem, fix it! </div> </div> </div> </div> </div> </div>

body { margin-top: 10px; background-color: #e0e0e0; } .update-nag { display: inline-block; margin-bottom: 10px; background-color: #fff; height: 40px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1); } .update-nag:hover { cursor: pointer; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4); } .update-nag > .update-split { float: left; background-color: lightblue; width: 40px; height: 100%; text-align: center; } .update-nag > .update-split > .glyphicon{ position: relative; top: calc(50% - 9px)!important; /* 50% - 3/4 of icon height */ } .update-nag > .update-text { padding: 10px 10px 10px 45px; }