Clever Geek Handbook

Make visible and invisible div tag in bootstrap

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

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

How can i do this?

+3


source to share


2 answers


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

In this particular case, you can, for example, use a class visible-xs-block

to make it <div>

visible only on the xs breakpoint used for mobile phones, and a class hidden-xs

to make it <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>
Run codeHide result


+3


source


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

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


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

+1


source






More articles:


All Articles