Signup/Sign In
PUBLISHED ON: JUNE 2, 2021

Bootstrap Float

The float is a CSS property that places the element on the left or right side of the container, allowing the text and inline text to wrap around it. Bootstrap provides the float utility class to float an element to left, right, or disable floating based on the current size of the viewport.

Example: Adding float utility class to div elements

The float utility class can be added using the .float-* class.

  • .float-start class floats the element to the left of the containing block.
  • .float-end class floats the element to the right of the containing block.
  • .float-none class removes the float from the element.

Here is a program illustrating the usage of float elements in the container.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>  

</head>
<body>
 <div class="container mt-3 border border-secondary">
    <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>		   
	   
  </div>
  </body>
</html>

Output:

Here is the output of the above program.

Float classes

Responsive Float Classes

Float classes also support responsive classes. It means that we can set whether to float elements or not for the particular viewports. Here is the list of responsive float classes.

Classes Description
.float-start It is used to float elements to the left of containing block for all types of the viewport.
.float-end It is used to float elements to the right of containing block for all types of the viewport.
.float-none The elements must not float for any type of viewport.
.float-sm-start It is used to float elements to the left of the containing block for the small screen devices.
.float-sm-end It is used to float elements to the right of the containing block for the small screen devices.
.float-md-start It is used to float elements to the left of the containing block for the medium screen devices.
.float-md-end It is used to float elements to the right of the containing block for the medium screen devices.
.float-lg-start It is used to float elements to the left of the containing block for the large screen devices.
.float-lg-end It is used to float elements to the right of the containing block for the large screen devices.
.float-xl-start It is used to float elements to the left of the containing block for the extra-large screen devices.
.float-xl-end It is used to float elements to the right of the containing block for the extra-large screen devices.
.float-xxl-start It is used to float elements to the left of the containing block for the extra extra large screen devices.
.float-xxl-end It is used to float elements to the right of the containing block for the extra extra large screen devices.
.float-sm-none The element must not float for small screen devices.
.float-md-none The element must not float for medium screen devices.
.float-lg-none The element must not float for large screen devices.
.float-xl-none The element must not float for extra-large screen devices.
.float-xxl-none The element must not float for extra extra screen devices.

Example: Using Responsive float classes

Here in the example, we have used responsive float classes to float elements on different types of viewports.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>  
</head>
<body>
 <div class="container mt-3 border border-secondary">
    <div class="float-start">Float start on all viewport sizes</div><br>
	<div class="float-sm-end">Float end on medium viewport</div><br>
	<div class="float-lg-none">Don't float on large viewports</div>	
    <div class="float-xxl-end">Float end on extra extra large viewports</div>		   	
  </div>
  </body>
</html>

Output:

Here is the output of the above program

Responsive float classes

Conclusion

So the Float can be easily used to float elements within the given block using the Bootstrap float utility classes. Bootstrap also provides responsive float classes to float elements across any breakpoints.



About the author: