![[Fixed]: Bootstrap .pull-right and .pull-left not working](https://www.webdevsplanet.com/assets/images/gallery/bootstrap-pull-left-and-pull-right-not-working.webp)
[Fixed]: Bootstrap .pull-right and .pull-left not working
Trying to position HTML page elements to the left or to the right using Bootstrap .pull-left or .pull-right respectively but can't seem to work for you?
This is a very common phenomenon that many developers have experienced.
Why aren't .pull-left and .pull-right working?
The primary reason is that you are trying to use them either in Bootstrap 4 or a later version.
They may work or not depending on the bootstrap version of your website.
Bootstrap framework is under continuous improvement where each update introduces some new changes that may affect how various things used to work.
Below is how you position elements in Bootstrap depending on your Bootstrap version.
Bootstrap 3 and earlier
.pull-left and .pull-right work perfectly well.
How they work
The .pull-left class is used to float/position an element to the left, relative to the parent element.
The .pull-right class is used to float/position an element to the right, relative to the parent element.
You just have to add the classes to the elements you want to position as below:
<element class="pull-left">Something here...</element>
<element class="pull-right">Something here...</element>
Example
<!DOCTYPE html>
<html>
<head>
<title>How to fix bootstrap .pull-left and .pull-right</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center text-success">Positioning elements in bootstrap</h1>
<p class="pull-left">This paragraph floats to the left</p>
<p class="pull-right">This paragraph floats to the right</p>
</div>
</body>
</html>
Below is a screenshot of the above code:
Bootstrap 4
Since bootstrap 4, these classes were deprecated, left out, and replaced as below:
.pull-left was replaced with .float-left to float elements to the left.
.pull-right was replaced with .float-right to float elements to the right.
.float-none was introduced to remove any previously set float.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to fix bootstrap .pull-left and .pull-right</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center text-success">Positioning elements in bootstrap</h1>
<p class="float-left">Floating to left with .float-left</p>
<p class="float-right">Floating to right with .float-right</p>
</div>
</body>
</html>
The screenshot of the above code:
Bootstrap 5
Starting from Bootstrap 5, .float-left and .float-right were deprecated and replaced as below:
.float-left was replaced with .float-start to float elements to the left.
.float-right was replaced with .float-end to float elements to the right.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to fix bootstrap .pull-left and .pull-right</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center text-success">Positioning elements in bootstrap</h1>
<p class="float-start">Floating to left with .float-start</p>
<p class="float-end">Floating to right with .float-end</p>
</div>
</body>
</html>
The screenshot of the above code:
Conclusion
pull-left and pull-right classes may or may not work in positioning your elements. If used in Bootstrap 3 or earlier, they will work perfectly. If used in bootstrap 4 or later, they won't work.
When positioning elements in bootstrap 4, use float-left and float-right instead. These also won't work with bootstrap 3 or bootstrap 5.
Lastly, when positioning elements in Bootstrap 5, use float-start and float-end instead. These only work Bootstrap 5 (Bootstrap 5 is the latest version at the time of writing this article).
All you need to fix the positioning issue is to identify the version of Bootstrap you are using in your web project, and then use the correct class for that version.
It is my great hope that you have found this article helpful and were able to fix your problem. Have a great coding time.
