<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <div class="alert alert-primary alert-labeled" style = "background: lightgray;color: black"> <button type="button" class="close" data-dismiss="alert"> <span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <div class="alert-labeled-row"> <span class="alert-label alert-label-left alert-labelled-cell"> <i class="glyphicon glyphicon-info-sign"></i> </span> <p class="alert-body alert-body-right alert-labelled-cell"> Detractis detrahere concipere ac ut et inveniant to. Im perductae ut at ecclesiae assentiri eo. </p> </div> </div> </div> </div> </div>

.alert-labeled{ padding: 0px; } .alert-labeled-row{ display: table-row; padding: 0px; } .alert-labelled-cell{ padding: 10px; display: table-cell; vertical-align: middle; } .alert-labeled .close > *{ padding:10px; display: table-cell; vertical-align: middle; } .alert-label{ vertical-align: middle; background: #BCE8F1; width: auto; padding: 10px 15px; height: 100%; font-size:1.1em; }