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