html - Centering buttons dynamically as added with bootstrap -
i'm using angular bootstrap. @ top of our page have section used various control dropdowns. want have 3-4 dropdowns ng-if on them, having appear or disappear depending on rather or not given page allows functionality of dropdowns.
i these dropdowns centered. may define btn 1, 2, 3, , 4 in order, if btn 3 , btn 4 active should show on middle of page, not on right side. in other words if dropdowns disabled due ng-if argument visible dropdowns should center align if other's never existed. each dropdowns should standard width, i'm confident dropdowns fit on single row if active.
i'm having horrible time getting done, despite feeling should trivially simple behavior. i've tried pagnation-centered, didn't seem anything. i've tried placing them in button groups, doesn't seem working either.
can point me appropriate bootstrap classes make work?
sure thing, take css/html example:
css
.form-inline .form-control.w140{ width:120px; }
html:
<div class="container"> <div class="row"> <div class="col-sm-12"> <form class="form-inline text-center"> <div class="form-group"> <select class="form-control w140"> <option>foo</option> </select> </div> <div class="form-group"> <select class="form-control w140"> <option>foo</option> </select> </div> <div class="form-group"> <select class="form-control w140"> <option>foo</option> </select> </div> <div class="form-group"> <select class="form-control w140"> <option>foo</option> </select> </div> </form> </div> </div> </div>
the text-center
class centers them, regardless of how many <div class="form-group">
there are.
see this fiddle
Comments
Post a Comment