Bootstrap 5 Float

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Elements float to the right using the .float-end class, float to the left using the .float-start class, and the .clearfix class is used to clear the float:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Float(apidemos.com)</h2>
  <p>The .float-end class is used to float elements to the right, the .float-start class is used to float elements to the left, and the .clearfix class is used to clear floats:</p> 
  <div class="clearfix">
    <span class="float-start">Float left</span>
    <span class="float-end">Float right</span>
  </div>
</div>

</body>
</html>

The .float-end class is used to float elements to the right, the .float-start class is used to float elements to the left, and the .clearfix class is used to clear floats.

Output:

Bootstrap 5 Float

The float effect can also be set according to the screen size (.float-*-left|right - * means sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Responsive Float</h2>
  <p>The float effect can be set according to the screen size (.float-*-left|right - * means sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):</p>

  <div class="clearfix">
    <div class="float-sm-end">Small screen floats to the right</div><br>
    <div class="float-md-end">Medium screen floats to the right</div><br>
    <div class="float-lg-end">Large screen floating to the right</div><br>
    <div class="float-xl-end">Super large screen floating to the right</div><br>
    <div class="float-xxl-end">Extra large screen floating to the right</div><br>
    <div class="float-none">No float</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap 5 Float

Bootstrap 5 Float

Bootstrap 5 Float

Related

Top