4

I am using Bootstrap 3. I have use two column like col-md-4 and col-md-2 within row. Now i am trying to center both column within row. I have used text-left for col-md-2 because button within it need to be left align. I have used following code to center the column but it not work for me.

<div class="jumbotron">
    <div class="row text-center">
        <div class="col-md-4">
            <div class="input-group input-group-lg">
                <div class="input-group-btn text-left">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">option 1<span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">option 1</a></li>
                        <li><a href="#">option 2</a></li>
                        <li><a href="#">option 3</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <input type="text" class="form-control">
            </div><!-- /input-group -->
        </div>
        <div class="col-md-2 text-left">
            <button type="button" class="btn btn-default btn-lg">  Search  <span class="glyphicon glyphicon-search"></span></button>
        </div>
    </div><!-- /row -->
</div>
Evan Carroll
  • 78,363
  • 46
  • 261
  • 468
Kango
  • 809
  • 11
  • 27
  • 48
  • did you know there is something called `col-md-offset-gridval` to pull the components ? – jayeshkv Nov 09 '13 at 10:24
  • i know how to use offset, but can it possible using text-center to center column. – Kango Nov 09 '13 at 10:26
  • i don't think it's possible, i assume `text-center` is only for text related fields and not to columns. You might also want to check the other methods [Here](http://stackoverflow.com/questions/18153234/center-a-div-using-bootstrap-3-markup-or-css) – jayeshkv Nov 09 '13 at 10:38

1 Answers1

5
<div class="jumbotron">
<div class="row">
    <div class="col-md-4 col-md-offset-3"> //The one i added
        <div class="input-group input-group-lg">
            <div class="input-group-btn text-left">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">option 1<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">option 1</a></li>
                    <li><a href="#">option 2</a></li>
                    <li><a href="#">option 3</a></li>
                </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control">
        </div><!-- /input-group -->
    </div>
    <div class="col-md-2 text-left">
        <button type="button" class="btn btn-default btn-lg">  Search  <span class="glyphicon glyphicon-search"></span></button>
    </div>
</div><!-- /row -->

Hope this Bootply helps ! Also take a look at this wiki.

jayeshkv
  • 2,180
  • 4
  • 24
  • 42