CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Peronia
Peronia

Reputation: 11

Bootstrap 3 unwanted padding despites container-fluid class

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

Upvotes: 1

Views: 1122

Answers (3)

Peronia
Peronia

Reputation: 11

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...

Upvotes: 0

Piotr Białek
Piotr Białek

Reputation: 2709

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.

Upvotes: 0

Banzay
Banzay

Reputation: 9470

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;`
}

Upvotes: 2

Related Questions