CODEWITHSUNDEEP
formsbootstrap-4
BeNice
BeNice

Reputation: 41

How to Align Cols in Forms Bootstrap

Looking to align this form so it looks more uniform. The alignment is all over the place and changing the the col # doesn't seem to be working. Please help!

 <form>
                <br>
                <div class="row col-6 mx-auto">
                    <div class="form-group col-md-4">
                        <input type="text" class="form-control" placeholder="First name">
                    </div>
                    <div class="form-group col-md-4">
                        <input type="text" class="form-control" placeholder="Last name">
                    </div>
                </div>
                <div class="row col-6 mx-auto">
                    <div class="form-group col-md-4">
                        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                    </div>
                    <div class="form-group col-md-4">
                        <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                    </div>
                </div>
                <div class=" row">
                    <div class=" form-group col-3 mx-auto">
                        <input type="text" class="form-control" id="inputAddress" placeholder="Address 1">
                    </div>
                </div>
                <div class="form-group col-md-4 mx-auto">
                    <input type="text" class="form-control" id="inputAddress2"
                        placeholder="Apartment, studio, or floor">
                </div>
                <div class="form-row col-6 mx-auto">
                    <div class="form-group col-md-3">
                        <input type="text" class="form-control" id="inputCity" placeholder="City">
                    </div>
                    <div class="form-group col-md-2">
                        <select id="inputState" class="form-control">
                            <option selected>State...</option>
                            <option>...</option>
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <input type="text" class="form-control" id="inputZip" placeholder="Zip">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-lg">Sign Up For SoftDev</button>
                <br> Have an Account? <a href="/hompage.html/#loginEmail"> Sign in</a>

            </form>

visual image of what my code looks like

Upvotes: 0

Views: 361

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

nest everything under the same classes as the top ones (which seem to work as you wanted)

code snippet below:

<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <form>
    <br>
    <div class="row col-6 mx-auto">
      <div class="form-group col-md-6">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="form-group col-md-6">
        <input type="text" class="form-control" placeholder="Last name">
      </div>
    </div>
    <div class="row col-6 mx-auto">
      <div class="form-group col-md-6">
        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
      </div>
      <div class="form-group col-md-6">
        <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
      </div>
    </div>
    <div class=" row col-6 mx-auto">
      <div class=" form-group col-12 mx-auto">
        <input type="text" class="form-control" id="inputAddress" placeholder="Address 1">
      </div>
    </div>
    <div class=" row col-6 mx-auto">
      <div class="form-group col-md-12 mx-auto">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
    <div class="row col-6 mx-auto">
      <div class="form-group col-md-5">
        <input type="text" class="form-control" id="inputCity" placeholder="City">
      </div>
      <div class="form-group col-md-3">
        <select id="inputState" class="form-control">
          <option selected>State...</option>
          <option>...</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <input type="text" class="form-control" id="inputZip" placeholder="Zip">
      </div>
    </div>
    <div class="row col-6 mx-auto">
      <div class="form-group col-md-6 mx-auto">
        <button type="submit" class="btn btn-primary btn-lg">Sign Up For SoftDev</button>
      </div>
    </div>
    <br> Have an Account? <a href="/hompage.html/#loginEmail"> Sign in</a>
  </form>
</div>

Upvotes: 1

Related Questions