![[Solved]: Bootstrap .float-left and .float-right not working](https://www.webdevsplanet.com/assets/images/gallery/bootstrap-float-left-and-float-right-not-working.webp)
[Solved]: Bootstrap .float-left and .float-right not working
If you are using .float-left and .float-right bootstrap classes to align your website elements to the left or to the right side of the webpage respectively but it doesn't work, then this article is for you.
In this article, we will explore the reason why this may be happening and the different ways in which you can fix it.
What are float-left and float-right?
These are bootstrap 4 classes for aligning HTML elements within the page or inside another element such as a div.
To align elements using them, simply add a class to the elements(eg, div, p, etc) with the value "float-left" or "float-right" to align the elements to the left and right respectively.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap float-left and float-right</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.container{
margin-top: 40px;
}
p {
width: 60%;
}
</style>
</head>
<body>
<div class="container">
<p class="float-left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ipsum laoreet, varius arcu sed, scelerisque urna. Aliquam sit amet imperdiet augue. Nulla quis nisi sit amet justo dictum congue.</p>
<p class="float-right">In hac habitasse platea dictumst. Vestibulum elit augue, ullamcorper at mattis sit amet, tristique sed ex. Aliquam neque nisl, imperdiet pharetra orci sit amet, vulputate ullamcorper mi. Fusce ac augue enim. Nunc volutpat tincidunt auctor.</p>
<p class="float-left">Morbi sit amet enim lobortis quam rutrum volutpat eu sit amet quam. Integer sed feugiat enim, eu suscipit libero. Nullam commodo, massa sed mattis finibus, lorem dui tempor odio, vel gravida nulla mi id nisi.</p>
<p class="float-right">Donec a augue at sem commodo pulvinar vel ut neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam et lacus tincidunt, sagittis turpis eget, congue eros.</p>
</div>
</body>
</html>
From the above example code, I have set all the paragraphs to occupy 60% width of the parent element using CSS. I have also added the float-left class to the first and third paragraphs and float-right to the second and fourth paragraphs.
Below is the screenshot of the code output, showing how the classes align the elements.
Why bootstrap float-left and float-right may not work and how to fix
In the above section, I defined float-left and float-right as bootstrap 4 elements for positioning elements. This means that they are specific for usage in bootstrap 4.
In bootstrap 3 and earlier versions, we had pull-left and pull-right which were used to align elements to the left and right respectively. In bootstrap 4, the two classes became deprecated and were replaced with float-left and float-right respectively.
Later on when bootstrap 5 was introduced (the latest version at the time of writing this article), the two classes(float-left and float-right) were shortlived and replaced with float-start and float-end respectively.
The Fix
In order for float-left and float-right classes to work, you must be using bootstrap 4.
If you are using bootstrap 3 or an earlier version on the website project, then you must use pull-left and pull-right instead.
If you are using bootstrap 5, then you have to replace the classes with float-start and float-end respectively.
If you don't know which version of bootstrap your website is built on, here is an article I had written on how to check bootstrap version used on any website. Knowing which version of bootstrap you are using is the first step of troubleshooting. Check the bootstrap version the replace the classes with the correct one for the version and this will fix it.
In case this doesn't work, it is highly likely that bootstrap framework is not properly installed on your website project. You should ensure that the bootstrap CSS file is being loaded well on your website.
That's it!
It's my hope that this article has answered your question and you were able to solve your problem.
