Bootstrap 5 Float Utilities: A Complete Guide

Bootstrap 5 provides utility classes for floating elements to align them to the left or right. These classes are responsive, allowing float behaviors to change across different screen sizes.

Syntax:

float-{size?}-{type}

float: Indicates display.
size (optional): Responsive breakpoint (e.g., sm : ≥576px, md : ≥ 768px, lg : ≥992px, xl : ≥1200px, xxl : ≥1400px).
type : Defines the display type (e.g., start, end, none).

Example:

.float-start
.float-sm-start
.float-md-start
.float-lg-start
.float-xl-start
.float-xxl-start

Class	Description
float-start	Floats the element to the left
float-end	Floats the element to the right
float-none	Removes float alignment

Example

<div class="float-start float-md-end bg-primary text-white p-2">Floated Left</div>

<div class="float-end float-md-start bg-success text-white p-2">Floated Right</div>

<div class="float-none bg-warning text-dark p-2">No Float</div>

Try it yourself

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Syntax:

Class

Description