Set bootstrap panel width to text width

Question

I'm new to HTML/Boostrap so maybe this is fairly easy - How do you set the panel width of a bootstrap panel to the length of it's text?

If it isn't possible with a panel, is there a similar bootstrap component that anyone knows of that I can use? The closest thing I've seen are labels, but they are too small.

Answer 1

Make the Bootstrap panel more modest

Let's use the Basic panel example. We have to set the display property as inline-block for two classes: .panel and .panel-body.

We can do it by using of special CSS-class or id. Check the result:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#modest,
#modest .panel-body,
.panel-modest,
.panel-modest .panel-body {
  display: inline-block;
}

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

<div class="panel panel-default panel-modest">
  <div class="panel-body">
    Modest panel uses class
  </div>
</div>

<div id="modest" class="panel panel-default">
  <div class="panel-body">
    Modest panel uses id
  </div>
</div>