How can I get the same distance between two buttons and a select element on the same line?

Question

I use Bootstrap 5 and I tried to place a select and 2 buttons on the same line (select should be in center, one button on the right side of the select, and another button on the left side), but I didn't succeed two things

• get the same distance between select and buttons
• get the same distance between buttons and div end.

As in the image: select should have most of the space from line, buttons should not touch the select, buttons should not touch the div end. The problem is about the distance between buttons and select and the distance between buttons and div end.

Please see the image. (the problems can be seen more clearly on small screens)

HTML: (I don't use other CSS file)

            <div class="row mt-3 mb-2 text-center">
                <div class="col-2">
                    <button class="btn btn-success">Prev</button>
                </div>
                <div class="col-8">
                    <select class="form-select" aria-label="Default select example">
                        <option selected>Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
                <div class="col-2">
                    <button class="btn btn-success">Next</button>
                </div>
            </div>

Note: the border ins't included in html, I added that border with Paint editor just for a better view of the situation.

Answer 1

I'd use a simple flex layout instead of trying to bang columns into shape. Use flex-fill on the center element to get it to stretch, and add horizontal (x-axis) margin & padding for spacing. I used both to match the default container padding. You could certainly use other combinations if you don't use a container.

body {
  background: pink !important; /* for spacing visualization */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid my-2">
  <div class="d-flex justify-content-between">
    <div>
      <button class="btn btn-success">Prev</button>
    </div>

    <div class="flex-fill mx-2 px-1">
      <select class="form-select" aria-label="Default select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>

    <div>
      <button class="btn btn-success">Next</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>