Utilities

This page showcases wet-boew utility features including some integration from Bootstrap 4 such as: p-0, pl-2, text-white and others.

Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (sm) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.

On this page:

Alignment

text-sm-left

Align text to the left in small view and over.

Working example

Left-aligned in small view and over

Code sample

<p class="text-right text-sm-left">Left-aligned in small view and over</p>

text-sm-right

Align text to the right in small view and over.

Working example

Right-aligned in small view and over

Code sample

<p class="text-sm-right">Right-aligned in small view and over</p>

Background

bg-cover

Set background image to fully cover the box size.

Working example

Heading

Paragraph

Code sample

<div class="bg-cover well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">Heading</h4>
		<p>Paragraph</p>
	</div>
</div>

bg-center

Set background image in the center of the container.

Working example

Heading

Paragraph

Code sample

<div class="bg-center well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">Heading</h4>
		<p>Paragraph</p>
	</div>
</div>

bg-norepeat

Prevent background image to be repeated in the container.

Working example

Heading

Paragraph

Code sample

<div class="bg-norepeat well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h4 class="mrgn-tp-md">Heading</h4>
		<p>Paragraph</p>
	</div>
</div>

bg-darker

Set a black background to an element.

Working example

Heading

Paragraph

Code sample

<div class="bg-cover well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
		<h4 class="mrgn-tp-md">Heading</h4>
		<p>Paragraph</p>
	</div>
</div>

bg-dark

Set a dark background to an element.

Working example

Heading

Paragraph

Code sample

<div class="bg-cover well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
		<h4 class="mrgn-tp-md">Heading</h4>
		<p>Paragraph</p>
	</div>
</div>
<button type="button" class="btn text-white bg-dark">Button<button>

Color Schemes

text-white

Set text in white. Works jointly with darker backgrounds.

Working example

Suspendisse faucibus nisl at consectetur. Lorem ipsum dolor sit amet, consectetur.

Code sample

<p class="bg-darker text-white">Suspendisse faucibus nisl at consectetur. Lorem ipsum <a href="#" class="text-white">dolor sit amet, consectetur.</a></p>

Spacing

p-0

Set a padding of 0px.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="p-0 primary max-content">Suspendisse faucibus nisl at consectetur.</p>

p-sm-3

Set a padding of 15px in small view and over.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="p-sm-3 primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pl-2

Set a left padding of 5px.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="pl-2 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

px-2

Set a left and right padding of 5px.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="px-2 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

px-sm-3

Set a left and right padding of 15px in small view and over.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="px-sm-3 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pr-2

Set a right padding of 5px.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="pr-2 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pr-sm-3

Set a right padding of 15px in small view and over.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="pr-sm-3 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pt-4

Set a top padding of 30px.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="pt-4 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

py-4

Set a top and bottom padding of 30px.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="py-4 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

pb-4

Set a bottom padding of 30px.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="pb-4 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

mb-sm-5

Set a bottom margin of 50px in small view and over.

Working example

Suspendisse faucibus nisl at consectetur.

Code sample

<p class="mb-sm-5 bg-primary max-content">Suspendisse faucibus nisl at consectetur.</p>

mt-auto

Set a top margin to auto. When used jointly with flexbox, it will stick an element to the bottom.

Working example

Please test on a tablet or desktop to get the full picture of this utility.

I'm at the bottom.

Example text. Example text. Example text. Example text.

Code sample

<div class="row wb-eqht-grd">
	<div class="col-xs-6">
		<p class="mt-auto mrgn-bttm-0 bg-primary">Example text.</p>
	</div>
	<div class="col-xs-6">
			<p class="mrgn-bttm-0 bg-primary">Example text. Example text. Example text. Example text.<span class="hidden-xs hidden-sm"> Example text. Example text. Example text. Example text.</span></p>
	</div>
</div>

Sizing

h-100

Set an element to 100% height. When used in flexbox context, it will force a child element to match its parent height.

Working example

Please test on a tablet or desktop to get the full picture of this utility.

I'm taking the full height.

Example text. Example text. Example text. Example text.

Code sample

<div class="row wb-eqht-grd">
	<div class="col-xs-6">
		<p class="h-100 mrgn-bttm-0 bg-primary">Example text.</p>
	</div>
	<div class="col-xs-6">
			<p class="mrgn-bttm-0 bg-primary">Example text. Example text. Example text. Example text.<span class="hidden-xs hidden-sm"> Example text. Example text. Example text. Example text.</span></p>
	</div>
</div>

Flexbox

d-flex

Set an element as a flexbox container and change its direct children into flex items.

Working example

Flex item

Flex item

Code sample

<div class="d-flex">
	<p class="well">Flex item</p>
	<p class="well">Flex item</p>
</div>

d-sm-flex

Set an element as a flexbox container and change its direct children into flex items. To use when you only want the style applied for sm breakpoint and up.

Working example

Flex item

Flex item

Code sample

<div class="d-sm-flex">
	<p class="well">Flex item</p>
	<p class="well">Flex item</p>
</div>

flex-sm-wrap

Allow a flexbox container's flex items to wrap across multiple lines in small view and over. Useful for grid layouts.

Working example

col-xs-12

col-xs-12

Code sample

<div class="row d-sm-flex flex-sm-wrap">
	<div class="col-sm-12">
		<p class="well"><code>col-xs-12</code></p>
	</div>
	<div class="col-sm-12">
		<p class="well"><code>col-xs-12</code></p>
	</div>
</div>

flex-column

Set a flexbox container's direction to vertical instead of horizontal.

Working example

Flex item

Flex item

Code sample

<div class="d-flex flex-column">
	<p class="well">Flex item</p>
	<p class="well">Flex item</p>
</div>

align-self-center

Vertically centers an element. This is to be used jointly with the d-flex utility.

Working example

Paragraph is vertically aligned with sibling image.

Code sample

<div class="d-flex">
	<img src="https://via.placeholder.com/80" alt="" class="d-flex align-self-center mrgn-rght-md" />
	<p class="d-flex align-self-center mrgn-lft-md">Paragraph is vertically aligned with sibling image.</p>
</div>

align-self-end

Vertically moves an element to the bottom. This is to be used jointly with the d-flex utility.

Working example

Paragraph is vertically moved to the bottom.

Code sample

<div class="d-flex">
	<img src="https://via.placeholder.com/80" alt="" class="d-flex mrgn-rght-md" />
	<p class="d-flex align-self-end mrgn-lft-md">Paragraph is vertically moved to the bottom.</p>
</div>

align-items-center

Center-align a flexbox container's flex items. Useful for middle-aligning.

Working example

Line 1
Line 2
Line 3
Line 4
Line 5

Line 1
Line 2
Line 3

Line 1

Code sample

<div class="row d-flex align-items-center">
	<div class="col-xs-4">
		<p class="well">Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Line 1<br />Line 2<br />Line 3</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Line 1</p>
	</div>
</div>

align-items-sm-center

Center-align a flexbox container's flex items. Useful for middle-aligning. To use when you only want the style applied for sm breakpoint and up.

Working example

Line 1
Line 2
Line 3
Line 4
Line 5

Line 1
Line 2
Line 3

Line 1

Code sample

<div class="row d-sm-flex align-items-sm-center">
	<div class="col-xs-4">
		<p class="well">Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Line 1<br />Line 2<br />Line 3</p>
	</div>
	<div class="col-xs-4">
		<p class="well">Line 1</p>
	</div>
</div>

Lists

List columns (colcount-*-*)

Spreads a list over 2, 3 or 4 columns.

Since columns are similar to grids, they adhere to the same breakpoints as grids.

Available classes

Unordered list

Working example
Code sample
<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
	<li>Item 1<br>Line 2<br>Line 3</li>
	<li>Item 2<br>Line 2<br>Line 3</li>
	<li>Item 3</li>
	<li>Item 4<br>Line 2<br>Line 3</li>
	<li>Item 5<br>Line 2<br>Line 3</li>
	<li>Item 6<br>Line 2</li>
	<li>Item 7<br>Line 2</li>
	<li>Item 8</li>
</ul>

Description list

Working example
Term 1
Description
Term 2
Description
Line 2
Line 3
Term 3
Description
Line 2
Line 3
Term 4
Description
Line 2
Term 5
Description
Line 2
Term 6
Description
Code sample
<dl class="colcount-sm-2 colcount-md-3 colcount-lg-4">
	<div>
		<dt>Term 1</dt>
		<dd>Description</dd>
	</div>
	<div>
		<dt>Term 2</dt>
		<dd>Description<br>Line 2<br>Line 3</dd>
	</div>
	<div>
		<dt>Term 3</dt>
		<dd>Description<br>Line 2<br>Line 3</dd>
	</div>
	<div>
		<dt>Term 4</dt>
		<dd>Description<br>Line 2</dd>
	</div>
	<div>
		<dt>Term 5</dt>
		<dd>Description<br>Line 2</dd>
	</div>
	<div>
		<dt>Term 6</dt>
		<dd>Description</dd>
	</div>
</dl>

colcount-no-break

Prevents list items from splitting across multiple list columns.

Unordered list

Working example
Code sample
<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
	<li>Item 1<br>Line 2<br>Line 3</li>
	<li>Item 2<br>Line 2<br>Line 3</li>
	<li>Item 3</li>
	<li>Item 4<br>Line 2<br>Line 3</li>
	<li>Item 5<br>Line 2<br>Line 3</li>
	<li>Item 6<br>Line 2</li>
	<li>Item 7<br>Line 2</li>
	<li>Item 8</li>
</ul>

Description list

Working example
Term 1
Description
Term 2
Description
Line 2
Line 3
Term 3
Description
Line 2
Line 3
Term 4
Description
Line 2
Term 5
Description
Line 2
Term 6
Description
Code sample
<dl class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
	<div>
		<dt>Term 1</dt>
		<dd>Description</dd>
	</div>
	<div>
		<dt>Term 2</dt>
		<dd>Description<br>Line 2<br>Line 3</dd>
	</div>
	<div>
		<dt>Term 3</dt>
		<dd>Description<br>Line 2<br>Line 3</dd>
	</div>
	<div>
		<dt>Term 4</dt>
		<dd>Description<br>Line 2</dd>
	</div>
	<div>
		<dt>Term 5</dt>
		<dd>Description<br>Line 2</dd>
	</div>
	<div>
		<dt>Term 6</dt>
		<dd>Description</dd>
	</div>
</dl>

Positioning

position-relative

Set an element in a relative position. This was created in support of the stretched-link utility. For a better visualisation effect, refer to the streched-link utility section below.

Working example

This is a paragraph relatively positioned.

Code sample

<p class="position-relative">This is a paragraph relatively positioned.</p>

Tables

table-responsive

Not ported from, but inline with Bootstrap 4: Makes the content wrap in any viewport including small devices (under 768px).

Working example

Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A

Code sample

<div class="table-responsive">
	<!-- Table here -->
</div>

Miscellaneous

max-content

Limits the width of an element to the width of its largest content inside.

Working example

List items

Code sample

<details class="max-content">
	<summary>List items</summary>
	<ul class="list-unstyled mrgn-bttm-0 mrgn-tp-sm">
		<li><a href="#">Lorem ipsum</a></li>
		<li><a href="#">Proin porta vehicula</a></li>
		<li><a href="#">consectetur adipiscing elitDuis porttitor fermentum semper</a></li>
		<li><a href="#">consectetur adipiscing elit</a></li>
	</ul>
</details>

stretched-link

Expands the clickable area of an hyperlink to its nearest parent element.

Working example

[Hyperlink text]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[Hyperlink text]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[Hyperlink text]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code sample

<div class="row">
	<div class="col-md-4">
		<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
		<h3 class="h5"><a href="#" class="stretched-link">[Hyperlink text]</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="col-md-4">
		<div class="panel panel-default position-relative">
			<div class="panel-body">
				<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
				<h3 class="h5"><a href="#" class="stretched-link">[Hyperlink text]</a></h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="well position-relative">
			<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
			<h3 class="h5"><a href="#" class="stretched-link">[Hyperlink text]</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</div>
</div>

test-textSpacing

Add this class to the body element in order to test WCAG 2.1 success Criterion 1.4.12 Text Spacing. This helper class will have the following effects:

After setting the class, ensure there is no loss of content or functionality.

Code sample

<body class="test-textSpacing" vocab="http://schema.org/" typeof="WebPage" resource="#wb-webpage" class="home page-type-nav ">
...
</body>

Horizontal description list

Word wrap

This test a special egde case where the word in the description title (<dt>) are larger than the available space.

Description title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Long word: supercalifragilisticexpialidocious
Sed vitae mattis metus. Donec vel nisi lobortis, pretium ante in, porta odio. Duis blandit turpis neque, in interdum mi cursus nec. Cras pharetra ipsum at felis venenatis pellentesque. Vivamus facilisis sollicitudin enim, ac condimentum orci. Aenean tempor elit sit amet tellus gravida, et dignissim magna mollis. Vivamus rhoncus ligula nulla, sit amet maximus sem rutrum scelerisque. Etiam ac lacus rutrum, placerat orci et, dignissim arcu. Praesent eu vulputate tortor, eu porta neque. Fusce commodo tempus ipsum ac rhoncus. Phasellus laoreet aliquam nulla non accumsan. Etiam eu lacinia augue, eget posuere lectus. Curabitur ultricies dolor ante, vel elementum nulla pellentesque nec.
A fews filling words that take space
Quisque tristique dui in ante mattis, nec commodo tortor eleifend.

If the longest word is capitalized, some browsers may not display a hyphen.

If you wish to self work break to create a hyphen, you can use the soft hyphen (­) entity.

Maximum term width

Add the class dt-max with the dl-horizontal class and the longest word in any of the term (<dt>) elements will determine the width of all the terms.

Description title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Long word: supercalifragilisticexpialidocious
Sed vitae mattis metus. Donec vel nisi lobortis, pretium ante in, porta odio. Duis blandit turpis neque, in interdum mi cursus nec. Cras pharetra ipsum at felis venenatis pellentesque. Vivamus facilisis sollicitudin enim, ac condimentum orci. Aenean tempor elit sit amet tellus gravida, et dignissim magna mollis. Vivamus rhoncus ligula nulla, sit amet maximus sem rutrum scelerisque. Etiam ac lacus rutrum, placerat orci et, dignissim arcu. Praesent eu vulputate tortor, eu porta neque. Fusce commodo tempus ipsum ac rhoncus. Phasellus laoreet aliquam nulla non accumsan. Etiam eu lacinia augue, eget posuere lectus. Curabitur ultricies dolor ante, vel elementum nulla pellentesque nec.
A fews filling words that take space
Quisque tristique dui in ante mattis, nec commodo tortor eleifend.

Inline description list

Inline description list used to display short terms and descriptions.

Term :
Short description
Term :
Short description
Term :
Short description
Term :
Short description
Term :
Short description
Date modified: