Bootstrap Input Group not working properly

user_8947552 0
Viewed 697

I am trying to align multiple form components in a row, however I got some wired behaviors. Here is what I am trying to achieve:

enter image description here

As you could see, I would like to have the set mark up checkbox, label, amount markup input (number) and markup type (select) in the same line, and here is what I have tried:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div id="price_selection_page" class="border">
   <form class="mt-3 p-2 d-flex">
      <div class="input-group d-flex w-25">
         <input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
         <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
      </div>
      <div class="input-group d-flex">
         <div class="input-group-prepend">
            <input class="form-input" type="number" value="" id="mark-up-amount-input">
         </div>
         <select id="mark-up-select" class="custom-select">
            <option value="percentage">% By Percentage</option>
            <option value="amount">% By Amount</option>
         </select>
      </div>
   </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

But this is what I got when I tried to render it in the browser: enter image description here As you could see, the checkbox and the label are in the same line, but the number input is on a new line, and the select box is also on a new line instead of showing up in the same line as with the number input field.

I am using bootstrap 5 and I would really appreciate some help please!

bootstrap-4 css html
2 Answers

Try use "d-flex" to flex out the content into one row and remove some of your unnecessary tags.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="mt-3 p-2 d-flex">
  <div class="input-group d-flex w-25">
    <input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
    <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
  </div>
  <div class="input-group d-flex">
    <div class="input-group-prepend">
      <input class="form-input" type="number" value="" id="mark-up-amount-input">
    </div>
    <select id="mark-up-select" class="custom-select">
      <option value="percentage">% By Percentage</option>
      <option value="amount">% By Amount</option>
    </select>
  </div>
</form>

user_159009940

Try with:

<form class="mt-3 p-2">
   <div class="form-row">
      <div class="col">
         <input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
         <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
      </div>
      <div class="col input-group">
         <div class="input-group-prepend">
            <input class="form-input" type="number" value="" id="mark-up-amount-input">
         </div>
         <select id="mark-up-select" class="custom-select">
            <option value="percentage">% By Percentage</option>
            <option value="amount">% By Amount</option>
         </select>
      </div>
   </div>
</form>

Look at https://getbootstrap.com/docs/4.0/components/forms/ for further information.

Edit

<!doctype html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>
    <div class="container">

        <form class="mt-3 p-2">
            <div class="form-row row">
                <div class="col-3">
                    <input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
                    <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
                </div>
                <div class="col-6">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <input class="form-input" type="number" value="" id="mark-up-amount-input">
                        </div>
                        <select id="mark-up-select" class="custom-select">
                            <option value="percentage">% By Percentage</option>
                            <option value="amount">% By Amount</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>

    </div>
</body>
user_4185990
Related