bootstrap3x
/* Some Imp classes of Bootstrap 3x*/
1] Visibilities devicewise Ref: http://getbootstrap.com/css/#responsive-utilities
a) Hidden Devices
=========================================
.hidden-xs , .hidden-sm , .hidden-md , .hidden-lg
===============================================================
Codes
=======
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
b) Visible Devices
==============================================================
.visible-xs , .visible-sm , .visible-md , .visible-lg
==============================================================
Codes
===========================
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
=======================================
Visible xs-block
================================
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
==================================
Visible xs-display inline
================================
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
===============================
Visible xs- display-inline-block
===============================
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
============================================
visible sm
==========================================
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
========================================
Visible sm-block
======================================
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
==============================================
visible sm-inline
============================================
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
===========================================
visible sm inline-block
=============================================
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
===========================================
Visible md-
==========================================
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
====================================
visible md-block
======================================
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
==========================================
visible md-inline
========================================
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
=======================================
visible md-inline-block
======================================
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
======================================
visible-lg-
======================================
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
=========================================
visible-lg-block
=======================================
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
======================================
visible-lg-inline
=====================================
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
===================================
visible-lg-inline-block
===================================
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}