CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
CodeTrooper
CodeTrooper

Reputation: 1888

How can I center an column on bootstrap when it is an uneven number

I have the following scenario:

I have a <div class="row"> and then I have another <div class="col-lg-3"> where I will be putting the picture of a profile of an user. The problem is that I would like to center that picture to be in the middle of the available space, so I would normally do this: 

<div class="row">
    <div class="col-lg-3 col-lg-offset-x">
        <img src="..." class="..." alt="..." title="..." data-size="...">
    </div>
</div>

What would be the x value on the class of the <div class="col-lg-3 col-lg-offset-x"> If I wanted to center that div? Anybody has any idea how to do that?

Upvotes: 2

Views: 2470

Answers (1)

Anindya Basu
Anindya Basu

Reputation: 659

Duplicate of Center a column using Twitter Bootstrap 3

"You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:

.col-centered{
    float: none;
    margin: 0 auto;
}

Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Note: With both techniques you could skip the .row element and have the column centered inside a .container but you would notice a minimal difference in the actual column size because of the padding in the container class."

Upvotes: 2

Related Questions