CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Grizzly
Grizzly

Reputation: 5943

Vertical Align Center Bootstrap 4 Form-Group Row

I have a form that looks like this:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal card card-body my-bg">

        <div class="form-group row justify-content-center align-content-center">
            <div class="col-md">
                @Html.Label("My Label", new { @class = "control-label col-md-12" })
                <div class="col-md-12">
                    @Html.TextBoxFor(model => model.TestName, null, new { @class = "form-control", @disabled = "disabled" })
                </div>
            </div>
            <div class="col-md">
                @Html.Label("Label Two", new { @class = "control-label col-md-12" })
                <div class="col-md-12">
                    @Html.TextBoxFor(model => model.TestProperty, null, new { @class = "form-control", @disabled = "disabled" })
                </div>
            </div>
        </div>
    </div>
}

As you can see I have tried justify-content-center align-content-center, but they aren't vertically centering my form.

How can I vertically center my form?

Upvotes: 3

Views: 3149

Answers (2)

Robert
Robert

Reputation: 6967

I'm not sure I understand your issue with the form being left-aligned. Based on the code you've provided each form element would take up 100% of its respective column...

That being said, there are structural errors in your code that could cause a less-than-desired output. You're applying row correctly to form-group but you're not reiterating row for your nested grid. You're also not using align-items-center which will vertically orient child columns respective to the largest height.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="card card-body">
  <div class="row align-items-center">
    
    <div class="col">
      <div class="form-group row">
        <label class="col-form-label col-12">My Label</label>
        <div class="col-12 my-5 ">
          <textarea name="TestName" class="form-control"></textarea>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="form-group row">
        <label class="col-form-label col-12">Label Two</label>
        <div class="col-12">
          <textarea name="TestProperty" class="form-control"></textarea>
        </div>
      </div>
    </div>
    
  </div>
</div>

In the above example I've restructured your form to apply row align-items-center properly, and then moved your form-group row combination within each nested col.

I've also set the breakpoints to the smallest options for the purpose of viewing them in SO, and applied my-5 to the first <textarea> container to illustrate how align-items-center causes the sibling columns to center vertically.

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362360

Vertical center is relative to the height of the container, and in this case the container (.card) has no defined height.

Give the card a height, use justify-content-center to vertically center the card contents...

https://www.codeply.com/go/FdHqOtS3Av

.card {
    min-height: 300px;
}

Upvotes: 4

Related Questions