learner learner - 6 months ago 14
CSS Question

Getting rid of padding or marging from bootstrap columns

I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the

<link>
's the code below is my site's structure:

<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>




Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:

layout with class=container

Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
layout with class=container-fluid

What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?

Answer

by default col-* have padding so you just need to reset them

[class^="col"] {
  padding: 0
}
[class$="-2"] {
  background: orange
}
[class$="-10"] {
  background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
      <div class="loader">
        <div class="loader-bg">
          ...
        </div>
      </div>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
      <div class="black-box">
        <p class="info-message">Coming <span>VERY</span> soon!</p>
        <p class="text-message">Until then, my contacts:</p>
        ...
      </div>
    </div>
  </div>