shell shell - 1 year ago 165
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 class="col-sm-6">

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 Source

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:

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

Edited to fix some typos

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download