Bootstrap | Float utilities with Examples
Last Updated :
20 Jan, 2022
Bootstrap provides us a series of float utility classes, that allows an element to float left, right, or make it not to float, just like CSS float property. In addition to this, bootstrap provides responsive float classes, that makes an element float based on the viewport size.
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>
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1 class="head">GeeksForGeeks</h1>
<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>
</body>
</html>
|
- float-right: It makes the element to float right on all viewport sizes.
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1 class="head">GeeksForGeeks</h1>
<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>
</body>
</html>
|
- float-none: It makes the element not to float across all viewport sizes.
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1 class="head">GeeksForGeeks</h1>
<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>
</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>
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1 class="head">GeeksForGeeks</h1>
<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>
</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>
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1 class="head">GeeksForGeeks</h1>
<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>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...