CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user3007115
user3007115

Reputation: 43

Bootstrap 3 div auto width not 100% of parent div

I want to make a div for showing content in a small box. I want the div to be auto width but it is always going 100% of the parent div, is div maybe not the best way?

<div class="rental-feature">
    <span class="feature-icon door"></span>
    <span class="feature-text">2222222</span>
</div>

Here is a link to an image of what I am trying to do, the content in feature text should control the width. But when I make it as is, the code always goes to 100% of the parent div.

enter image description here

Upvotes: 4

Views: 9674

Answers (2)

zessx
zessx

Reputation: 68800

Using display:inline-block; for your .feature-text class should solve your problem.

You can also use the Bootstrap .btn-group with a little bit of custom CSS to get a similar result :

<div class="rental-feature btn-group">
  <span class="feature-icon btn btn-default"><i class="icon-food"></i></span>
  <span class="feature-text btn btn-default">Food</span>
</div>
<div class="rental-feature btn-group">
  <span class="feature-icon btn btn-default"><i class="icon-glass"></i></span>
  <span class="feature-text btn btn-default">Glass</span>
</div>

.feature-icon,
.feature-icon:hover,
.feature-icon:focus {
  cursor: default;
  background: #ddd;
  border-color: #ccc;
}
.feature-text,
.feature-text:hover,
.feature-text:focus {
  cursor: default;
  background: white;
  border-color: #ccc;
}

Demo on Bootply

Upvotes: 1

Rasmus Stougaard
Rasmus Stougaard

Reputation: 433

Set the div to display:inline-block; in the css.

It should then get the width of the content instead of filling out the parent.

Upvotes: 8

Related Questions