CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
KodeFor.Me
KodeFor.Me

Reputation: 13511

How to align Bootstrap columns in center?

I am working in a design, that requires to align the row items in the center. If I had a pre-defined amount of columns, then it is easy to align them, but I have a dynamic amount of columns and I don't know how to align them. So the content should be like following examples:

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

Or

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

    |----| |----|
    |    | |    |
    |----| |----|

or

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

       |----|
       |    |
       |----|

In my HTML I have implement this code:

<div class="row row-centered">
    <!-- Loop here to make the dynamic amount of columns -->
    <div class="col-xs-12 col-sm-4 col-centered text-center">
    </div>
    <!-- End the loop here -->
</div>

and in my SASS I have this code:

.row-centered {
    text-align : center;

    .col-centered {
        display      : inline-block;
        float        : none;
        /* reset the text-align */
        text-align   : left;
        /* inline-block space fix */
        margin-right : -4px;
    }
}

But this gives me this result:

|----| |----|
|    | |    | |----|
|----| |----| |    |
              |----|
|----| |----|
|    | |    | |----|
|----| |----| |    |
              |----|

Or

|----| |----| 
|    | |    | |----|
|----| |----| |    |
              |----|
           |----|
    |----| |    |
    |    | |----|
    |----|

or

|----| |----| 
|    | |    | |----|
|----| |----| |    |
              |----|
       |----|
       |    |
       |----|

So, is there any other way to achive the same alignment without braking the columns ?

NOTE: The rows of item are un-know as well, can be one, two or thousand of rows. I have use up to two lines of items, just for simplicity.

Upvotes: 0

Views: 1874

Answers (2)

Khamad Ali
Khamad Ali

Reputation: 31

Go with bootstrap 4 and use card-deck

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

You are going to need to add vertical-align:top; to all of the boxes. This will make them align at the same position.

Upvotes: 1

Related Questions