hiding display using bootstrap

Question

I tried the below code for display in different ways in mobile and desktop. but both the sentences are displaying at the same time.

<div>
    <div class="hidden-xs hidden-lg hidden-sm visible-md">  
        Page-under-Construction.Please-try-again-later.  
    </div>  
    <div class="hidden-md hidden-lg visible-xs">  
        Page-under-Construction.  
    </div>
</div>

Vault Dweller · Answer 1 · 2015-05-08T05:35:05.570

1

Use either hidden or visible (try not to use visible, see below), not both in the same class

Bootstrap Responsive Utilities

<div>
<div class="hidden-xs hidden-sm">  
    Page-under-Construction.Please-try-again-later.  
</div>  
<div class="hidden-md hidden-lg">  
    Page-under-Construction.  
</div>

edited: as pointed out below "visible" is now deprecated (see Drew Thomas' answer for explaination)

edited May 08 '15 at 05:35

answered May 08 '15 at 04:37

Vault Dweller

135
2
10

score 1 · Answer 2 · answered May 08 '15 at 05:11

1

Simple Sample

Also check this documentation from Twitter Bootstrap.

Visible to mobile only :

<div class="visible-xs">
    Content to show in mobile  
</div>

Hidden to mobile only :

<div class="hidden-xs">
    Content to show in mobile  
</div>

answered May 08 '15 at 05:11

jofftiquez

7,548
10
67
121

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

To expand on the other two answers:

Do only use hidden or visible on a single element (as mentioned)
Be aware that visible-* is deprecated now. Instead, there should be a display property at the end. An example is visible-md-block . See this thread: Hiding elements in responsive layout?

Here's a plunker using the code you provided: http://plnkr.co/edit/brjPCsh578WGu5Eq1rWl?p=preview

<div class="hidden-xs hidden-sm">
    Page-under-Construction. Please-try-again later.
</div>  
<div class="hidden-md hidden-lg">  
    Page-under-Construction.  
</div>

edited May 23 '17 at 12:14

Community

1
1

answered May 08 '15 at 05:29

Drew Thomas

51
3

do I need to change any settings in browser,for this purpose?bcz, the code works fine in plunker...but not in firefox in my system – surya baby May 08 '15 at 05:42
No problem. To be clear, visible itself is not deprecated, just without a display property at the end. The thread I mentioned has a thorough explanation. – Drew Thomas May 08 '15 at 05:42
@suryababy No, you shouldn't need to change a setting in your browser. My guess would be an issue with load order or having an older version of bootstrap. – Drew Thomas May 08 '15 at 05:47

hiding display using bootstrap

3 Answers3