Align button groups some to the left and some to the right

Question

How can I align button groups, 3 buttons to the left and another 3 buttons to the right with an input field in the middle in a div.

<div class="container">
  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>

  <div>
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>
</div>

Before: before applying your answer

after applying

This is how I want to arrange them

Are you using Bootstrap? What CSS have you tried? – j08691 Aug 12 '22 at 19:22 — j08691, Aug 12 '22 at 19:22

score 2 · Answer 1 · answered Aug 12 '22 at 22:35

Flexbox solves your requirement. Learn more here

.container{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.button-group{
display:flex;
}

<div class="container">
  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>

  <div>
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>
</div>

Crimp · Answer 2 · 2022-08-12T19:36:04.927

Like this?

.center{
  text-align: center;
}
.right{
  text-align: right;
}

<div class="container">
  <div>
    <div class="button-group">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>

  <div class="center">
    <input type="text" name="textfield" value="">
  </div>

  <div>
    <div class="button-group right">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>
</div>

Or do you mean like this? Source: (Making a flex item float right)

.button-container{
  display: flex;
}
.right{
  margin-left: auto;
}
.center{
  text-align: center;
}

<div class="container">
  <div class="button-container">
    <div class="button-group left">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
    <div class="button-group right">
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
      <button type="button" class="btn btn-secondary"></button>
    </div>
  </div>

  <div class="center">
    <input type="text" name="textfield" value="">
  </div>
  
</div>

I tried but unfortunately, it didn't work for me. I need three buttons to the right, three to the left, and the text field in the middle. I'm a beginner in HTML and CSS. — Rayan, Aug 12 '22 at 20:24
thank you for your help, please, look at the screenshots after applying your answer to my case. I need you help please — Rayan, Aug 13 '22 at 06:55

Align button groups some to the left and some to the right

2 Answers2