CODEWITHSUNDEEP
csstwitter-bootstrap
S.M_Emamian
S.M_Emamian

Reputation: 17383

make visible and invisible a div tag in bootstrap

My question is very very simple.(I am a beginner in the css/html/javascript)

I would like to hide a div in mobile browser and show that div in the other devices (PC&Laptop).

how can I do?

Upvotes: 4

Views: 2017

Answers (2)

Xavi Magrinyà
Xavi Magrinyà

Reputation: 91

You can use media queries. For example you could use:

<style>
@media (max-width: 600px) {
    .my-div {
        display: none;
    }
}
</style>

More information here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Upvotes: 1

ckuijjer
ckuijjer

Reputation: 13814

Take a look at the responsive utilities documentation of Bootstrap at http://getbootstrap.com/css/#responsive-utilities.

In this specific case you could for example use the class visible-xs-block to make a <div> only visible on the xs breakpoint that's used for mobile phones, and the class hidden-xs to make a <div> visible on all other breakpoints.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="visible-xs-block">only visible on xs</div>
<div class="hidden-xs">visible on everything but xs</div>

Upvotes: 3

Related Questions