css - Centering Drop down inputs on a modal -

i stuck on styling modal have made create schedule. first time using bootstrap if have blatantly missed apologize. have managed center text input setting margin margin: 0 auto on input tag doesn't seem working dropdowns shown below

i have looked around stack couple of times , answers have found seem suggesting have tried.

how center input in bootstrap 3 modal?

(bootstrap) input-group class doesn't allow me centerize inputs in modal

can point me towards right direction fixing this? thanks!

<div class="container"> <div class="modal fade" id="createschedule" tabindex="-1" role="dialog" aria-labelledby="createschedule" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">              <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>                 <h4 class="modal-title text-center">create new schedule</h4>             </div>              <div class="modal-body" style="text-align: center">                 <div class="form-group">                     <input class="form-control text-center" type="text" placeholder="id" style="margin: 0 auto">                 </div>                 <div class="form-group">                     <input class="form-control text-center" type="text" placeholder="schedulename" style="margin: 0 auto">                 </div>                 <div class="row">                     <div class="col-lg-6">                         <div class="input-group">                             <div class="input-group-btn">                                 <button style="margin: 0 auto" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">start time <span class="caret"></span></button>                                 <ul class="dropdown-menu" role="menu">                                     @foreach (var hour in hoursofday)                                     {                                         <li><a href="#">@hour</a></li>                                     }                                 </ul>                             </div>                             <input style="margin: 0 auto" type="text" class="form-control" aria-label="...">                         </div>                     </div>                 </div>                 <br/>                 <div class=" row">                     <div class="col-lg-6">                         <div class=" input-group">                             <div class="input-group-btn">                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">                                 finish time <span class="caret"></span></button>                                 <ul class="dropdown-menu" role="menu">                                     @foreach (var hour in hoursofday)                                     {                                         <li style="margin: 0 auto"><a href="#">@hour</a></li>                                     }                                 </ul>                             </div>                         <input style="margin: 0 auto" type="text" class="form-control" aria-label="...">                     </div>                      </div>                 </div>                 <div class="modal-footer ">                     <button type="button" class="btn btn-success btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> create</button>                 </div>             </div>         </div> </div> 

when want center input whith bootstrap should able to using offset.

class"col-md-offset-3" 

that makes object 3/12 in page when 1/2 large centered.