2

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?

CodeTrooper
  • 1,890
  • 6
  • 32
  • 54

1 Answers1

2

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."

Community
  • 1
  • 1
Anindya Basu
  • 659
  • 1
  • 6
  • 18
  • 1
    Did work, had to add some extra css for the img class and other things, but the basic idea was correct. Thanks a lot. – CodeTrooper May 01 '14 at 18:08