02.06.2015 Views

Bootstrap Tutorial

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

CHAPTER<br />

12<br />

Bootstarp Responsive<br />

Utilities<br />

<strong>Bootstrap</strong> provides some handful helper classes, for faster mobile-friendly development. These can be<br />

used for showing and hiding content by device via media query combined with large, small, and medium devices.<br />

Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are<br />

currently only available for block and table toggling.<br />

Classes<br />

.visible-xs<br />

.visible-sm<br />

.visible-md<br />

.visible-lg<br />

.hidden-xs<br />

.hidden-sm<br />

.hidden-md<br />

Devices<br />

Extra small (less than 768px) visible<br />

Small (up to 768 px) visible<br />

Medium (768 px to 991 px) visible<br />

Larger (992 px and above) visible<br />

Extra small (less than 768px) hidden<br />

Small (up to 768 px) hidden<br />

Medium (768 px to 991 px) hidden<br />

.hidden-lg<br />

Larger (992 px and above) hidden<br />

Print classes<br />

Following table lists the print classes. Use these for toggling content for print.<br />

Classes<br />

.visible-print<br />

.hidden-print<br />

Print<br />

Yes Visible<br />

Visible only to browser not to print.<br />

TUTORIALS POINT<br />

Simply Easy Learning

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!