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 : ≥576pxmd : ≥ 768pxlg : ≥992pxxl : ≥1200pxxxl : ≥1400px).
  • type : Defines the display type (e.g., startendnone).

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.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.