6

I have a Bootstrap alert and I want the width to fit the content. In the Bootstrap documentation it appears the default is to have 100% width. What is the most robust way to make the alert exactly fit its content on all screen sizes?

<div class="container">
    <div class="alert alert-danger">
        My short alert message.
    </div>
</div>
KyleMit
  • 30,350
  • 66
  • 462
  • 664
Dylan Klomparens
  • 2,853
  • 7
  • 35
  • 52
  • Off hand, I don't know of "some CSS" that will fit it to the content. Additionally, maybe there is a built in Bootstrap class that can do it? I couldn't find one by searching through the documentation. – Dylan Klomparens Jul 10 '15 at 13:59
  • 1
    Start playing around with your browser's inspector and try some stuff. I'd suggest starting with floats, or turning it into an inline-block element. SO isn't really a "write me code because I don't want to experiment" place. – ceejayoz Jul 10 '15 at 14:19

1 Answers1

18

You just need to add display: inline-block

Demo in Stack Snippets:

.alert-trim {
  display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css">

<div class="container">
  <div class="alert alert-danger">
    Normal Alert Message
  </div>

  <div class="alert alert-danger alert-trim">
    Trimmed Alert Message
  </div>
</div>

See Also: Is it really impossible to make a div fit its size to its content?

KyleMit
  • 30,350
  • 66
  • 462
  • 664