Language selection

Search

Floats

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use a float to change the normal flow of an element. Push the element to the left or right of its container, where text and inline elements wrap around it.

Design and coding

Basic use

Use to float an element to the right.

Appearance

Pulled right

Correct use

Compliance point(s):

  • Use .pull-right to float specific content to the right while non-floating elements wrap around it
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use to right align text. For alignment options, refer to: Alignment.
Code
<div class="pull-right">...</div>

Left floats

Use to float an element to the left.

Appearance

Pulled left

Correct use

Compliance point(s):

  • Use .pull-left to float specific content to the left while non-floating elements wrap around it
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use to left align text. For alignment options, refer to: Alignment.
Code
<div class="pull-left">...</div>

Clearing floats

Use to clear (reset) the content float on any element.

Appearance

Without clearing:

Pulled right A

Pulled right B

With clearing:

Pulled right A

Pulled right B

Correct use

Compliance point(s):

  • Use .clearfix to reset the content flow, and prevent any additional content from floating around or above an element
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code

<p class="pull-right">Pulled right A</p>
<div class="clearfix"></div>
<p class="pull-right">Pulled right B</p>

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: