shell shell - 6 months ago 25
HTML Question

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?

Answer

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