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>
3
  • did you know there is something called col-md-offset-gridval to pull the components ?
    – jayeshkv
    Nov 9, 2013 at 10:24
  • i know how to use offset, but can it possible using text-center to center column.
    – Kango
    Nov 9, 2013 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
    – jayeshkv
    Nov 9, 2013 at 10:38

1 Answer 1

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.