How to use pull left and pull right in bootstrap?

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

Bootstrap, Pull, Left, And, Pull, Right

All the best 👍