¿Cómo alinear el botón al lado derecho del cuadro de texto en Bootstrap?

Bootstrap nos permite alinear elementos usando la clase de utilidad float . Como queremos alinear el botón al lado derecho del cuadro de texto, tenemos que usar la clase float-right
Sintaxis: 
 

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

Ejemplo: 
 

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 style="text-align:center;color:green;">
          GeeksforGeeks
      </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>

Producción: 
 

Nota: aunque de forma predeterminada, los elementos como los botones están alineados a la izquierda, aún podemos usar la clase float-left para mencionarlo específicamente. También podemos usar la clase float-none para eliminar cualquier flotación jerárquica. 
Es importante tener en cuenta que estamos usando Bootstrap 4 aquí, en Bootstrap 3 o Bootstrap 2 podemos usar las clases auxiliares como pull-left , pull-right para alinear los elementos a la izquierda o a la derecha según corresponda.
 

Publicación traducida automáticamente

Artículo escrito por shubhamr238 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *