Uility

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

On this page:

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>

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>

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>

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>

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 is a pragraph relatively positioned.

Code sample:

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

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.

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>

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>
Date modified: