CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Vinith Almeida
Vinith Almeida

Reputation: 1471

Avoiding a div only for styling on bootstrap 4

<div class="container-fluid">
  <div class="row">
    <div id="div#1" class="item color col-md-6">
      col-md-6
    </div>
    <div id="div#2" class="item col-md-6">
      <div class="color">
        col-md-6
      </div>
    </div>
  </div>
</div>

.color {
  background-color: yellow;
}

In the above example div#1 has the color class applied to it and as a result the entire div (stretched to the leftmost end) gets the styling. This works only on large screens so here's a screenshot of it.

enter image description here

https://codepen.io/vbcda/pen/dgLVPy

My intention is to just keep the background color to the content area and not go till the edge of the document.

One solution is to use another div within to just apply styling like in div#2.

Now this is exactly how I want it to be but I really don't want to use an extra div just for styling.

I want to avoid the "divititis". What can I do?

Upvotes: 0

Views: 44

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

Use CSS background-clip to make it not fill the padding area...

.color {
  background-color: yellow;
  background-clip: content-box;
}

https://codepen.io/anon/pen/LgvXOj

Upvotes: 3

Related Questions