For a mobile first design botstrap provides us some classes for responsive utilities that is to view or hide in print or web or in a particular device type.
1. Responsive visibility
the class name .visible-*-* for make visible and the first * denots for xs for extra small, sm for small, md, for medium and lg for large devices and the second * denots for the block,inline, or inline-block to make display type.
Ex.
| Extra small devicesPhones (<768px) | Small devicesTablets (≥768px) | Medium devicesDesktops (≥992px) | Large devicesDesktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* | Visible | Hidden | Hidden | Hidden |
.visible-sm-* | Hidden | Visible | Hidden | Hidden |
.visible-md-* | Hidden | Hidden | Visible | Hidden |
.visible-lg-* | Hidden | Hidden | Hidden | Visible |
.hidden-xs | Hidden | Visible | Visible | Visible |
.hidden-sm | Visible | Hidden | Visible | Visible |
.hidden-md | Visible | Visible | Hidden | Visible |
.hidden-lg | Visible | Visible | Visible | Hidden |
2. Visible in web and print or Print classes:
By using the classes .visible-print-block, .visible-print-inline, .visible-print-inline-block we can make a tah visible in print only and it will be hide on web
similarly using the class name .hidden-print we can make that particular tag invisible or hidden on print but it will be visible on print.
Ex.
| Classes | Browser | |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block | Hidden | Visible |
.hidden-print | Visible | Hidden |
No comments:
Post a Comment