CODEWITHSUNDEEP
htmlwebformsbootstrap-5
FrontRangeGuy
FrontRangeGuy

Reputation: 131

Properly aligning Bootstrap form elements

I have a form in my ASP.NET web application that uses Bootstrap and contains the following section of code:

                    <div class="row mb-2">
                        <div class="col-sm-4">
                            <label><input type="checkbox" class="align-middle" value="1" name="Credit_Pulled" id="Credit_Pulled">Credit Pulled</label>
                        </div>
                        <div class="col-sm-4">
                            <label><input type="checkbox" class="align-middle" value="1" name="Is_On_Terms" id="Is_On_Terms">Approved For Terms</label>
                        </div>
                        <div class="form-floating col-sm-4">
                            <select class="form-select d-flex" id="Terms_Days" name="Terms_Days">
                                <option value=0 selected>NONE</option>
                                <option value=30>NET-30</option>
                                <option value=60>NET-60</option>
                                <option value=90>NET-90</option>
                            </select>
                            <label for="Terms_Days">Terms Period</label>
                        </div>
                    </div>

There are two problems I can't seem to solve (I have stripped out everything I tried and got it back down to bare basics for purposes of this post). First, as shown by the attached screenshot, the checkbox labels are jammed up against the checkboxes themselves rather than being nicely spaced as shown in the Bootstrap demos. Second, I would like to vertically center the checkboxes rather than having them top-aligned as they are now. I have tried multiple solutions and can't seem to find one that achieves either of my goals. Help would be appreciated!

Screenshot of code output:

Screenshot of output

Upvotes: 0

Views: 42

Answers (1)

emanuele-f
emanuele-f

Reputation: 394

  1. Separate the label from the input and add use the for attribute to make the label clickable

  2. Use align-items-center on the row to vertically center the contents

    <div class="row mb-2 align-items-center">
<div class="col-sm-4">
   <input type="checkbox" value="1" name="Credit_Pulled" id="Credit_Pulled">
   <label class="checkbox-inline" for="Credit_Pulled">Credit Pulled</label>
</div>
<div class="col-sm-4">
   <input type="checkbox" class="align-middle" value="1" name="Is_On_Terms" id="Is_On_Terms">
   <label class="checkbox-inline" for="Is_On_Terms">Approved For Terms</label>
</div>
<div class="form-floating col-sm-4">
   <select class="form-select d-flex" id="Terms_Days" name="Terms_Days">
      <option value=0 selected>NONE</option>
      <option value=30>NET-30</option>
      <option value=60>NET-60</option>
      <option value=90>NET-90</option>
   </select>
   <label for="Terms_Days">Terms Period</label>
</div>

Upvotes: 2

Related Questions