form is not centering in bootstrap - php

Question

I'm using pure Bootstrap, the problem I'm facing is my form is not being fit to the center of the page, and I want it to be at center of the page.
I'm using laravel in this project so some laravel blade syntax is there.
I've the following code in welcome.blade.php
Side Bar in welcome.blade.php
<div class="sidebar" data-color="orange">
<!--
Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
-->
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-mini">
CT
</a>
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
</div>
<div class="sidebar-wrapper" id="sidebar-wrapper">
<ul class="nav">
<li class="active ">
<a href="./dashboard.html">
<i class="now-ui-icons design_app"></i>
<p>Measurement</p>
</a>
</li>
<li>
<a href="./icons.html">
<i class="now-ui-icons education_atom"></i>
<p>Icons</p>
</a>
</li>
<li>
<a href="./map.html">
<i class="now-ui-icons location_map-big"></i>
<p>Maps</p>
</a>
</li>
<li>
<a href="./notifications.html">
<i class="now-ui-icons ui-1_bell-53"></i>
<p>Notifications</p>
</a>
</li>
<li>
<a href="./user.html">
<i class="now-ui-icons users_single-02"></i>
<p>User Profile</p>
</a>
</li>
<li>
<a href="./tables.html">
<i class="now-ui-icons design_bullet-list-67"></i>
<p>Table List</p>
</a>
</li>
<li>
<a href="./typography.html">
<i class="now-ui-icons text_caps-small"></i>
<p>Typography</p>
</a>
</li>
<li class="active-pro">
<a href="./upgrade.html">
<i class="now-ui-icons arrows-1_cloud-download-93"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
<div class="container">
#yield('signup')
</div>
This is the Bootstrap form, I'm copying from Bootstrap site and injecting into welcome.blade.php.
#section('signup')
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
#endsection
The Problem is the form is going behind the sidebar, although I've used .col-md-6 and .col-md-offset-3 to center it to the page.
why this behavior ?
Please help , thanks in advance

Answer 1

try this one
HTML
#section('signup')
<div class="row">
<div class="col-md-6 col-md-offset-3 mx-auto">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
#endsection