Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Awesome and Bootstrap alert spacing q

Code

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <div class="alert alert-danger" role="alert">
    <i class="fa fa-exclamation-triangle fa-5x pull-left"></i> <strong>Warning:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus augue eros, elementum sed scelerisque eget, rhoncus in orci. Vivamus ac tellus in lacus consectetur dapibus et sit amet odio. Proin iaculis porttitor nulla ac convallis. Nullam posuere egestas lectus, eu facilisis nulla egestas eu. Phasellus quis sapien elementum, volutpat enim id, suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
  </div>

Screen

enter image description here

Question

I'm using Font Awesome within a Bootstrap alert as the above code and screen. I would like it so that the Font Awesome icon is centered vertically and all the text is on the right i.e. the two last lines shown in the screen are on the right as the lines above them.

Is there some way to do this in Font Awesome or should I just use Bootstrap columining to do it?

like image 218
user3973427 Avatar asked Sep 16 '14 09:09

user3973427


1 Answers

You can use bootstrap columns and then align them vertically:

HTML

<div class="alert alert-danger" role="alert">
  <div class="row vertical-align">
    <div class="col-xs-2">
        <i class="fa fa-exclamation-triangle fa-5x"></i> 
    </div>
    <div class="col-xs-10">
        <strong>Warning:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus augue eros, elementum sed scelerisque eget, rhoncus in orci. Vivamus ac tellus in lacus consectetur dapibus et sit amet odio. Proin iaculis porttitor nulla ac convallis. Nullam posuere egestas lectus, eu facilisis nulla egestas eu. Phasellus quis sapien elementum, volutpat enim id, suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
    </div>
  </div>
</div>

CSS

.vertical-align {
    display: flex;
    align-items: center;
}

Here's a working bootply: http://www.bootply.com/d9RijiwsF0

like image 67
ChaoticNadirs Avatar answered Oct 06 '22 23:10

ChaoticNadirs