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.
Comments
Post a Comment