Bootstrap switch between class when in tablet or phone viewport

Question

I have this div:

<div class="col-lg-6 col-md-6 col-sm-6">
    <p class="btn-toolbar pull-right">Some Content</p>
</div>

I want to know if its possible when the page is in tablet mode (e.g. col-md-6) I want to change the paragraph class instead of pull-right I want to set to pull-left.

Is it possible?

Bootstrap already has predefined selectors for tablet / mobile / desktop responsive etc. Have you tried any of those? — Dr Upvote, Jun 17 '15 at 21:42

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

Yes, you will want to use media queries in your css to set the rules differently. If you want the same effect for col-lg-6 you only need to define it in the media query for col-md-6

Keep in mind you only need to define col-sm-6 in your HTML, because it is mobile first the larger sizes will follow suit. You only need to specify the larger values when you want it to change

edited May 23 '17 at 11:51

Community

1
1

answered Jun 17 '15 at 21:36

Jon Harding

4,928
13
51
96

score 0 · Answer 2 · answered Jun 17 '15 at 21:39

0

Yes, but the only way I can see you doing it without messing with media queries is by basically copying all your HTML and applying different classes to each "set" of code you have.

For the HTML that is to appear on a phone, you may want

<div class="col-lg-6 col-md-6 col-sm-6 visible-xs">
                             <p class="btn-toolbar pull-right">
                 Some Content
                    </p>
                            </div>

For tablets?

<div class="col-lg-6 col-md-6 col-sm-6 visible-md">
                             <p class="btn-toolbar pull-left">
                 Some Content
                    </p>
                            </div>

Probably not super-efficient but this way you'd be able to have absolute control over every detail of any "version" of your site loaded on a given device.

answered Jun 17 '15 at 21:39

TRose

1,718
1
16
32

as you mentioned this would not be efficient. It also adds extra unnecessary markup. – Jon Harding Jun 17 '15 at 21:47
I am well-aware of that. But it is easy to understand and allows for greater control over different parts of a given page on different devices. I saw your answer, which was good, but decided to give my two cents anyway. It all depends on what the OP gives more credence to. – TRose Jun 17 '15 at 21:49
I highly disagree, you approach completely butchers the power of bootstrap. Not understanding it means you need to study it more – Jon Harding Jun 17 '15 at 21:51
Thanks for your input. – TRose Jun 17 '15 at 21:51

score 0 · Answer 3 · answered Jun 18 '15 at 10:00

You could override the pull-right on tablet or above screen sizes, surely? This avoids splitting the content across two divs as previously stated. I agree, the code splitting nullifies Bootstrap's use, and adds redundant code that could become pretty unmanageable as the content scaled over time.

@media all and (min-width: 768px) and (max-width: 1200px) {
     p.btn-toolbar.pull-right {
           float:     left !important;
     }
}

Bootstrap switch between class when in tablet or phone viewport

3 Answers3