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:
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:
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> 
Responsive Float Classes:
| Class | Description |
|---|
| float-sm-left | It makes the element to float left on viewport of size greater than 576px (sm). |
| float-sm-right | It makes the element to float right on viewport of size greater than 576px (sm). |
| float-sm-none | It makes the element not to float on viewport of size greater than 576px (sm). |
| float-md-left | It makes the element to float left on viewport of size greater than 768px (md). |
| float-md-right | It makes the element to float right on viewport of size greater than 768px (md). |
| float-md-none | It makes the element not to float on viewport of size greater than 768px (md). |
| float-lg-left | It makes the element to float left on viewport of size greater than 992px (lg). |
| float-lg-right | It makes the element to float right on viewport of size greater than 992px (lg). |
| float-lg-none | It makes the element not to float on viewport of size greater than 992px (lg). |
| float-xl-left | It makes the element to float left on viewport of size greater than 1200px (xl). |
| float-xl-right | It makes the element to float right on viewport of size greater than 1200px (xl). |
| float-xl-none | It 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:
Similar Reads
Differences between Bootstrap and JQuery UI Bootstrap: Bootstrap is a framework for front-end web development.it makes web development faster and easier. It contains HTML and CSS based design templates for various responsive front-end designing, as well as optional JavaScript plugins. JQuery UI: JQuery UI is a collection of GUI widgets and th
3 min read
Flexbox utilities in bootstrap with examples The Flexible Box Layout Module in bootstrap is used for designing the flexible and responsive layout structure. It is used in Bootstrap 4. The d-flex class is used to create a simple flexbox container Syntax: <div class="d-flex p-2"></div>The d-inline-flex class is used to create an inli
11 min read
Spacing in Bootstrap with Examples Spacing in Bootstrap refers to the system of predefined margin and padding utility classes that enable developers to add space around elements easily. These classes facilitate layout control and improve visual presentation in web applications.The following Syntax are used in the Various Classes for
3 min read
Media Objects in Bootstrap with Examples The Bootstrap Media Objects like images or videos can be aligned to the left or to the right of some content in an easy and efficient manner.The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.The media
5 min read
Display Property in Bootstrap with Examples In Bootstrap, the display property controls the layout behavior of elements. Bootstrap provides utility classes like d-none (hide), d-block (display as block), d-inline (display as inline), etc., for responsive display manipulation. The available classes are: Class NameDescription.d-blockSets the di
2 min read
Responsive Video or Slideshow Embeds in Bootstrap with Examples Bootstrap allows creating responsive video or slideshow embeds based on the width of the display or parent element by creating a native ratio that scales with the device. Using responsive video or slideshow embeds the content can be scaled automatically as per the screen size or the parent container
1 min read
Screen Reader utilities in bootstrap with Examples The screen reader utility in Bootstrap helps to restrict an element to the screen readers only. That is by using the screen reader utility we can hide an element in all other devices except for screen readers. The Screen Reader utility also provide an option to display the hidden elements again when
2 min read
Input Groups in Bootstrap with Examples Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs. Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes
7 min read
Bootstrap Buttons Bootstrap Buttons are pre-designed styled buttons elements that come in various styles, colors, and sizes. Bootstrap buttons are pre-defined by Bootstrap classes. Solid ButtonsBootstrap provides us with a series of classes that correspond to different solid button styles. These classes are listed be
2 min read
Responsive images in Bootstrap with Examples Responsive images in Bootstrap adjust automatically to fit different screen sizes, Bootstrap provides utilities to create responsive images that adapt to various screen sizes. By applying the img-fluid class, images scale proportionally within their parent containers, ensuring optimal viewing on dif
3 min read