Bootstrap - Floats

Ethan D. - June 1, 2024

Using Floats in Bootstrap

Bootstrap provides classes to control the positioning of elements using floats. These classes let you align elements to the left or right of their container, or remove the float.

Float Classes

Bootstrap includes three float classes:

Class	Description
`.float-left`	Floats an element to the left of its container.
`.float-right`	Floats an element to the right of its container.
`.float-none`	Removes any float applied to an element.

You can apply these classes to any element to control its floating behavior within its container.

Example: Applying float classes

<div class="float-left">This element will float to the left.</div>
<div class="float-right">This element will float to the right.</div>
<div class="float-none">This element will not float.</div>

Responsive Float Classes

Bootstrap also provides responsive float classes that let you control the floating behavior based on the screen size. These classes are useful when you want to change the alignment of elements on different devices.

Class	Description
`.float-sm-left`	Floats an element to the left on small screens (≥576px).
`.float-md-left`	Floats an element to the left on medium screens (≥768px).
`.float-lg-left`	Floats an element to the left on large screens (≥992px).
`.float-xl-left`	Floats an element to the left on extra-large screens (≥1200px).
`.float-sm-right`	Floats an element to the right on small screens (≥576px).
`.float-md-right`	Floats an element to the right on medium screens (≥768px).
`.float-lg-right`	Floats an element to the right on large screens (≥992px).
`.float-xl-right`	Floats an element to the right on extra-large screens (≥1200px).
`.float-sm-none`	Removes any float applied to an element on small screens (≥576px).
`.float-md-none`	Removes any float applied to an element on medium screens (≥768px).
`.float-lg-none`	Removes any float applied to an element on large screens (≥992px).
`.float-xl-none`	Removes any float applied to an element on extra-large screens (≥1200px).

Example: Using responsive float classes

<div class="float-sm-left float-md-right float-lg-none">
  This element will float left on small screens, right on medium screens, and not float on large screens.
</div>

By using these responsive float classes, you can create flexible layouts that adapt to different screen sizes, allowing you to control the positioning of elements based on the available space.

Tip: Clearing floats

When using floats, remember to clear the floats on the parent container to ensure proper layout. You can use the .clearfix class on the parent element to clear the floats.

Clearing Floats

When using floats in your layout, you need to understand clearing floats and why it is necessary.

Clearing floats tells the browser that an element should not be affected by the float of its preceding sibling elements. When an element is floated, it is taken out of the normal document flow, and other elements can wrap around it. This can cause the parent container to collapse, resulting in layout issues.

To fix this problem, you need to clear the floats. Clearing floats tells the browser that the element should be positioned below any floated elements, preventing it from wrapping around them.

Clearfix

Bootstrap provides a class called .clearfix that you can use to clear floats on a parent container. The .clearfix class applies a pseudo-element :after to the container, which clears the floats of its child elements.

Example: Clearfix

<div class="clearfix">
  <div class="float-left">Floated left</div>
  <div class="float-right">Floated right</div>
</div>

The .clearfix class is applied to the parent <div> element. It clears the floats of the child elements with classes .float-left and .float-right, making sure that the parent container expands to contain its floated children.

Responsive Clearfix

Bootstrap also provides responsive clearfix classes that let you clear floats based on specific breakpoints. These classes are useful when you have floated elements that need to be cleared at different screen sizes.

The responsive clearfix classes are:

Class	Description
`.clearfix-sm`	Clears floats on small screens (≥576px)
`.clearfix-md`	Clears floats on medium screens (≥768px)
`.clearfix-lg`	Clears floats on large screens (≥992px)
`.clearfix-xl`	Clears floats on extra-large screens (≥1200px)

Example: Responsive Clearfix

<div class="clearfix-sm clearfix-lg">
  <div class="float-sm-left float-lg-right">Floated element</div>
</div>

The .clearfix-sm class clears the floats on small screens, while the .clearfix-lg class clears the floats on large screens. This lets you have different floating behaviors and clearfix requirements based on the screen size.

By using the .clearfix class or the responsive clearfix classes, you can properly clear floats and maintain a consistent layout in your Bootstrap projects.