BeeTricks BeeTricks - 1 month ago 5
CSS Question

Bootstrap jumbotron with half width and centered

I have a password reset like this:
Jumbotron-Form-Bootstrap-My-Attempt

my code from the above picture:

<div class="container">
<div class="jumbotron">
<br><br>
<h2>Forget Password</h2>
<br><br>
<div class="alert alert-info" style="margin-top:18px;">
<a class="close" href="#" data-dismiss="alert" aria-label="close" title="close">&times;</a>
<strong>Info!</strong>
Please enter your email address. You will receive a link to create a new password via email.!
</div>
<div>
<?php if(isset($msg)) { echo $msg; } ?>
</div>
<br>
<form method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="emailUsername">Email or Username:</label>
<input name="email" type="text" class="form-control" id="emailUsername" placeholder="Enter your Email or Username">
</div>
</div>
</div>
<br>
<button name="submit" type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>


and now i want that it will look like this:
Jumbotron-Form-Bootstrap-Wanted but it should be in a jumbotron, cause that looks nice.



My question is now: How can I center the jumbotron(or is there a special class) vertically and horizontally for every device, so that it is in the middle of the page. It should be the same for all devices.



I've tried

.jumbotron {
max-width: 500px;
margin: 0 auto;
}


but this sets the input field smaller

Answer

You can center vertically using the following css class:

.vertical-center {
  min-height: 100%; 
  min-height: 100vh;    
  display: flex;
  align-items: center;
}

Horizontally, you can already center with bootstraps grid system using col-??-# and col-??-offset-#.

Put those two concepts together by wrapping your Jumbotron in a inside the container using the vertical-center-class and apply the correct bootstrap grid-classes

<div class="container vertical-center">
  <div class="col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <!-- Your code here -->
    </div>
  </div>
</div>

See this working sample.
Note that I used the md-grid classes to use full with on phones, but if you want to, you can of course use any other breakpoint class like xs.

Comments