How to use pull left and pull right in bootstrap?
May 10, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to create pull left and pull right for Bootstrap 3 projects.
The .pull-left
and .pull-right
classes have been replaced with the .float-left
and .float-right
classes in Bootstrap 4. These utility classes are used to float an element to the left or right on the various viewport sizes based on the Bootstrap Grid. It works using the CSS float property.
- Using
.pull-left
and.pull-right
classes - These classes help to float the elements:
- The
.pull-left
class is used to float the element to the left. - The
.pull-right
class is used to float the element to the right.
Table of contents
- Framework and cdn link setup
- Define its class name
This article will guide you to adding pull left and pull right in Bootstrap with example.
Step 1: Framework and cdn link setup
First of all, load the Bootstrap framework and CSS into the head tag of your webpage.
<!-- Bootstrap 3 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Step 2: Define its class name
After that, create the input tag with a class name .pull-left
and wrap this input into the div element and define its class name .pull-right
.
<div class="container">
<h1 style="color:rgb(228, 65, 190)">
aGuideHub
</h1>
<b>Bootstrap Floating utility class</b>
<br>
<div class="pull-left">
This div floats to the left.
</div>
<br>
<div class="pull-right">
This div floats to the right.
</div>
<br>
</div>
Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Floating utility class</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 style="color:rgb(228, 65, 190)">
aGuideHub
</h1>
<b>Bootstrap Floating utility class</b>
<br>
<div class="pull-left">
This div floats to the left.
</div>
<br>
<div class="pull-right">
This div floats to the right.
</div>
<br>
</div>
</body>
</html>
In the above code, we have used .pull-left
and .pull-right
class to pull left and pull right in bootstrap
Check the output of the above code example.
All the best 👍