Peyman Etedali Peyman Etedali - 6 months ago 6x
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 class="card-content">
<a class="card-header">Team Fu</a>
<div class="meta">
<span class="date">Create in Sep 2014</span>
<div class="card-footer">
<a href="#">ds</a>

enter image description here

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

Raf Raf

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


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