Display

This page showcases Bootstrap display utility features including some integration from wet-boew like toggling content.

Float

Clear fix clearfix

Code sample

< class="well">
  <div class="pull-left bg-info">( Row 1, Column 1 )</div>
  <div class="pull-left bg-info">( Row 1, Column 2 )</div>
  <div class="pull-left bg-info">( Row 1, Column 3 )</div>
  <!-- Add clearfix class to clear floated elements -->
  <div class="clearfix">
  <div class="pull-left bg-info">Row 2, Column 1</div>
  <div class="pull-left bg-info">Row 2, Column 2</div>
  <div class="pull-left bg-info">Row 2, Column 3</div>
  <div class="pull-left bg-info">Row 2, Column 4</div>
</div>

.center-block class working example

Code sample

<div class="well">
	<div class="center-block well bg-darker text-white">
		This element is centered horizontally within its parent container.
</div>
</div>

.pull-right class working example

Code sample

<div class="well">
	<div class="pull-right well">
		This element is floated to the right within its parent container.
	</div>
</div>

.pull-left class working example

Code sample

<div class="well">
	<div class="pull-left well">
		This element is floated to the left within its parent container.
	</div>
</div><div class="clearfix"> </div>

Clear

.clr-lft-lg class working example

Code sample

<div class="well">
	<div class="clr-lft-lg well">
		This element clears the floated elements to the left on large screens (lg) within its parent container.
	</div>
</div>

.clr-lft-md class working example

Code sample

<div class="well">
	<div class="clr-lft-md well">
		This element clears the floated elements to the left on medium screens (md) within its parent container.
	</div>
</div>

.clr-rght-lg class working example

Code sample

<div class="well">
	<div class="clr-rght-lg well">
		This element clears the floated elements to the right on large screens (lg) within its parent container.
	</div>
</div>

.clr-rght-md class working example

Code sample

<div class="well">
	<div class="clr-rght-md well">
		This element clears the floated elements to the right on medium screens (md) within its parent container.
	</div>
</div>

Toggling content

.hide class working example

Code sample

<div class="well">
	<div class="hide well">
		This element is hidden on all screen sizes.
	</div>
</div>

.show class working example

Code sample

<div class="well">
	<div class="show well">
		This element is visible on all screen sizes.
	</div>
</div>

.invisible class working example

Code sample

<div class="well">
	<div class="invisible well">
		This element is invisible but still takes up space in the layout.
	</div>
</div>

.text-hide class working example

Code sample

<div class="well">
	<div class="text-hide well">
		This text is hidden visually but remains accessible to screen readers.
	</div>
</div>

.hidden class working example

Code sample

<div class="well">
	<div class="hidden well">
		This element is hidden on all screen sizes.
	</div>
</div>

.sr-only class working example

Code sample

<div class="well">
	<div class="sr-only well">
		This element is hidden visually but accessible to screen readers.
	</div>
</div>

.sr-only-focusable class working example

Code sample

<div class="well">
	<div class="sr-only-focusable well">
		This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation.
	</div>
</div>

Visibility

.visible-xs-inline class working example

Code sample

<div class="well">
	<div class="visible-xs-inline well">
		This element is visible on extra small screens (xs) and has an inline display.
	</div>
</div>

.visible-xs-block class working example

Code sample

<div class="well">
	<div class="visible-xs-block well">
		This element is visible on extra small screens (xs) and has a block display.
	</div>
</div>

.visible-xs-inline-block class working example

Code sample

<div class="well">
	<div class="visible-xs-inline-block well">
		This element is visible on extra small screens (xs) and has an inline-block display.
	</div>
</div>

.hidden-xs-inline class working example

Code sample

<div class="well">
	<div class="hidden-xs-inline well">
		This element is hidden on extra small screens (xs) and has an inline display.
	</div>
</div>

.hidden-xs-block class working example

Code sample

<div class="well">
	<div class="hidden-xs-block well">
		This element is hidden on extra small screens (xs) and has a block display.
	</div>
</div>

.hidden-xs-inline-block class working example

Code sample

<div class="well">
	<div class="hidden-xs-inline-block well">
		This element is hidden on extra small screens (xs) and has an inline-block display.
	</div>
</div>

.visible-xs-inline class working example

Code sample

<div class="well">
	<div class="visible-xs-inline well">
		This element is visible on extra small screens (xs) and has an inline display.
	</div>
</div>

.visible-xs-block class working example

Code sample

<div class="well">
	<div class="visible-xs-block well">
		This element is visible on extra small screens (xs) and has a block display.
	</div>
</div>

.visible-xs-inline-block class working example

Code sample

<div class="well">
	<div class="visible-xs-inline-block well">
		This element is visible on extra small screens (xs) and has an inline-block display.
	</div>
</div>

.hidden-xs-inline class working example

Code sample

<div class="well">
	<div class="hidden-xs-inline well">
		This element is hidden on extra small screens (xs) and has an inline display.
	</div>
</div>

.hidden-xs-block class working example

Code sample

<div class="well">
	<div class="hidden-xs-block well">
		This element is hidden on extra small screens (xs) and has a block display.
	</div>
</div>

.hidden-xs-inline-block class working example

Code sample

<div class="well">
	<div class="hidden-xs-inline-block well">
		This element is hidden on extra small screens (xs) and has an inline-block display.
	</div>
</div>

.visible-sm-inline class working example

Code sample

<div class="well">
	<div class="visible-sm-inline well">
		This element is visible on small screens (sm) and has an inline display.
	</div>
</div>

.visible-sm-block class working example

Code sample

<div class="well">
	<div class="visible-sm-block well">
		This element is visible on small screens (sm) and has a block display.
	</div>
</div>

.visible-sm-inline-block class working example

Code sample

<div class="well">
	<div class="visible-sm-inline-block well">
		This element is visible on small screens (sm) and has an inline-block display.
	</div>
</div>

.hidden-sm-inline class working example

Code sample

<div class="well">
	<div class="hidden-sm-inline well">
		This element is hidden on small screens (sm) and has an inline display.
	</div>
</div>

.hidden-sm-block class working example

Code sample

<div class="well">
	<div class="hidden-sm-block well">
		This element is hidden on small screens (sm) and has a block display.
	</div>
</div>

.hidden-sm-inline-block class working example

Code sample

<div class="well">
	<div class="hidden-sm-inline-block well">
		This element is hidden on small screens (sm) and has an inline-block display.
	</div>
</div>

.visible-md-inline class working example

Code sample

<div class="well">
	<div class="visible-md-inline well">
		This element is visible on medium screens (md) and has an inline display.
	</div>
</div>

.visible-md-block class working example

Code sample

<div class="well">
	<div class="visible-md-block well">
		This element is visible on medium screens (md) and has a block display.
	</div>
</div>

.visible-md-inline-block class working example

Code sample

<div class="well">
	<div class="visible-md-inline-block well">
		This element is visible on medium screens (md) and has an inline-block display.
	</div>
</div>

.hidden-md-inline class working example

Code sample

<div class="well">
	<div class="hidden-md-inline well">
		This element is hidden on medium screens (md) and has an inline display.
	</div>
</div>

.hidden-md-block class working example

Code sample

<div class="well">
	<div class="hidden-md-block well">
		This element is hidden on medium screens (md) and has a block display.
	</div>
</div>

.hidden-md-inline-block class working example

Code sample

<div class="well">
	<div class="hidden-md-inline-block well">
		This element is hidden on medium screens (md) and has an inline-block display.
	</div>
</div>

.visible-lg-inline class working example

Code sample

<div class="well">
	<div class="visible-lg-inline well">
		This element is visible on large screens (lg) and has an inline display.
	</div>
</div>

.visible-lg-block class working example

Code sample

<div class="well">
	<div class="visible-lg-block well">
		This element is visible on large screens (lg) and has a block display.
	</div>
</div>

.visible-lg-inline-block class working example

Code sample

<div class="well">
	<div class="visible-lg-inline-block well">
		This element is visible on large screens (lg) and has an inline-block display.
	</div>
</div>

.hidden-lg-inline class working example

Code sample

<div class="well">
	<div class="hidden-lg-inline well">
		This element is hidden on large screens (lg) and has an inline display.
	</div>
</div>

.hidden-lg-block class working example

Code sample

<div class="well">
	<div class="hidden-lg-block well">
		This element is hidden on large screens (lg) and has a block display.
	</div>
</div>

.hidden-lg-inline-block class working example

Code sample

<div class="well">
	<div class="hidden-lg-inline-block well">
		This element is hidden on large screens (lg) and has an inline-block display.
	</div>
</div>

Opacity

.opct-10 class working example

Code sample

<div class="well">
	<div class="opct-10 well">
		This element has an opacity of 0.1 (10%).
	</div>
</div>

.opct-20 class working example

Code sample

<div class="well">
	<div class="opct-20 well">
		This element has an opacity of 0.2 (20%).
	</div>
</div>

.opct-30 class working example

Code sample

<div class="well">
	<div class="opct-30 well">
		This element has an opacity of 0.3 (30%).
	</div>
</div>

.opct-40 class working example

Code sample

<div class="well">
	<div class="opct-40 well">
		This element has an opacity of 0.4 (40%).
	</div>
</div>

.opct-50 class working example

Code sample

<div class="well">
	<div class="opct-50 well">
		This element has an opacity of 0.5 (50%).
	</div>
</div>

.opct-60 class working example

Code sample

<div class="well">
	<div class="opct-60 well">
		This element has an opacity of 0.6 (60%).
	</div>
</div>

.opct-70 class working example

Code sample

<div class="well">
	<div class="opct-70 well">
		This element has an opacity of 0.7 (70%).
	</div>
</div>

.opct-80 class working example

Code sample

<div class="well">
	<div class="opct-80 well">
		This element has an opacity of 0.8 (80%).
	</div>
</div>

.opct-90 class working example

Code sample

<div class="well">
	<div class="opct-90 well">
		This element has an opacity of 0.9 (90%).
	</div>
</div>

.opct-100 class working example

Code sample

<div class="well">
	<div class="opct-100 well">
		This element has an opacity of 1 (100%).
	</div>
</div>

WET - Toggling content

.nojs-show class working example

Code sample

<div class="well">
	<div class="nojs-show well">
		This element is initially hidden, but it will be shown when JavaScript is disabled.
	</div>
</div>

.nojs-hide class working example

Code sample

<div class="well">
	<div class="nojs-hide well">
		This element is initially visible, but it will be hidden when JavaScript is disabled.
	</div>
</div>

.wb-inv class working example

Code sample

<div class="well">
	<div class="wb-inv well">
		This element is invisible and hidden from all users, including screen readers.
	</div>
</div>

.wb-invisible class working example

Code sample

<div class="well">
	<div class="wb-invisible well">
		This element is invisible but accessible by screen readers.
	</div>
</div>

.wb-show-onfocus class working example

Code sample

<div class="well">
	<input type="text" class="wb-show-onfocus well" placeholder="Focus on this input to reveal the element">
</div>

Col count

It split the element into multiple columns. Its a way to do positioning which are not limited to list items but include div/sections too

.colcount-xxs-2 class working example

Code sample

<div class="well">
	<div class="colcount-xxs-2 well">
		This element occupies 1 out of 2 columns on extra-small screens (xxs).
	</div>
</div>

.colcount-xxs-3 class working example

Code sample

<div class="well">
	<div class="colcount-xxs-3 well">
		This element occupies 1 out of 3 columns on extra-small screens (xxs).
	</div>
</div>

.colcount-xxs-4 class working example

Code sample

<div class="well">
	<div class="colcount-xxs-4 well">
		This element occupies 1 out of 4 columns on extra-small screens (xxs).
	</div>
</div>

.colcount-xs-2 class working example

Code sample

<div class="well">
	<div class="colcount-xs-2 well">
		This element occupies 1 out of 2 columns on extra-small screens (xs).
	</div>
</div>

.colcount-xs-3 class working example

Code sample

<div class="well">
	<div class="colcount-xs-3 well">
		This element occupies 1 out of 3 columns on extra-small screens (xs).
	</div>
</div>

.colcount-xs-4 class working example

Code sample

<div class="well">
	<div class="colcount-xs-4 well">
		This element occupies 1 out of 4 columns on extra-small screens (xs).
	</div>
</div>

.colcount-sm-2 class working example

Code sample

<div class="well">
	<div class="colcount-sm-2 well">
		This element occupies 1 out of 2 columns on small screens (sm).
	</div>
</div>

.colcount-sm-3 class working example

Code sample

<div class="well">
	<div class="colcount-sm-3 well">
		This element occupies 1 out of 3 columns on small screens (sm).
	</div>
</div>

.colcount-sm-4 class working example

Code sample

<div class="well">
	<div class="colcount-sm-4 well">
		This element occupies 1 out of 4 columns on small screens (sm).
	</div>
</div>

.colcount-lg-2 class working example

Code sample

<div class="well">
	<div class="colcount-lg-2 well">
		This element occupies 1 out of 2 columns on large screens (lg).
	</div>
</div>

.colcount-lg-3 class working example

Code sample

<div class="well">
	<div class="colcount-lg-3 well">
		This element occupies 1 out of 3 columns on large screens (lg).
	</div>
</div>

.colcount-lg-4 class working example

Code sample

<div class="well">
	<div class="colcount-lg-4 well">
		This element occupies 1 out of 4 columns on large screens (lg).
	</div>
</div>

.colcount-xl-2 class working example

Code sample

<div class="well">
	<div class="colcount-xl-2 well">
		This element occupies 1 out of 2 columns on extra-large screens (xl).
	</div>
</div>

.colcount-xl-3 class working example

Code sample

<div class="well">
	<div class="colcount-xl-3 well">
		This element occupies 1 out of 3 columns on extra-large screens (xl).
	</div>
</div>

.colcount-xl-4 class working example

Code sample

<div class="well">
	<div class="colcount-xl-4 well">
		This element occupies 1 out of 4 columns on extra-large screens (xl).
	</div>
</div>

Sizing controls

.h-100 class working example

Code sample

<div class="well">
	<div class="h-100">
		This element has a height of 100% of its parent container.
	</div>
</div>

.full-width class working example

Code sample

<div class="well">
	<div class="full-width">
		This element spans the full width of its parent container.
	</div>
</div>

.max-content class working example

Code sample

<div class="well">
	<div class="max-content well">
		This element adjusts its width to fit its content, but not wider than its parent container.
	</div>
</div>