html - How to center form data using Bootstrap -


im trying center form data below. have tried few different things online unable find works. using bootstrap, , offset messing title form , actual form. thanks!

enter image description here

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    <form class="form-horizontal" >        <div class="form-group">        <label class="col-sm-2 control-label">netid</label>        <div class="col-sm-3">          <input class="form-control" name="name" id="name" type="text" placeholder="enter netid" onkeyup="showuser(this.value)">        </div>      </div>             <center><div id="txthint"><b>enter users netid, , history below:</b></div></center><br/>              <div class="form-group">          <label for="gender" class="col-sm-2 control-label">cable length</label>          <div class="col-sm-3">            <select id="gender" class="form-control">              <option value="14ft">14ft</option>              <option value="25ft">25ft</option>            </select>          </div>        </div>                <div class="form-group">          <div class="col-sm-offset-2 col-sm-10">            <button type="submit" class="btn btn-default">submit</button>          </div>        </div>    </form>  </div>

you can use offsetting columns items of form.

please check result. want achieve?

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    <div class="container">    <form class="form-horizontal">        <div class="form-group">        <label class="col-sm-offset-3 col-sm-2 control-label">netid</label>        <div class="col-sm-3">          <input class="form-control" name="name" id="name" type="text" placeholder="enter netid" onkeyup="showuser(this.value)">        </div>      </div>        <div class="form-group">        <div id="txthint" class="col-sm-offset-5 col-sm-3">          <b>enter users netid, and&nbsp;their&nbsp;history&nbsp;is&nbsp;below:</b>        </div>      </div>        <div class="form-group">        <label for="gender" class="col-sm-offset-3 col-sm-2 control-label">cable length</label>        <div class="col-sm-3">          <select id="gender" class="form-control">            <option value="14ft">14ft</option>            <option value="25ft">25ft</option>          </select>        </div>      </div>        <div class="form-group">        <div class="col-sm-offset-5 col-sm-3">          <button type="submit" class="btn btn-default">submit</button>        </div>      </div>      </form>  </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


Comments