CODEWITHSUNDEEP
csstwitter-bootstrappanelresponsiveness
kylebellamy
kylebellamy

Reputation: 993

Bootstrap 3 Panels in responsive view

I am using four panels in a layout, each full width. They stack nicely in sm and xs views as they should. I've set the panels to have no styling when in md and lg view sizes which works as it should.

How would I get them to display collapsed when in sm and xs views only? Currently, they are open which is ok but given the height of some of the data, it would be better if I could have the initial state be collapsed.

Can't put code here as it is filled with loads of other database, js and other things as we are still building it and that has not been cleaned up into files.

Upvotes: 0

Views: 23386

Answers (1)

ccdiego5
ccdiego5

Reputation: 666

1) need div class="row"

2) col-xs- is auto, for all dont need to call others col-sm, md or lg anyway will work like col-xs, col-sm, col-md and and col-lg see here Grid-options

<div class="row">
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Basic panel example
            </div>
        </div>
    </div>
</div>

Now if you want to display only for col-lg and col-md

You need this:

<div class="row">
    <div class="col-md-6 col-lg-6 visible-md visible-lg hidden-xs hidden-md">

    </div>
</div>

Upvotes: 6

Related Questions