CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Junior
Junior

Reputation: 11992

css bootstrap "Contextual backgrounds" shows with no padding

I am trying to use css bootstrap framework. I want to use the "Contextual backgrounds" block like the docs show.

Here is a screenshot from the docs enter image description here

So I tried to do something like this:

<div>
    <p class="bg-warning">
        Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.
    </p>
</div>

The problem is that the block is showing with no padding. The block shows with the correct background but it does not have the padding.

I know I can manually add style to add the padding, but I should not have to do that. Am I doing something wrong here?

Here is a screenshot of what the code is showing:

enter image description here

Upvotes: 0

Views: 1347

Answers (1)

Tim Lewis
Tim Lewis

Reputation: 29297

The example from the Bootstrap documentation uses some custom classes to show the background colors in a custom container. By default, bg-primary, bg-success, etc only define the background-color attribute of the element they are applied to.

If you want the padding, you can use one of these other alternatives.

Alerts

<div class="alert alert-warning">
  <p style="color:black;">Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.</p>
</div>

List Groups

<ul class="list-group">
  <li class="list-group-item list-group-item-warning" style="color:black;">Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.</li>
</ul>

Panels

<div class="panel panel-warning">
    <div class="panel-heading">
      <p class="panel-title" style="color:black;">
        Now the following question can be answered on a scale of 1 to 10 where "1" means "Poor" and "10" means "Excellent" or any number in between.
      </p>
  </div>
</div>

Note: Using style="color:black;" changes the text color to black, as the default yellow text on yellow background looks a little silly (but feel free to change it to your liking.)

And here's a Bootply to show these in action.

Upvotes: 3

Related Questions