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.
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
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.
