CODEWITHSUNDEEP
htmlcssmarginpadding
p_e_88
p_e_88

Reputation: 1037

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

Upvotes: 0

Views: 120

Answers (3)

mihkov
mihkov

Reputation: 1189

<div class="card-content text-center">
    <a class="card-header">Team Fu</a>
    <div class="meta">
    <span class="date">Create in Sep 2014</span>
</div>

Upvotes: 0

Raf
Raf

Reputation: 352

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.

Upvotes: 1

Ebelanger
Ebelanger

Reputation: 40

When using bootstrap, just add the text-center class to your div and it will center your elements and all the children.

And i would suggest to use inline css rather put your css in a external stylesheet. It will be much easier to maintain in the future.

Upvotes: 0

Related Questions