CODEWITHSUNDEEP
csstwitter-bootstrap
user3702540
user3702540

Reputation: 3

Bootstrap 3 - background-color issue

I am developing a website using the Bootstrap 3 framework and am having an issue when applying a background color to certain page elements.

For example, I have a simple div with the class name "tag" that I have given a background color of #ececec to and padding of 5px 10px 5px 10px. Within the div I just a short piece of text such as "lorem ipsum". The result of this ordinarily would be for the text to have a light-grey background and for there to be 5px above and below the text and 10px to the left and right. For some reason the background color stretches to the full width of the parent div. I don't want to set a specific width for the div as it should contract and expand depending on the length of the text within. Please see below for sample code.

.tag {
    background-color: #ececec;
    margin-bottom: 2px;
    padding: 5px 10px 5px 10px; 
}

<div class="tag">Lorem Ipsum</div>

Upvotes: 0

Views: 7179

Answers (2)

DavidG
DavidG

Reputation: 118937

divs are by default is displayed as a block element. This means it will expand to fill the width of the container it is in. Change to use a span element instead:

<span class="tag">Lorem Ipsum</span>

Or change the CSS to modify the display property to be inline or perhaps inline-block:

.tag {
    background-color: #ececec;
    margin-bottom: 2px;
    padding: 5px 10px 5px 10px; 
    display: inline;
}

Upvotes: 2

Kisspa
Kisspa

Reputation: 584

.tag {
  background-color: #ececec;
  margin-bottom: 2px;
  padding: 5px 10px 5px 10px; 
  display:inline-block;
}

Upvotes: 0

Related Questions