Advertisement
Google Ad Slot: content-top
Bootstrap 5 Float
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>