Bootstrap Float Utilities

Last Updated : 12 Sep, 2024

Bootstrap provides us a series of float utility classes, that allow an element to float left, or right, or make it not to float, just like CSS float property.

Bootstrap breakpoints: 

  • sm: Viewport greater than 576px.
  • md: Viewport greater than 768px.
  • lg: Viewport greater than 992px.
  • xl: Viewport greater than 1200px.

Common Float Classes:

float-left: It makes the element to float left on all viewport sizes.

Example: 

html 
<!DOCTYPE html>
<html>

<head>
    <!-- Custom CSS -->
    <style>
        h1.head {
            color: green;
            text-align: center;
        }

        div.box {
            height: 150px;
            width: 150px;
            border: 1px dashed black;
            background: #E3F2FD;
            margin: 20px;
        }
    </style>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container"><!-- For making div responsive -->
        <h1 class="head">GeeksForGeeks</h1>

        <!-- float-left, bootstrap class -->
        <div class="float-left box">

        </div>

        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe
            etc with a free online placement preparation
            course. The course focuses on various MCQ's
            & Coding question likely to be asked in the
            interviews & make your upcoming placement
            season efficient and successful.
        </p>

    </div>

    <!-- Link JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
  	</script>
    <script
        src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous">
  	</script>
    <script
        src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous">
  	</script>
</body>

</html>

Output:

bootstrap-float-left

float-right:

It makes the element to float right on all viewport sizes.

Example:

html 
<!DOCTYPE html>

<html>

<head>

    <!-- Custom CSS -->
    <style>
        h1.head {
            color: green;
            text-align: center;
        }

        div.box {
            height: 150px;
            width: 150px;
            border: 1px dashed black;
            background: #E3F2FD;
            margin: 20px;
        }
    </style>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container"><!-- For making div responsive -->
        <h1 class="head">GeeksForGeeks</h1>

        <!-- float-right, bootstrap class -->
        <div class="float-right box">

        </div>

        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe
            etc with a free online placement preparation
            course. The course focuses on various MCQ's
            & Coding question likely to be asked in the
            interviews & make your upcoming placement
            season efficient and successful.
        </p>

    </div>

    <!-- Link JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script
        src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script
        src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>

</html>

Output: 

bootstrap-float-right

float-none:

It makes the element not to float across all viewport sizes. 

Example: 

html 
<!DOCTYPE html>

<html>

<head>
    <!-- Custom CSS -->
    <style>
        h1.head {
            color: green;
            text-align: center;
        }

        div.box {
            height: 150px;
            width: 150px;
            border: 1px dashed black;
            background: #E3F2FD;
            margin: 20px;
        }
    </style>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container"><!-- For making div responsive -->
        <h1 class="head">GeeksForGeeks</h1>

        <!-- float-none, bootstrap class -->
        <div class="float-none box">

        </div>

        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe
            etc with a free online placement preparation
            course. The course focuses on various MCQ's
            & Coding question likely to be asked in the
            interviews & make your upcoming placement
            season efficient and successful.
        </p>

    </div>

    <!-- Link JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
  	</script>
    <script
        src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous">
  	</script>
    <script
        src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous">
  	</script>
</body>

</html>
  • Output: 
bootstrap-float-none


Responsive Float Classes: 

ClassDescription
float-sm-leftIt makes the element to float left on viewport of size greater than 576px (sm).
float-sm-rightIt makes the element to float right on viewport of size greater than 576px (sm).
float-sm-noneIt makes the element not to float on viewport of size greater than 576px (sm).
float-md-leftIt makes the element to float left on viewport of size greater than 768px (md).
float-md-rightIt makes the element to float right on viewport of size greater than 768px (md).
float-md-noneIt makes the element not to float on viewport of size greater than 768px (md).
float-lg-leftIt makes the element to float left on viewport of size greater than 992px (lg).
float-lg-rightIt makes the element to float right on viewport of size greater than 992px (lg).
float-lg-noneIt makes the element not to float on viewport of size greater than 992px (lg).
float-xl-leftIt makes the element to float left on viewport of size greater than 1200px (xl).
float-xl-rightIt makes the element to float right on viewport of size greater than 1200px (xl).
float-xl-noneIt makes the element not to float on viewport of size greater than 1200px (xl).

Example: float-md-right. 

html 
<!DOCTYPE html>

<html>
<head>
    <!-- Custom CSS -->
    <style>
      h1.head{
        color: green;
        text-align: center;
      }
      div.box{
        height: 150px;
        width: 150px;
        border: 1px dashed black;
        background: #E3F2FD;
        margin: 20px;
      }
    </style>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
  
<body>
    <div class="container"><!-- For making div responsive -->
      <h1 class="head">GeeksForGeeks</h1>

      <!-- float-md-right, bootstrap class -->
      <div class="float-md-right box">
        
      </div>

      <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
      </p>
      
    </div>

    <!-- Link JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
    	</script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" 
            integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" 
            crossorigin="anonymous">
    	</script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
            integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
            crossorigin="anonymous">
    	</script>
</body>
  
</html>

Output: 

Note: We can use more that one float utility class simultaneously to get the desired results. For example we may set float-right and float-md-left, to float element to right on viewport size less than 768px and float to left when viewport is greater than 768px. 

Example: 

html 
<!DOCTYPE html>

<html>
<head>
     <!-- Custom CSS -->
    <style>
      h1.head{
        color: green;
        text-align: center;
      }
      div.box{
        height: 150px;
        width: 150px;
        border: 1px dashed black;
        background: #E3F2FD;
        margin: 20px;
      }
    </style>

    	<!-- Bootstrap CSS -->
    	<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
              integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
              crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container"><!-- For making div responsive -->
      <h1 class="head">GeeksForGeeks</h1>

      <!-- float-right float-md-left, bootstrap classes -->
      <div class="float-right float-md-left box">

      </div>

      <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
      </p>

    </div>

    <!-- Link JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
  	</script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" 
            integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" 
            crossorigin="anonymous">
  	</script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
            integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
            crossorigin="anonymous">
  	</script>
</body>

</html>

Output: 

Comment
Article Tags:
Web Technologies
Bootstrap

Explore