Equal Spacing Between Arbitrary Number of Buttons

Question

I have a group of multiple buttons that span multiple lines, but when a button no longer fits on a line it just goes on the next line and the remaining space is left blank. I'd instead like to have equal spacing between the buttons that did make it onto that line so that the line appears full.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">



<div class="mx-auto" style="width: 90%;" >
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>


<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>

</div>

I would like to make it so that the buttons end up spaced out such that there are multiple buttons on a line, but that each line is full. There are a number of different examples that create columns explicitly, but they all seem to assume that you know how many buttons/columns you'll have vs. having buttons of different sizes and auto-adjusting the spacing between them. I'd like to be able to auto-adjust the spacing between so that they'll fill the full line, e.g. space out 1 2, 3 so 1 starts at the far left and 3 ends at the far right. How can I do that?

Answer 1

I see you're using Bootstrap, check out Flex.

You can use something like: d-flex flex-wrap justify-content-between on the parent element.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="w-90 mx-auto d-flex flex-wrap justify-content-between">
    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

    <input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>
</div>

Answer 2

An alternative method is to use a card group for an arbitrary number of buttons both equally spaced and equally sized, all on one line responsively, above the sm breakpoint.

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


<div class="card-group mb-4">
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 2'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 3'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test Much Longer String That Makes This Multiple Lines 4'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 5'>
  </div>
</div>

<hr>

<div class="card-group mb-4">
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test 2'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test little Longer String'>
  </div>
</div>

Answer 3

If you replace the <div class="mx-auto"> wit the classes <div class="d-flex justify-content-between"> the links will be distributed in equal space between them along the parent div.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">



<div class="d-flex justify-content-between" style="width: 90%">
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>


<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>

</div>

In addition, if you want to use mx-auto, you must do it on the element you want to have the auto margin, in your case each <input>. And remember that the item must be display: block or display: inline-block