Bootstrap - Float

This chapter discusses about the utility class .float-*.

Overview

  • The .float class is used to control the positioning and alignment of elements within a grid system.

  • It is primarily used in conjunction with the grid system's column classes to create responsive layouts.

  • The .float classes help in floating an element to the left or right, or disable floating, as per the current viewport size.

  • These utility classes use the same viewport breakpoints as the grid system.

  • The .float utility classes have no effect on flex items.

The .float classes available in Bootstrap are as follows:

  • .float-start - This class is used to float an element to the left within a grid column.

  • .float-end - This class is used to float an element to the right within a grid column.

  • .float-none - This class does not apply any float class to the element.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Float</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Float utilities</h4>
    <div class="float-start">
      <button class="btn btn-success">Float start (on left)</button>
    </div>
    <div class="float-end">
      <button class="btn btn-primary">Float end (on right)</button>
    </div>
    <div class="float-none">
      <button class="btn btn-warning">Float none</button>
    </div>
  </body>
</html>

Responsive

Each .float value can be applied to all the responsive variations of viewports, such as, sm, md, lg, xl and xxl.

Here is the list of all the support .float classes:

  • .float_start

  • .float_end

  • .float_none

  • .float_sm_start

  • .float_sm_end

  • .float_sm_none

  • .float_md_start

  • .float_md_end

  • .float_md_none

  • .float_lg_start

  • .float_lg_end

  • .float_lg_none

  • .float_xl_start

  • .float_xl_end

  • .float_xl_none

  • .float_xxl_start

  • .float_xxl_end

  • .float_xxl_none

Note: Kindly resize the browser, to see the floating of text.

Let us see an example of these utility classes on various viewports:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Float</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4><u>Responsive float utilities</u></h4>
    
      <div class="float-sm-start p-2 text-primary">
          The text floats to the left when the screen size is small or wider.
      </div>
      
      <div class="float-md-end p-2 text-success">
          The text floats to the right when the screen size is medium or wider.
      </div>
      
      <div class="float-lg-none p-2 text-danger">
          The text does not float to the right when the screen size is large or wider.
      </div>
      
      <div class="float-xl-end p-2 text-info">
          The text floats to the right when the screen size is extra large or wider.
      </div>
      </div>
  </body>
</html>
Advertisements