Bootstrap - Centering textfields - html

Question

Good day! In my log in form, I want my text fields to put it in to center using bootstrap. I already used class="form-inline justify-content-center" but it isn't working.
Code:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
</div>
So far this is my output:
https://prnt.sc/h675qg / https://jsfiddle.net/kf2c8trp/
Thank you very much

Answer 1

Simply add this code to your CSS:
form {
text-align:center;
}
or as #Connum said, use text-center of bootstrap classes. Read more here

Answer 2

After adding the bootstrap css file to your fiddle and the class text-center to the form, your inputs are being displayed centered: https://jsfiddle.net/kf2c8trp/4/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center text-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>

Answer 3

Firstly, you are doing a lot of things wrong. Trying to create space with <br/> when you should be using margin or padding is not really cool :). Also, Inline styling is highly discouraged and Justify-content-centre work with flexboxes. That being said check-out the working example below, I have changed some of your bootstrap class and add few scss link below:
<div class=" col-xs-12 container" >
<form class="col-xs-12" role="form" method="post" action="<?=base_url()?>login/login_submit" >
<p id="sign-lbl">Please enter your username and<br/>
password to login.</p>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="text" name="username" id="email" class="form-control" placeholder="Username">
</div>
</div><br/><br/>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-offset-3 col-xs-6 ">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
Check out the updated link