CODEWITHSUNDEEP
csstwitter-bootstrap
Kiran Dash
Kiran Dash

Reputation: 4956

How to align columns in bootstrap to center?

In the following code: I want to add columns dynamically. And thus the row can have none, single or at max four col-sm-3 columns in the row. No matter how many columns are there, the content should always appear in the middle.

      <div class="row">

          <div class="col col-sm-3 col-xs-6">
                    <div class="servicesContent">

                        <img src="a.jpg" class="img-responsive" />

                        <p class="servicesContentTitle">lorem ipsum</p>

                    </div>
                </div>

          </div>

To achieve it, I have used the code below:

.row{
    text-align:center;
}
.col{
    float:none;
    display:inline-block;
}

This does the job for three columns but when I have four col-sm-3 then it breaks down as you can see below:

enter image description here

What will be the correct css to align it perfectly at the center for any possible number of columns in the row.

Upvotes: 1

Views: 1802

Answers (2)

Som
Som

Reputation: 270

You will have to set max-width for the columns. See below for an example

@media(min-width: 992px){
    .col{
        float:none;
        display:inline-block;
        max-width: 250px;
    }
}

@media(min-width: 320px) and (max-width: 992px){
    .col{
        float:none;
        display:inline-block;
        max-width: 100%;
    }
}

Upvotes: 2

tso
tso

Reputation: 26

This could be because the four objects are filling up the entire row (when the margins and padding is added). If you change the padding and/or margins of the columns you 'should' be able to remedy this issue.

Upvotes: 0

Related Questions