How to align button right side in bootstrap 4?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to align button right side in bootstrap 4.

To align button right side, put .text-right class to create align button right side in bootstrap 4.

You can simply use an element containing the class .text-right to right-align your bootstrap buttons in a block box or grid column.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Step 3: Define its class name

After that, create the button right side in with a class name .text-right.

    <div class="container">
        <div class="row">
            <h2>Align button right side</h2>
            <div class="col-md-12 bg-light text-right">
                <button type="button" class="btn btn-primary">Cancel</button>
                <button type="button" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Right Align Bootstrap Buttons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <h2>Align button right side</h2>
            <div class="col-md-12 bg-light text-right">
                <button type="button" class="btn btn-primary">Cancel</button>
                <button type="button" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
</body>
</html>

Check the output of the above code example.

Bootstrap, Button, Right

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts