Vertically center form of Bootstrap 4

Question

I need center (horizontally and vertically) content of my enter page. I am using Bootstrap 4 beta, and I go by guide on BS page, but it's not working - https://getbootstrap.com/docs/4.0/layout/grid/

    html, body {
    height: 100%;
    }

    .bg-color {
        width: 100%;
        height: auto;
        min-height: 100% !important;
        background: #4e4376;  
        background: -webkit-linear-gradient(to bottom, #2b5876, #4e4376);  
        background: linear-gradient(to bottom, #2b5876, #4e4376);
        
    }
    body::after {
        content: "";
        background-image: url("assets/group.jpg");
        opacity: 0.1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;  
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; 
    }

    <div class="container-fluid">
        <div class="row justify-content-center align-self-center">
            <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3 h-100">
                <form action="">
                <div class="form-group">
                    <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Password" type="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-info btn-lg btn-block">Sign In</button>
                </div>
              </form>
          </div>
      </div>
  </div>

Can you help me to fix it? Thanks

For better explaining what I need:

@isherwood I do not need starter template ... vertical center not working, bootstrap like framework do, check updated question. — Denis Stephanov, Aug 29 '17 at 22:00
Here's a codepen that might help... https://codepen.io/cowanjt/pen/PKxEmX It implements some of the code referenced by questions similar to yours. — Jade Cowan, Aug 29 '17 at 22:16
@cwanjt thanks, you should write it as answer, for mark it as solution — Denis Stephanov, Aug 29 '17 at 22:23
@DenisStephanov, the starter wasn't for you. It was for your would-be volunteers. You didn't provide a demo, so I did. — isherwood, Aug 30 '17 at 00:29

score -3 · Answer 1 · answered Aug 29 '17 at 21:35

You have to include bootstrap in your project. Notice the first line of html.

html, body {
    height: 100%;
    }

    .bg-color {
        width: 100%;
        height: auto;
        min-height: 100% !important;
        background: #4e4376;  
        background: -webkit-linear-gradient(to bottom, #2b5876, #4e4376);  
        background: linear-gradient(to bottom, #2b5876, #4e4376);
        
    }
    body::after {
        content: "";
        background-image: url("assets/group.jpg");
        opacity: 0.1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;  
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
        <div class="row justify-content-center align-self-center">
            <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3 h-100">
                <form action="">
                <div class="form-group">
                    <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Password" type="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-info btn-lg btn-block">Sign In</button>
                </div>
              </form>
          </div>
      </div>
  </div>

I have it ... I put into question only html and css code of body, bootstrap like framework is working, only vert. center nor. Check image what I added now. — Denis Stephanov, Aug 29 '17 at 22:01
top: 50% is a very temporary solution and not ideal for a responsive website — Deepika Wadhera, Feb 10 '21 at 07:07

Vertically center form of Bootstrap 4

1 Answers1