1

I have a problem with bootstrap. It always adds a padding left and right to my site. I use a "container-fluid" see this example:

...</head>
<body>
<div class="container-fluid">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>

or something like

...</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>
</div>

or like this

...</head>
<body>
<div class="container-fluid">
<div class="row col-xs-12 col-md-12">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>
</div>

or

...</head>
<body>
<div class="container-fluid">
<div class="row col-xs-12 col-md-12">
<div class="row">
<div class="top">
PAGE CONTENT WITH MORE DIVS
</div>
</div>
</div>
</div>

The padding appaer always, no chance.

What is my fault? I don't want to override with other CSS like here:

Remove padding from columns in Bootstrap 3

Peronia
  • 11
  • 2

3 Answers3

2

You need to follow a structure:

<body>
 <div class="container-fluid">
    <div class="row">
      <div class=" col-xs-12 col-md-12">
        <div class="anyclass">
          PAGE CONTENT WITH MORE DIVS
        </div>
      </div>
    </div>
  </div>
</body>

Also define body and html style 

html, body {
  width: 100%;
  margin: 0;
}

To avoid gaps you can use BS class row which has negative margins by default:

row {
    margin-right: -15px;
    margin-left: -15px;`
}
Banzay
  • 9,310
  • 2
  • 27
  • 46
  • Sorry, I tried this solution already (without define body and html style) and this don't work for me. – Peronia Dec 21 '16 at 14:33
  • Enter post the comment... ): Now I tried again with define body and html style, it won't work... – Peronia Dec 21 '16 at 14:34
0

You can define your own class, for example .remove-padding and overwrite bootstrap CSS.

.remove-padding{
  padding: 0px !important;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid remove-padding">
  <div class="top">
    PAGE CONTENT WITH MORE DIVS
  </div>
</div>

Please be careful with use !important, I used because the code snippet in stackoverflow import external CSS after my CSS. If your styles are imported before bootstrap styles, you will not need to !important to overwrite Bootstrap CSS.

Piotr Białek
  • 2,569
  • 1
  • 17
  • 26
  • As I wrote above, I preffer a solution without add a new class. It must be done with bottstrap itself, or not? – Peronia Dec 21 '16 at 14:37
  • Its only new class which reset padding, I think that is a simple and clear solution – Piotr Białek Dec 21 '16 at 14:47
  • That doesn't help me. Once I change the code the black stripes right and left gone (the padding) but a horizontal scrollbar appears... – Peronia Dec 22 '16 at 06:51
0

I resolved this by myself. The padding comes from the <div class="row col-xs-12 col-md-12">.

Here the complete HTML Code:

 <div class="container-fluid">
    <div class="row">
       <div class="col-md-12 col-xs-12 remove-padding">
          <header>
            CONTENT
          </header>
       </div><!-- .col-md-12 -->
    </div><!-- .row -->
    BODY...
 </div><!-- .container-fluid -->

Im adding the remove-padding class to disable the padding. My css:

.remove-padding{
padding: 0px !important;
}

And the default bootstrap CSS:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

Why adds bootstrap here padding and nothing removes it? Im worried...

Peronia
  • 11
  • 2