17

I'm trying to put a glyphicon on the left side of an alert div. When the alert's text is more than one line, I want the new line to start where the first line's text started, rather than under the glyphicon.

If I use divs for the icon and message, the icon sits on top of the message. If I use spans, the message follows the icon and wraps under it.

Assume the glyphicon's width is not known ahead of time, so using the ::first-line selector isn't viable without something more clever than I. I also don't want to put the glyphicon in a .col-* because .col-*-1 is way too large. .pull-left and .pull-right haven't seemed to have an effect, regardless of whether I use a div or a span for the glyphicon and message.

The easiest solution is to use a table (le gasp!), but I'm trying to avoid that.

I'm also still deciding whether I want the icon to be at the top left or middle left of the alert. Even with a table, I was having trouble centering the icon vertically.

What I have (pretty simple):

<div class="col-sm-9 col-md-10">
    <div class="col-xs-12 alert alert-warning">
        <div class="glyphicon glyphicon-exclamation-sign"></div>
        <div>My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!</div>
    </div>
<div>

Link to JSFiddle

Any ideas?

5 Answers 5

26

Try adding this to your CSS (you may need to be more specific than this)

.alert .glyphicon{
    display:table-cell;
}

.alert div,
.alert span{
    padding-left: 5px;
    display:table-cell;
}

See Updated Fiddle

4
  • Great answer. Just one more question: what if I wanted to center the icon vertically?
    – Ernesto
    Dec 14, 2016 at 10:42
  • Hi @Ernesto, ask it as another question. I'll try to answer it :)
    – blurfus
    Dec 14, 2016 at 15:07
  • 1
    @Ernesto, I quickly came up with this. Let me know if this is what you are looking for jsfiddle.net/0vzmmn0v/73
    – blurfus
    Dec 14, 2016 at 15:22
  • 1
    It works. I also just found an alternative. With display: table-cell, you can set vertical-align: middle and it works too. Thanks!
    – Ernesto
    Dec 14, 2016 at 15:29
15

There is now a cleaner (and better best practices imo) way to do this. (Updated jsfiddle from OP)

.alert {
    display: flex;
    flex-direction: row;
}

.alert .glyphicon {
    margin-right: 8px;
    align-self: center; // if you want it centered vertically
}

Virtually all browsers support flex box now. https://caniuse.com/#feat=flexbox

As an aside, bootstrap 4 no longer does glyphicons natively (though there's nothing stopping you from including the glyphicons library manually--or more commonly nowadays, fontawesome), but it does include display classes natively. You can do all this without any CSS. Bootstrap 4 jsfiddle

<div class="container">
  <div class="card bg-light mt-4">
    <div class="card-header">
      <h3>
        Bootstrap 4
      </h3>
    </div>
    <div class="card-body">
      <div class="alert alert-warning d-flex flex-row">
        <i class="fas fa-fw fa-exclamation-circle mr-3 align-self-center"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
      <div class="alert alert-info d-flex flex-row">
        <i class="fas fa-fw fa-info-circle mr-3 mt-1"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
    </div>
  </div>
</div>

To not center the icon vertically, simply remove the icons' align-self-center class. You might need to fiddle with the top margin to align it well with the text using the mt-* classes. mt-1 worked well for this example.

1
  • I prefer your first example with flex properties added to the alert css class. The display classes are so wordy Oct 6, 2020 at 12:12
7

Should be pretty straightforward with Bootstrap 4:

<div class="alert alert-warning">
    <div class="row"> <!-- add no-gutters to make it narrower -->
        <div class="col-auto align-self-start"> <!-- or align-self-center -->
            <div class="glyphicon glyphicon-exclamation-sign"></div>
        </div>
        <div class="col">
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
        </div>
    </div>
</div>

No custom CSS necessary. :)

1
  • 1
    For Bootstrap 4, this should be the way to go. It solved my problem perfectly!
    – CesarD
    Feb 22, 2019 at 18:13
3

This is a pretty simple solution using the overflow property:

.alert .glyphicon{
    float:left;
    margin-right:9px;
}

.alert div{
    overflow:hidden;
}

http://jsfiddle.net/0vzmmn0v/39/

1
  • Since the advent (and wide support) of flex box, this answer isn't as relevant, but I upvoted for the simplicity and creativity of your method. doffs cap
    – dx_over_dt
    May 14, 2018 at 17:46
2

Another way would be to position the icon

HTML:

 <div class="lftPad glyphicon glyphicon-exclamation-sign">My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div>

CSS:

.lftPad { margin-left:25px; }
.lftPad.glyphicon-exclamation-sign:before{
    position: absolute;
    margin-left: -20px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.