5

I use bootstrap to design my web UI, and now I have a requirement as below:

I define the below div structure as their div ids are : part1 and part2

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="part1" class="col-md-6">
                    <div>
                        xxxx
                    </div>
                </div>
                <div id="part2" class="col-md-6">
                    <div>
                        yyy
                    </div>
                </div>
            </div>
        </div>
    </div>

Now I want to hide the part1 automatically when shrink browser window size or my phone browser , How can I achieve this effect ?

I try to add css "collapse" to part1 as <div id="part1" class="col-md-6 collapse">, but it hides directly even my browser is larger.

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
Jerry Cai
  • 571
  • 2
  • 8
  • 18

3 Answers3

19

Right Answer for Bootstrap 3

Use utility classes for showing and hiding content by decice via media query. Try to use thses on a limited basis and avoid creating entirely differnet versions of the smae site. Instead, use them to complement each device's presentation.

Screenshot of Bootstrap responsive utility classes

Source: http://getbootstrap.com/css/#responsive-utilities

XY L
  • 25,431
  • 14
  • 84
  • 143
4

This is a working code, I have tested..

    <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ">.col-md-4</div>
    <div class="col-md-4 visible-lg">.col-md-4</div>
    </div>
Prasanna Aarthi
  • 3,439
  • 4
  • 26
  • 48
  • Yes , it works , but it's behavior is strange or un-expected , Since if I resize the browser on md size , it works , but when I continue resize browser size to more smaller as sm , but it can't be hidden . Do you know something about the min-size or max-size related features ? I am a fresh man on web design and bootstrap , thank you in advance . – Jerry Cai Aug 26 '13 at 10:14
  • If you need a solution using min-widtha and max-width, you need to use media queries – Prasanna Aarthi Aug 26 '13 at 10:18
  • Could you give me a brief demo code based on bootstrap ? Thank you again . – Jerry Cai Aug 26 '13 at 10:21
  • Refer the link in your media query add #urid{display:none} – Prasanna Aarthi Aug 26 '13 at 10:26
  • This code resolves the issue with small screen sizes also, try this
    .col-md-4
    .col-md-4
    .col-md-4
     – Prasanna Aarthi Aug 26 '13 at 10:29
  • Thank you so much , Prasana . Seems visiable-* works as my expected . another question is : actually , we are depressed to use media query , right ? since it will have lot of mantain effort , I think . – Jerry Cai Aug 26 '13 at 10:37
  • Actually , I feel that bootstrap is fulfil my daily requirments largely with very simple solutions , and it can reduce my effort to design the web application . but How to integration and have conflict with Jquery maybe a problem , sometimes , I want to use the Jquery UI too. Do you have more further experience ? – Jerry Cai Aug 26 '13 at 10:40
0

Use visiblity classes in bootstrap hidden-phone hidden-tablet based on your requirements

 <div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            <div id="part1" class="col-md-6 hidden-phone">
                <div>
                    xxxx
                </div>
            </div>
            <div id="part2" class="col-md-6">
                <div>
                    yyy
                </div>
            </div>
        </div>
    </div>
</div>
Prasanna Aarthi
  • 3,439
  • 4
  • 26
  • 48