Float and clear

Float

Use float utility classes to float an element on your page.

.float-left or .float-{sm,md,lg,xl}-left
.float-right or .float-{sm,md,lg,xl}-right
.float-none or .float-{sm,md,lg,xl}-none

Example
HTML

.float-left Float left on all viewport sizes

.float-right Float right on all viewport sizes

.float-none Don't float on all viewport sizes

.float-sm-left Float left on viewports sized SM (small) or wider

.float-md-left Float right on viewports sized MD (medium) or wider

.float-lg-left Float left on viewports sized LG (large) or wider

.float-xl-left Float right on viewports sized XL (extra-large) or wider

<div class="float-left doc-grid-cell"><code>.float-left</code> &nbsp;&nbsp; Float left on all viewport sizes</div>
<div class="clear"></div>
<div class="float-right doc-grid-cell"><code>.float-right</code> &nbsp;&nbsp; Float right on all viewport sizes</div>
<div class="clear"></div>
<div class="float-none doc-grid-cell"><code>.float-none</code> &nbsp;&nbsp; Don't float on all viewport sizes</div>
<div class="clear"></div><br><br>
<div class="float-sm-left doc-grid-cell"><code>.float-sm-left</code> &nbsp;&nbsp; Float left on viewports sized SM (small) or wider</div><br>
<div class="clear"></div>
<div class="float-md-left doc-grid-cell"><code>.float-md-left</code> &nbsp;&nbsp; Float right on viewports sized MD (medium) or wider</div><br>
<div class="clear"></div>
<div class="float-lg-left doc-grid-cell"><code>.float-lg-left</code> &nbsp;&nbsp; Float left on viewports sized LG (large) or wider</div><br>
<div class="clear"></div>
<div class="float-xl-left doc-grid-cell"><code>.float-xl-left</code> &nbsp;&nbsp; Float right on viewports sized XL (extra-large) or wider</div>
<div class="clear"></div>

Clear

Helper classes for controlling the wrapping of content around an element.

.clear-left
.clear-right
.clear-none
.clear or .clearfix

Example
HTML

.clear-left

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

.clear-right

.clear

.clear-none

<div class="mb-40">
	<p class="clear mb-24"><code>.clear-left</code></p>
	<div class="float-left col-4 p-0 mr-12 mb-4 overflow-hidden" style="max-height: 100px; max-width: 150px;">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<div class="float-right col-4 p-0 mb-4 ml-12 overflow-hidden" style="max-height: 200px">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<p class="clear-left text-justify">Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.</p>
</div>
<hr class="hr-nc-dotted">
<div class="mb-40">
	<p class="clear mb-24 mt-40"><code>.clear-right</code></p>
	<div class="float-left col-4 p-0 mr-12 mb-4 overflow-hidden" style="max-height: 100px; max-width: 150px;">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<div class="float-right col-4 p-0 mb-4 ml-12 overflow-hidden" style="max-height: 200px">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<p class="clear-right text-justify">Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.</p>
</div>
<hr class="hr-nc-dotted">
<div class="mb-40">
	<p class="clear mb-24 mt-40"><code>.clear</code></p>
	<div class="float-left col-4 p-0 mr-12 mb-4 overflow-hidden" style="max-height: 100px; max-width: 150px;">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<div class="float-right col-4 p-0 mb-4 ml-12 overflow-hidden" style="max-height: 200px">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<p class="clear text-justify">Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.</p>
</div>
<hr class="hr-nc-dotted">
<div class="mb-40">
	<p class="clear mb-24 mt-40"><code>.clear-none</code></p>
	<div class="float-left col-4 p-0 mr-12 mb-4 overflow-hidden" style="max-height: 100px; max-width: 150px;">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<div class="float-right col-4 p-0 mb-4 ml-12 overflow-hidden" style="max-height: 200px">
		<img class="object-scale-down w-100" src="https://documentation.vud.visma.com/wp-content/uploads/2019/12/[email protected]" alt="test image">
	</div>
	<p class="clear-none text-justify">Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.</p>
</div>