Peyman Etedali Peyman Etedali - 1 year ago 73
HTML Question

get content align center

im trying to build a profile card view and im using bootstrap for it.

i build two div elements on with the class col-lg-3 and the other one with col-lg-9. the problem is that the content inside the col-lg-9 is not align in the center. it has more space on the right side as on the left side and i tryde almost everything to get them center. disabled margin and padding didnt worked.

the col-lg-9 is inside a row and a normal container. and inside the col-lg-9 is the content. i have here a sample onbootplay if ya marke the container you can see that the contents with the class card hase right more space.

thats the html code of it

<div class="col-lg-9" style="min-height: 100px; background-color: #333">
<div class="container">
<div class="card">
<div class="model-image">
<img src="img/elliot.jpg">
</div>
<div class="card-content">
<a class="card-header">Team Fu</a>
<div class="meta">
<span class="date">Create in Sep 2014</span>
</div>
</div>
<div class="card-footer">
<a href="#">ds</a>
</div>
</div>
</div>
</div>


enter image description here

i uploadet so ya can see the whole site. for better understanding demo

Raf Raf
Answer Source

if you add an extra container for all .card divs you will get it centered:

<div class="container text-center"> 
 <div class="cards-container" style="display:inline-block; box-sizing:border-box;">

   <!-- here all your .card divs -->

  </div>
</div>

You can add the css of the cards-container in css file.