CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
shell
shell

Reputation: 1937

Bootstrap nested columns seems to leave extra space

When I do something like this in a row:

<div class="col-sm-2">
    <div class="col-sm-10" style="height: 100%; margin: 0px; padding: 0px;">
    </div>
</div>
<div class="col-sm-6">
</div>

there will be a space between col-sm-2 and the col-sm-6 where the nested columns don't fill the entire col-sm-2 width. How do you fix this?

Upvotes: 0

Views: 908

Answers (2)

Baruch
Baruch

Reputation: 2428

I added a comment, I will answer to give a detailed explanation.

Every col- has a padding in the bootstrap css, in order to remove that padding and have nested col-s not show that extra padding you have to add the class row to the parent div.

So change <div class="col-sm-2"> to <div class="col-sm-2 row"> and remove margin: 0px; padding: 0px; from nested div.

Hopefully I understood your question correctly.

Working Fiddle:

https://jsfiddle.net/xp661ow3/

This is how it looks on my end enter image description here

Edited to fix some typos

Upvotes: 1

Eezo
Eezo

Reputation: 1771

Because either of this (or both, depend on your intend):

  • The nested column use .col-sm-10, while to full you should you .col-sm-12
  • Still not full? Maybe you want use padding:0 in your .col-sm-2

Upvotes: 1

Related Questions