Color (Foreground/Background)

This page showcases wet-boew utility features including some integration from Bootstrap 4 such as: bg-primary, text-center, 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:

• WET Override
• Bootstrap
• GCWeb

WET Override

text-white

Set the text color to white.

Working example

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button

Code sample

<h5>Paragraph</h5>
<p class="bg-dark text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h5>Link</h5>
<p class="bg-dark"><a class="text-white" href="#"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></p>
<h5>Button</h5>
<button type="button" class="btn bg-dark text-white"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>

text-sm-left

Align text to the left in small view and over.

Working example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code sample

<p class="text-right text-sm-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

text-sm-right

Align text to the right in small view and over.

Working example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code sample

<p class="text-sm-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Bootstrap

Background Colors

Set background to the one of the Bootstrap colors.

Working example

Code sample

<div class="well">
	<div class="bg-primary mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Primary</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-success mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Success</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-info mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Info</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-warning mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Warning</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="bg-danger mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Danger</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>

Text Colors

Set text to one of the Bootstrap colors.

Working example

Code sample

<div class="well">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Muted</h5>
		<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Primary</h5>
		<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Success</h5>
		<p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Info</h5>
		<p class="text-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Warning</h5>
		<p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Danger</h5>
		<p class="text-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>

Text Align

Align text on the page.

Working example

Code sample

<div class="well">
	<div class="well mrgn-tp-md mrgn-bttm-md text-left">
		<h5 class="mrgn-tp-md">Aligned-left</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-right">
		<h5 class="mrgn-tp-md">Aligned-right</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-center">
		<h5 class="mrgn-tp-md">Aligned-center</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-justify">
		<h5 class="mrgn-tp-md">Aligned-justify</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div class="well mrgn-tp-md mrgn-bttm-md text-nowrap" style="width: 8rem; border: 2px solid black">
		<h5 class="mrgn-tp-md">No wrap</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>

GCWeb

bg-cover

Set background image to fully cover the box size.

Working example

Code sample

<div class="bg-cover well" data-bgimg="https://wet-boew.github.io/wet-boew/demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Heading</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>
</div>

bg-center

Set background image in the center of the container.

Working example

Code sample

<div class="bg-center well" data-bgimg="https://wet-boew.github.io/wet-boew/demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md opct-60">
		<h5 class="mrgn-tp-md">Heading</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>
</div>

bg-norepeat

Prevent background image to be repeated in the container.

Working example

Code sample

<div class="bg-norepeat well" data-bgimg="https://wet-boew.github.io/wet-boew/demos/tabs/img/investinourfuture.jpg">
	<div class="well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Heading</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>
</div>

bg-gctheme

Set background to the gctheme.

Working example

Code sample

<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
		<h5 class="mrgn-tp-md">Heading</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
</div>

bg-darker

Set a black background to an element.

Working example

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
	<h5 class="mrgn-tp-md">Heading</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>

bg-dark

Set a dark background to an element.

Working example

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
	<h5 class="mrgn-tp-md">Heading</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
	</div>