Bootstrap 5 Float

Last Updated : 30 Nov, 2022

Bootstrap 5 Float classes use the current viewport size to float an element to the left, right, or deactivate floating. !Important is mentioned to prevent issues with specificity. Please be mindful that flex objects are unaffected by float utilities. This is the replacement of CSS float property that was used to float any element on required alignment.

Overview: CSS float property is used to float an element to the left or right, or disable floating.
Responsiveness: Bootstrap 5 provides support classes like float-sm-start, float-lg-end, etc, to give responsive variations to each float value.
Sass: It involves all float utilities in utility API.

Syntax:

<span class="float-start">
   ....
</span>

Example 1: The following code demonstrates Bootstrap float using various classes like float-sm-start, float-md-start, float-lg-start, and float-xl-start. all the elements will be left aligned on all the screen size.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-center text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Float</h2> 
    </center> 
    <div class="float-sm-start"> 
        Float left on viewports sized SM (small) or wider 
    </div> 
    <br> 
    <div class="float-md-start"> 
        Float left on viewports sized MD (medium) or wider 
    </div> 
    <br> 
    <div class="float-lg-start"> 
        Float left on viewports sized LG (large) or wider 
    </div> 
    <br> 
    <div class="float-xl-start"> 
        Float left on viewports sized XL (extra-large) or wider 
    </div> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates Bootstrap float using various classes like float-start,float-end, and float-none.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-center text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Float</h2> 
    </center> 
  
    <div class="float-start"> 
        Float start on all viewport sizes 
    </div> 
    <br> 
    <div class="float-end"> 
        Float end on all viewport sizes 
    </div> 
    <br> 
    <div class="float-none"> 
        Don't float on all viewport sizes 
    </div> 
</body> 
  
</html>