Estoy tratando de que los botones en mi página web estén uno al lado del otro en el medio de la página, estas son las 2 clases de arranque 5 que he intentado y no son como quiero que se vean:
Como referencia, algunas preguntas tendrán respuestas con varios botones (hasta 10: https://gyazo.com/15d810f8c0f79f23d12463db9ba50e2a ), también me gustaría que estuvieran igualmente espaciadas en una fila, algo como esto: https://gyazo. com/ca1ab61aa7fef54f1cf1a099cb56a5e0
No estoy seguro de si esto cambia algo, pero los botones se agregan mediante un bucle for en javascript.
Cualquier consejo sería muy apreciado, he estado bastante atascado en esto
Tengo éxito con class="btn-group" Ejemplo:
<div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>Ver más detalles en:https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Agregue un elemento que llene todos los botones, en su carpeta css, diseñe ese div con estos estilos:
{ display:flex; align-item:center; justify-content: space-around; } Si son muchos botones, deja que la display: flex; , para display: inline-flex; .
No necesita ninguna clase por defecto, se alinearán en una fila y podemos usar el centro de texto en el contenedor para que se centren horizontalmente
<script src="https://unpkg.com/@popperjs/core@2.11.0/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container text-center"> <button class="btn btn-primary" type="submit">Button</button> <button class="btn btn-primary" type="submit">Button</button> <button class="btn btn-primary" type="submit">Button</button> </div>