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