CODEWITHSUNDEEP
htmltwitter-bootstrap
tim8691
tim8691

Reputation: 13

Twitter Bootstrap: add padding between grid rows that only appears when rows stack

I'm using Twitter Bootstrap for a simple one-row two-column grid. Everything looks fine for small, medium, and large sizes, but on the extra-small (xs) screen area, the two columns stack on top of each other to form one-column with two rows. This is also wanted. However, there is no padding or margin between these two rows stacked on top of each other.

Where should I add padding or margin such that there is some space between these two stacked rows? But otherwise, when they're not stacked, and there's no need for this padding or margin, that there's not unnecessary padding or margin showing.

Upvotes: 1

Views: 428

Answers (1)

Michael Parker
Michael Parker

Reputation: 12966

I don't have your code so I don't know what exactly you have been doing, so I'm going to make assumptions based off what I would do.

I'm assuming that you have your columns defined like so:

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">col 1</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">col 2</div>

One might make the guess that you would just need to define a new rule in your stylesheet that gives padding to the col-xs-12 class like so:

.col-xs-12 {
    padding: 5px 5px;
    margin: 5px 0px;
}

However, doing this alone will also apply those properties to your columns even if the screen size isn't xs. So, I applied a workaround that looks something like this:

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 hidden-xs">"col" 1</div>
        <div class="col-lg-6 col-md-6 col-sm-6 hidden-xs">"col" 2</div>
        <div class="visible-xs col-xs-12">"row" 1</div>
        <div class="visible-xs col-xs-12">"row" 2</div>
    </div>
</div>

The idea is that you can just hide your xs class until it's actually needed, and display your other one in the meantime.

You can see the result here. Adjust your screen size from large to extra-small and observe how margin and padding changes.

Upvotes: 2

Related Questions