Bootstrap column full content background-color

Question

This is what I want to do : enter image description here

And this is what I have : enter image description here

And this is my code :

Html

<div class="row">
  <div class="col-md-4">col-md-4</div>
  <div class="col-md-6">col-md-6 ...</div>
  <div class="col-md-2">col-md-2</div>
</div>

Css

.col-md-4,.col-md-2 {
background-color: #e3e3e3;
}

.col-md-6 {
background-color: #f5f3f3;
}

I checked other questions on the subject but I'm not satisfied with the answers... can someone help me to improve my code ? thank you !

thanks wijaya, i was already doing this but I forgot to add it to my question's code — Lucas B, Apr 19 '15 at 09:24
What about adding the background-color to the `.row` instead? http://jsbin.com/korizi/1/edit?css,output — Hashem Qolami, Apr 19 '15 at 09:28
If you want to fill a column background with some colour for entire height of the row look at http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height and mark this one as duplicate — Konstantin Ivanov, Feb 17 '16 at 15:45

score 8 · Answer 1 · answered Apr 19 '15 at 10:35

Look here in JSFiddle...

I hope you are looking for this output. If yes then try the following code:

Ouput of the JSFiddle code

HTML:

<div class="row">
    <div class="col-md-4 row-height">
        <span>col-md-4</span>
    </div>
    <div class="col-md-6 row-height">
        col-md-6
    </div>
    <div class="col-md-2 row-height">
        col-md-2
    </div>
</div>

And CSS:

.row {
    padding: 100px;
}

.row-height {
    height: 70px;
    text-align: center;
    padding-top: 25px;
}

.col-md-4,.col-md-2 {
    background-color: #e3e3e3;
}

.col-md-6 {
    background-color: #f5f3f3;
}

.col-md-4 {
    border-radius: 15px 0 0 15px;
}

.col-md-2 {
    border-radius: 0 15px 15px 0;
}

You can modify the CSS the way you want and sizes in the styles according to the content.

Hope this helps...

score 2 · Answer 2 · answered Apr 19 '15 at 11:20

2

You could color the entire .row and then the middle column separately..

.row {
    background-color: #e3e3e3;
    border-radius: 15px;
}

.col-md-6 {
    background-color: #f5f3f3;
}

http://codeply.com/go/FXSkrecwwI

answered Apr 19 '15 at 11:20

Carol Skelly

351,302
90
710
624

It doesn't work if there is larger content in left column. – Web_Developer Jul 05 '17 at 05:43

score 1 · Answer 3 · edited Jan 24 '20 at 17:42

1

Try this CSS:

.row {
  display: table; 
  width: 100%; 
}

.col {
  display: table-cell;
}

.col-md-4,
.col-md-2 {
  background-color: #e3e3e3;
}

.col-md-6 {
  background-color: #f5f3f3;
}

edited Jan 24 '20 at 17:42

Arman H

5,488
10
51
76

answered Jan 02 '19 at 03:26

jeyglo

137
1
5

score 0 · Answer 4 · answered Apr 19 '15 at 09:48

0

Add a custom class say myfix to the column div elements and set height:100%;.

answered Apr 19 '15 at 09:48

Abhishek Patel

774
5
19

Bootstrap column full content background-color

4 Answers4