Drew Drew - 1 month ago 6
CSS Question

Bootstrap: why are my column not taking the full width but the last goes on different line?

why are my column not taking the full width but the last goes on different line?

enter image description here

enter image description here

sorry guys just realised they had margins on them. Thought it worked like flexbox

enter image description here

Thanks!!

Answer

Remove the margin from thumbnail and make an inner div which has a padding.

So basically remove the thumbnail classes from the column divs and add the thumbnail divs as child ones. Then change the margin css to padding

The margin makes it go onto the next line

HTML would be something like

<div class="col-xs-2">
        <div class="thubmail-1">
                   Content
        </div>
 </div>

And css

.thubmail-1{
    background-color: green;
    padding: 5px;
    color: white;
}

Or something like that (on my phone)

Comments