Centering Drop down inputs on a modal

Question

I am stuck on styling a modal I have made to create a schedule. This is my first time using bootstrap so if I have blatantly missed something I apologize. I have managed to center my text input by setting the margin to margin: 0 auto on the input tag but this doesn't seem to be working with my dropdowns as shown below

enter image description here

I have looked around stack a couple of times and the only answers I have found seem to be suggesting what I have already tried.

How to center input in a Bootstrap 3 modal?

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

Can anyone point me towards the right direction into 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 a 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>

can u create a fiddle so it will be easy to resolve your problem. — Kawinesh S K, Apr 01 '15 at 10:12
since bootstraps uses a grid and it is divided in 12 colums. You could add some empty divs in the same row. — Markvds, Apr 01 '15 at 10:26
@user1758777 I added empty divs and it doe's give the desired outcome so thank you! Have an upvote. However I feel like there should be a better way of doing this so I am going to leave the question open. — Pudding, Apr 01 '15 at 10:38
I suggest you take a look at this post: http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3?rq=1 — Markvds, Apr 01 '15 at 11:16

score 1 · Accepted Answer · answered Apr 01 '15 at 13:20

1

When you want to center your input whith bootstrap you should actually be able to to that with the by using offset.

class"col-md-offset-3"

That makes that your object is 3/12 in the page so when itself is 1/2 large it is centered.

answered Apr 01 '15 at 13:20

Joh

166
1
1
11

Centering Drop down inputs on a modal

1 Answers1