Twitter Bootstrap Question posted in

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

<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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search