How to align button to right side of text box in Bootstrap?

Last Updated : 29 Jul, 2024

Aligning a button to the right of a text box in Bootstrap involves enclosing both within an "input-group" container. By adding the "input-group-append" class to the container, Bootstrap automatically positions the button to the right of the text box.

There are some Common approaches :

Table of Content

Approach 1: Using float-right
Approach 2 : Using Flexbox

Approach 1: Using float-right

To align a button to the right side of a text box in Bootstrap, apply the class float-right to the button element, ensuring it floats to the right within its container for proper alignment.

Syntax

<button class="btn btn-success btn-lg float-right" type="submit">Submit</button>

Example: In this example To align a button to the right side of a text box in Bootstrap, add the class "float-right" to the button element for automatic alignment within its container.

html

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Button Alignment</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h1 >
           button alignment 
      </h1>
        <form>
            <div class="form-group">
                <label for="">Enter Your Name:</label>
                <input class="form-control" 
                       type="text" 
                       placeholder="Input Your Name Here">
            </div>
            <div class="form-group">
                <button class="btn btn-success btn-lg float-right" 
                        type="submit">
                     Submit 
                </button>
            </div>
        </form>
    </div>
</body>

</html>

Output:

ride-side-alignment-of-button-to-the-text-box-in-Bootstrap — Button alignment to right side of text box in bootstrap example Output

Approach 2 : Using Flexbox

To align a button to the right side of a text box in Bootstrap using Flexbox, enclose both elements in a div with display: flex;. Apply "ml-auto" class to the button for automatic left margin, pushing it to the right.

Syntax:

<div class="d-flex">
    <input type="text" class="form-control" placeholder="Text">
    <br>
    <button class="btn btn-outline-secondary ml-auto">
        Button
    </button>
</div>

Example: In this example To align a button to the right side of a text box in Bootstrap, use the "d-flex" class for Flexbox, and apply "ml-auto" to the button for automatic alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Button Alignment</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h3 > 
            Button alignment to right side of text box
        </h3>
        <form>
            <div class="d-flex">
                <input type="text" class="form-control" placeholder="Text">
                <br>
                <button class="btn btn-outline-secondary ml-auto">
                    Button
                </button>
            </div>

        </form>
    </div>
</body>

</html>