add background color on bootstrap grid column with preventing coloring default grid column padding

Question

my problem is I need to color a one bootstrap grid column background instead of coloring full grid-column, add background color on-grid except default padding.

HTML

CSS

.faq-box{
    margin: 0;
    padding: 30px;
    background-color:#EBF3FF ;
}

In here I need to prevent color full grid column, only add background color without coloring bootstrap grid default left padding(15px)

user_2245999 · Answer

Add a div inside the column, than, add the background to this div.:

.padding-here{
  padding:2em;
  background:#c4c4c4;
  width:200px;
  height:200px;
  border:1px solid black;
}
.padding-here-too{
  padding:2em;
  width:200px;
  height:200px;
  border:1px solid black;
  
}
.padding-here-too div{
  background:#c4c4c4;
  height:100%;
}

padding here

  
    padding here too

user_15051310 · Answer

If you use box-sizing: border box then padding and border will be included in the width.

.faq-box{
    box-sizing: border-box;
    margin: 0;
    padding: 30px;
    background-color:#EBF3FF ;
}

These examples make it clear:

body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 600px;
}

.parent {
  font-family: sans-serif;
  width: 140px;
  height: 100px;
  border: 10px solid #349;
  border-radius: 5px;
}

.example1, .example2, .example3 {
  width: 100%;
  height: 85px;
}

.example1 {
  background: rgba(255,230,40,.8);
  box-sizing: content-box;
}

.example2 {
  box-sizing: content-box;
}

.example3 {
  box-sizing: border-box;
}

.example2, .example3 {
  border: solid rgba(255,230,40,.8) 10px;
  padding: 5px;
}



  
    content-box

    border: none

    padding: none
  



  
    content-box

    border: 10px

    padding: 5px
  



  
    border-box

    border: 10px

    padding: 5px

user_15165677 · Answer

In your case your row needs padding

add background color on bootstrap grid column with preventing coloring default grid column padding

3 Answers