How can I hide / remove a class based on Bootstrap media query breakpoints?
Is it possible to show / hide the class depending on the screen size of the device? I am using the default boot media query. I have default settings:
/* Bootstrap Media Query Breakpoints
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {...}
/* Extra Small Devices, Phones equivalent to class xs */
@media only screen and (min-width : 480px) {...}
/* Small Devices, Tablets equivalent to class sm */
@media only screen and (min-width : 768px) {...}
/* Medium Devices, Desktops equivalent to class md */
@media only screen and (min-width : 992px) {...}
/* Large Devices, Wide Screens equivalent to class lg */
@media only screen and (min-width : 1200px) {...}
I have a div like this:
<div class="col-xs-12 ol-sm-6 col-md-6">
<div class="pull-right">
<ul class="header_links">
<li>
<a href="#">Member</a>
</li>
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Member Registration</a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Cart: 0</a>
</li>
</ul>
<ul class="social_media_links">
<li>
<a href="#">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-tumblr-square"></i>
</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
What I want is if the media query is in col-xs- #, the right to extract the class will be hidden or removed. Is this possible in bootstrap?
source to share
Bootstrap has built-in utility classes for hiding / showing content based on the viewport.
http://getbootstrap.com/css/#responsive-utilities
.visible-xs-*
and .hidden-xs
(* = block, inline-block, or inline)
EDIT
You won't be able to override .pull-right
because it uses !important
and only one rule ( float: right;
) applies , so it's pretty easy to recreate it as a custom class.
.pull-right-custom {
float: right;
}
@media only screen and (max-width : 480px) {
.pull-right-custom {
float: none;
}
}
Edit # 2
If you want to keep the original bootstrap character it will look like this: sm
indicates that it pulls directly onto sm
or larger viewports (for semantics).
.pull-right-sm {
float: none;
}
@media only screen and (min-width : 480px) {
.pull-right-sm {
float: right;
}
}
source to share
I think the correct way to do this is using Bootstrap Responsive Utilities .
Take a look at the source code of the mixins visibility definition as a reference, you can use them to extend your own classes, for example:
/* make sure that you've imported Bootstrap */
@import "bootstrap/less/bootstrap.less";
.pull-right-custom {
.pull-right; /* to make element behave exactly like .pull-right; */
.visible-xs-block; /* to make element visible only on extra-small screens, etc... */
}
Or if you are using precompiled or some CDN compatible version of Bootstrap, just add these classes directly to your html like this:
<div class="pull-right visible-xs-block">
...
</div>
source to share