Fit to content for Bootstrap alert [duplicate]

Question

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>

Answer 1

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?