Bootstrap 5 aligning buttons in a row

user_17128924 0
Viewed 1621

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:

  1. https://gyazo.com/c23f2eade4614380aec547b11e61387a
  2. https://gyazo.com/e40a678b02c9f641f746b1cfbe83d03f

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

bootstrap-5 css html javascript
6 Answers

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

user_37952950

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;.

user_156725590

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>

user_92423010

You could wrap the buttons in a flex, and then control the width of your flex-div using custom css, or Bootstrap Grid System. JSFiddle

<div class="row">
  <div class="col-6 mx-auto">
    <div class="d-flex align-items-center justify-content-evenly">
      <button class="btn btn-primary">Button 1</button>
      <button class="btn btn-primary">Button 2</button>
    </div>
  </div>
</div>
user_95860730

Use the flex CSS in the example, the counter is just for numbering the buttons, it's not required.

.center {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  counter-reset: button;
}

.btn::before {
  counter-increment: button;
  content: counter(button);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
  <section class='row'>
    <div class='col center'>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
    </div>
  </section>

user_28132240

You dont need bootstrap for that. You can easily do alignment using flex layout. Bootstrap can be used for only styling elements.

Read More: a-guide-to-flexbox 

.container{
  margin-top:20px;
  display: flex;
}

.container{
  display: flex;
}
.cl-1{
  justify-content: center;
}
.cl-1 button{
  margin-right: 20px;
}
.cl-2{
  justify-content: space-between;
}
.cl-3{
  justify-content: space-evenly;
}
.cl-4{
  justify-content: space-around;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Center align</h2>
<div class="container text-center cl-1">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-beetween</h2>
<div class="container text-center cl-2">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-evenly</h2>
<div class="container text-center cl-3">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-around</h2>
<div class="container text-center cl-4">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

user_15943590
Related