Responsive Utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

See the Bootstrap documentation for more information. Note that the documentation states that the utilities are not supported when used on inline elements - therefore Bootstrap.jsp will error if you attempt to set the attributes on non block level Components.

The Visible/Hidden Attributes

Use the visible attribute to set all device sizes on which the Component is visible. Use the hidden attribute to set all device sizes on which the Component is hidden. The value of both attributes is a comma separated list of device sizes: "xs", "sm", "md", and "lg",

For example, to make a Well hidden on "xs" and "md" devices, and another only visible on "xs" and "md" devices:

<%@ taglib uri="http://bootstrapjsp.org/" prefix="b" %>
<b:well hidden="xs,md">I am not visible on "xs" or "md" devides.</b:well>
<b:well visible="xs,md">I am only visible on "xs" or "md" devides.</b:well>

<div class="well hidden-xs hidden-md">I am not visible on "xs" or "md" devides.</div>
<div class="well visible-xs visible-md">I am only visible on "xs" or "md" devides.</div>

The Print Attribute

The print attribute may have a value of either "true" or "false". For example, to make a Well hidden for print, and another only visible for print:

<%@ taglib uri="http://bootstrapjsp.org/" prefix="b" %>
<b:well print="false">I am not visible when printed.</b:well>
<b:well print="true">I am only visible when printed.</b:well>

<div class="well hidden-print">I am not visible when printed.</div>
<div class="well visible-print">I am only visible when printed.</div>