Search code examples
csstwitter-bootstrapbootstrap-4centercol

How can i center one bootstrap column/form in the exact center of my screen?

I've tried for hours but cannot find a solution, my problem:

Im trying to create a page login page where the login form is horizontal and vertical centered in the page. I'm working with syncfusion blazor and created the container full screen:

HTML:

<div class="control-section" style="min-height: 100vh !important; background-color: red !important;">
    
</div>

CSS:

body, html {
   margin: 0 !important;
   padding: 0 !important;
}

.container {
 max-width: 100% !important;
 width: 100% !important;
 height: 100% !important;
 padding-right: 0px !important;
 padding-left: 0px !important;
}

.pb-3 {
  padding-bottom: 0rem !important;
}

This works and the container is set to full width and height without any scrollbars.

However I'm trying to create one column in this page which is vertical and horizontal centered in center of page.

Note: I want to keep the background of container red because I want to display an full screen image there once column/login form is finished. Therefore im unable to use rows I think?

What I've tried so far:

<div class="control-section" style="min-height: 100vh !important; background-color: red !important;">
     <div class="col-xs-12 col-sm-2 offset-5" style="background-color: blue !important;">Test</div>
</div>

This created a column with width of 2 and offset of 5 so its centered horizontal, however I'm unable to center or vertical.. Can anyone help me out with this?

UPDATE after answer

I used the centerArea code of answer and put the form inside my row:

.HTML:

<div class="control-section centerArea">
    <div class="col-xs-12 col-sm-2" style="background-color: blue !important;">
        <section>
            <form id="account" method="post">
                <hr />
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group" style="margin-top: 150px !important;">
                    <label asp-for="Input.Email"></label>
                    <input asp-for="Input.Email" class="form-control" />
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.Password"></label>
                    <input asp-for="Input.Password" class="form-control" />
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <div class="checkbox d-inline-block">
                        <label asp-for="Input.RememberMe">
                            <input asp-for="Input.RememberMe" />
                            @Html.DisplayNameFor(m => m.Input.RememberMe)
                        </label>
                    </div>
                    <div class="d-inline-block">
                        <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Log in</button>
                </div>
                <div class="form-group">
                    <p>
                        <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
                    </p>
                    <p>
                        <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
                    </p>
                    <p>
                        <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
                    </p>
                </div>
            </form>
        </section>
    </div>
</div>

.CSS:

<style>
body, html {
    margin: 0 !important;
    padding: 0 !important;
}

.container {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.pb-3 {
    padding-bottom: 0rem !important;
}

.centerArea {
    min-height: 100vh !important;
    background-color: red !important;
    color: white;
    display: flex;
    justify-content: center;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-group {
    display: block !important;
    margin: 0 auto !important;
    max-width: 90% !important;
    margin-bottom: 1% !important;
}

.d-inline-block {
    display: inline-block !important;
}
</style>

This outputs the following:

enter image description here

As u can see the content is horizontal centered but not vertical? I'm trying to make something like this:

enter image description here

Thanks in advance

Solution

  • Bootstrap only solution :

    making the wrapper div.control-section as a flex container by giving it d-flex class and assign m-auto to the .col-* element.

    d-flex, m-auto are Bootstrap classes. Also, I added Bootsrap's p-2 class to the wrapper div.control-section to have a little spacing if the viewport's height is less than the content height.

    .control-section {
  min-height: 100vh;
  background: rgba(0, 0, 0, .4) url("https://images.unsplash.com/photo-1506765515384-028b60a970df") center no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
}
    <!-- importing Bootsrap (just for the demo) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- Your code -->
<div class="control-section d-flex p-2">
  <div class="col-11 col-md-8 col-lg-4 m-auto" style="background-color: blue !important;">
    <section>
      <form id="account" method="post">
        <hr />
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
          <label asp-for="Input.Email"></label>
          <input asp-for="Input.Email" class="form-control" />
          <span asp-validation-for="Input.Email" class="text-danger"></span>
        </div>
        <div class="form-group">
          <label asp-for="Input.Password"></label>
          <input asp-for="Input.Password" class="form-control" />
          <span asp-validation-for="Input.Password" class="text-danger"></span>
        </div>
        <div class="form-group">
          <div class="checkbox d-inline-block">
            <label asp-for="Input.RememberMe">
                            <input asp-for="Input.RememberMe" />
                            @Html.DisplayNameFor(m => m.Input.RememberMe)
                        </label>
          </div>
          <div class="d-inline-block">
            <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Log in</button>
        </div>
        <div class="form-group">
          <p>
            <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
          </p>
          <p>
            <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
          </p>
          <p>
            <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
          </p>
        </div>
      </form>
    </section>
  </div>
</div>