2 // Responsive: Utility classes
3 // --------------------------------------------------
6 // IE10 in Windows (Phone) 8
8 // Support for responsive views via media queries is kind of borked in IE10, for
9 // Surface/desktop in split view and for Windows Phone 8. This particular fix
10 // must be accompanied by a snippet of JavaScript to sniff the user agent and
11 // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
12 // our Getting Started page for more information on this bug.
14 // For more information, see the following:
16 // Issue: https://github.com/twbs/bootstrap/issues/10497
17 // Docs: http://getbootstrap.com/getting-started/#support-ie10-width
18 // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
19 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
26 // Visibility utilities
27 // Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
32 .responsive-invisibility();
37 .visible-xs-inline-block,
40 .visible-sm-inline-block,
43 .visible-md-inline-block,
46 .visible-lg-inline-block {
47 display: none !important;
51 @media (max-width: @screen-xs-max) {
52 .responsive-visibility();
56 @media (max-width: @screen-xs-max) {
57 display: block !important;
61 @media (max-width: @screen-xs-max) {
62 display: inline !important;
65 .visible-xs-inline-block {
66 @media (max-width: @screen-xs-max) {
67 display: inline-block !important;
72 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
73 .responsive-visibility();
77 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
78 display: block !important;
82 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
83 display: inline !important;
86 .visible-sm-inline-block {
87 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
88 display: inline-block !important;
93 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
94 .responsive-visibility();
98 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
99 display: block !important;
103 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
104 display: inline !important;
107 .visible-md-inline-block {
108 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
109 display: inline-block !important;
114 @media (min-width: @screen-lg-min) {
115 .responsive-visibility();
119 @media (min-width: @screen-lg-min) {
120 display: block !important;
124 @media (min-width: @screen-lg-min) {
125 display: inline !important;
128 .visible-lg-inline-block {
129 @media (min-width: @screen-lg-min) {
130 display: inline-block !important;
135 @media (max-width: @screen-xs-max) {
136 .responsive-invisibility();
140 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
141 .responsive-invisibility();
145 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
146 .responsive-invisibility();
150 @media (min-width: @screen-lg-min) {
151 .responsive-invisibility();
158 // Media queries are placed on the inside to be mixin-friendly.
160 // Note: Deprecated .visible-print as of v3.2.0
162 .responsive-invisibility();
165 .responsive-visibility();
168 .visible-print-block {
169 display: none !important;
172 display: block !important;
175 .visible-print-inline {
176 display: none !important;
179 display: inline !important;
182 .visible-print-inline-block {
183 display: none !important;
186 display: inline-block !important;
192 .responsive-invisibility();