I'm trying to get the buttons on my webpage to be side by side in the middle of the page, these are the 2 bootstrap 5 classes I've attempted and they aren't as I want them to look:
For reference, some questions will have answers with multiple buttons (up to 10: https://gyazo.com/15d810f8c0f79f23d12463db9ba50e2a), I would also like them to be equally spaced in a row, something like this: https://gyazo.com/ca1ab61aa7fef54f1cf1a099cb56a5e0
I'm not sure if this changes anything but the buttons are added using a for loop in javascript.
Any tips would be much appreciated, I've been quite stuck on this
I have success with class="btn-group" Exemple:
<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>
View more detail in: https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Add a element that fill have all the buttons, in your css folder, style that div with these styles:
{
display:flex; align-item:center;
justify-content: space-around;
}
If they are many buttons, let the display: flex;, to be display: inline-flex;.
You dont need any classes by default they will align themselfs in a row and we can use text-center on the container to make them centered horizontally
<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>