0

I have a div inside a Bootstrap container-fluid like so:

<div class="container-fluid">
  <div class="col-md-12 myDiv">
  </div>
</div>

My CSS:

.myDiv {
  height: 200px;
  background-color: red;
}

But of course, the background of myDiv doesn't go all the way to the edges of the view, since container-fluid has padding/margin on it. Anyway to over come this?

2 Answers2

4

If you want to use bootstrap element then use class row so it will overcome the issue of container-fluid or else you can use custom class(in my case .pd_none).

With row demo

.myDiv {
    height: 200px;
    background-color: red;
}

HTML:

<div class="container-fluid">
    <div class="col-md-12 myDiv row"></div>
</div>

With custom class

.myDiv {
  height: 200px;
  background-color: red;
}
.pd_none{padding:0px !important;margin:0px !important;}

HTML:

<div class="container-fluid pd_none">
  <div class="col-md-12 myDiv ">
  </div>
</div>

For more detail here is link

Community
  • 1
  • 1
Leo the lion
  • 3,164
  • 2
  • 22
  • 40
0

You can simply override your div (not a good practice to override the divs of bootstrap, but if requirement says then we need to )

.col-md-12.myDiv{
   margin:0px;
   padding:0;
}

And this shall work.

{By default 15px pad is added on each side of the col by default}

Karan Tewari
  • 498
  • 8
  • 20
  • can you please explain how it will work? as it won't work. – Leo the lion Dec 07 '15 at 10:06
  • Currently col-md-12 has class name as mydiv, so I just gave the css for the mydiv. mydiv being a part of grid div of bootstrap takes 15px padding on both of its sides by default. So once we give padding as 0 there that 15px is overrided and the resultant div wont take occupy those ones. – Karan Tewari Dec 10 '15 at 08:49
  • sorry but if you will try this code then you will see there is still margin means its not working. see here http://jsfiddle.net/Leo_the_lion/vqxqw1oq/ – Leo the lion Dec 10 '15 at 09:50
  • and off topic : one advise for you, when you are not able to understand the question then please don't post low answer as your both answer doesn't working so please remove them. Thanx – Leo the lion Dec 10 '15 at 09:53