Bootstrap Container Fluid not 100%

Question

I trying to achieve the following:

Background grey on the full row.
Background image on the middle with 60% size or rather I would love to make that div contain only 60% of the middle and content all at the background itself.

The issue now is that there is white space at the left and right side of the container, its not full width. I think its issue with bootstrap, I tried google and tried a lot way but still doesn't resolve.

Hopefully someone can help me here . Thanks!

My demo site: http://128.199.129.158/

You could use browser inspector or firebug to see what is going wrong in the DOM. — Loenix, May 12 '15 at 05:12
possible duplicate of [100% width Twitter Bootstrap 3 template](http://stackoverflow.com/questions/18449918/100-width-twitter-bootstrap-3-template) — BENARD Patrick, May 12 '15 at 06:41

Anubhav pun · Accepted Answer · 2015-05-12T06:54:05.260

1

just to remove <div class="col-xs-12"> because it gives padding from left and right side by removing it you will get no white space from left and right side

edited May 12 '15 at 06:54

answered May 12 '15 at 05:14

Anubhav pun

1,323
2
8
20

Agreed. There is no requirement for you to have a container at that level. The navigation should probably site within a
tag or nothing at all.
– Aaron Vanston May 12 '15 at 06:14

score 0 · Answer 2 · answered May 12 '15 at 05:17

0

Is this what you are after ? Fiddle.

.top-banner{
background-image: url("http://128.199.129.158/background.png");
background-repeat: repeat;
background-position: center center;
background-size: 100%;
width:60%;
margin-left: 20%;
}
#nav
{
 z-index:1000;
 margin-left: -15px;
}
.bg-gray{
background-color: #777;
}

answered May 12 '15 at 05:17

AngularJR

2,752
2
16
19

I had another look at your code. And I see that that main issue you have re the padding on the left is actually the first div that you have the class 'container-fluid'. this is not needed and if removed it then takes up the full width. I removed some parts that make it all work as you like . Check out my Fiddle above. – AngularJR May 12 '15 at 07:47

score -1 · Answer 3 · answered May 12 '15 at 05:02

-1

modify the below in your bootstrap.min.css

.container-fluid
{
 padding-left:0;
 padding-right:0;
}

answered May 12 '15 at 05:02

Karthik N

515
2
9
22

1

We should never modify the bootstrap sources, but he has to use it correctly. – Loenix May 12 '15 at 05:09
then he can write it in his own css and make sure with !important; – Karthik N May 12 '15 at 06:18

Govind · Answer 4 · 2018-04-03T05:08:02.883

-1

enter image description here

No point of adding col-xs-12 div.

Hope this solve your problem.

edited Apr 03 '18 at 05:08

answered May 12 '15 at 05:19

Govind

162
10

Loenix · Answer 5 · 2015-05-12T05:16:18.950

The issue is that you use the container-fluid class, this is not that purpose here... You should use a container when you want to size a container in your page but if you want your background in full-width, put it out of the container. You could also have multiple container in your page.

The simplest way to resolve your problem is to remove .container-fluid, pur your background out the section and define a .container inside.

Exemple:
Full Background menu
--Container of the menu
----Menu
Slider Background
--Container of the slider
----Slider
Promo Title Background
--Container of the Promo Title
----Promo Title

Bootstrap Container Fluid not 100%

5 Answers5