Twitter Bootstrap, center a third md-6 column on medium devices

user_13665723 0
Viewed 52
<div class="row">
    <div class="col-md-6 col-lg-4">foo</div>
    <div class="col-md-6 col-lg-4">bar</div>    
    <div class="col-md-6 col-lg-4">baz</div>
</div>

Considering on medium devices this will print the last column below the other two, how can I horizontally center it?

img

twitter-bootstrap
2 Answers

You can use this class to center the div on medium devices.

<div class="col-md-6 col-lg-4 text-md-center">baz</div>
user_41022030

You need to insert justify-content-center and use button for better solutions , you can use button , div ,or span tag with you needed , example code like this

<div class="row">
<!-- 1 -->
    <div class="col-md-6 col-lg-4 text-center">
    <div class="justify-content-center">
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    </div>
    </div>
    <!-- end 1 -->
    
    <!-- One -->
    <div class="col-md-6 col-lg-4 text-center">
    <div class="row justify-content-center">
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    </div>
    </div>   
    <!-- end One -->
    
    <!-- Uno -->
    <div class="col-md-6 col-lg-4 text-center">
    <div class="row justify-content-center">
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    </div>
    </div>
    <!-- end Uno -->
    
    
</div>

Display bootstrap

user_137018560
Related