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

user_12965699 0
Viewed 228

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>

enter image description here

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

twitter-bootstrap centering alignment css html
2 Answers

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>

user_12648040

I think instead of this, you should use Flexbox for this as flex is literally the best way to evenly distribute items in a container.

<div class="row mt-3 mb-2 text-center" style="display: flex; justify-content: space-evenly"> <!-- You can also try space-around and space-between instead of space-evenly if that suits your purpose -->

                <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>
user_167751710
Related