CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sergi
Sergi

Reputation: 1240

Weird "padding" between bootstrap columns

I can't seem to figure out why there's a white space in between my columns in this really simple row. I would like the elemenets to be touching each other and to fill up the 100% of the column space which they don't even with a 100% width? Added a universal selector with a border so the empty space is visible.

* {
  border: 5px solid;
}
.long-brick1 {
  width: 100%;
  height: 100px;
  background-color: red;
  border: 1px solid;
}
.long-brick2 {
  width: 100%;
  height: 100px;
  background-color: blue;
  border: 1px solid;
}
.long-brick3 {
  width: 100%;
  height: 100px;
  background-color: green;
  border: 1px solid;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>

  <div class="row">
    <div class="col-md-2">
      <div class="long-brick1">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick2">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick3">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick2">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick3">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick2">
      </div>
    </div>
  </div>
  <!--row -->

</body>

</html>

Upvotes: 0

Views: 136

Answers (3)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

* {border:5px solid;
  padding-left: 0px !important;
 padding-right: 0px !important;  
 }

try this as a instant solution. its better to use custom class like

   .nopad{ 
     padding:0 !important;
    }
   .nomargin{
     margin: 0px !important;
    }

and call this class when you need them like-

<div class="col-md-2 nopad">
 <div class="long-brick2">   
 </div>
</div>

maybe you are confused about '!important' [ A rule that has the !important property will always be applied no matter where that rule appears in the CSS document] Happy coding :)

Upvotes: -1

nyedidikeke
nyedidikeke

Reputation: 7618

By default Bootstrap col-* have padding-left and padding-right of 15px each.

To get rid of the default padding, you need to apply your custom style to that effect.

You need to do something like this:

.col-md-2 {
    padding: 0;
}

Upvotes: 2

Francesco Abeni
Francesco Abeni

Reputation: 4265

As far as I can see, your sample shows perfectly normal Bootstrap behaviour. Any col-* div will have a left and right padding of 15 px.

See http://getbootstrap.com/css/#grid-intro for additional information about Bootstrap grid system.

Of course you may override this default behaviour by resetting this default padding for col-md-2 or any other desired class:

.col-md-2 {padding: 0}

Upvotes: 2

Related Questions