CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Mihail Ivanchev
Mihail Ivanchev

Reputation: 425

How to center bootstrap column elements vertically

I have the following structure:

 <div class="col-md-8">
  <div class="col-md-12">
    <div class="col-md-6">Content</div>
    <div class="col-md-6">Content</div>
  </div>
 </div>

I want a column, that acts as a container, and leaves 2 units on every side, hence the col-md-8 div. I want that centered, and I want all the other column elements centered too, but I don't know how to do this. Adding margins doesn't work as it should, for some reason. Adding "align: center" centers the text inside the columns, I don't want that. Can someone assist?

Upvotes: 0

Views: 113

Answers (2)

Harden Rahul
Harden Rahul

Reputation: 948

use this .center-container css to each element to center your div element.

    .center-container{
        display: table;
        margin: 0 auto;
        float: none;
    }
        <div class="col-md-8 center-container">
          <div class="col-md-12 center-container">
            <div class="col-md-6">Content</div>
            <div class="col-md-6">Content</div>
          </div>
        </div>

Upvotes: 0

Evan Bechtol
Evan Bechtol

Reputation: 2865

You have to use the col-<size>-offset-<number> tag to shift the elements by that respective amount:

<div class="col-md-8 col-md-offset-1">
 <div class="col-md-12">
  <div class="col-md-6 col-md-offset-3">Content</div>
  <div class="col-md-6 col-md-offset-3">Content</div>
 </div>
</div>

Check out the Bootstrap page on CSS styling, they have some examples that may help you understand how offset and nesting div's works: Bootstrap CSS

Here is a Plunkr demonstrating some ways to use nesting and offsets

Upvotes: 1

Related Questions