responsive col with col-*-*

this is simple example
2 col (width 50-50) use class “col-sm-6″
4 col (width 25-25-25-25) use class “col-sm-3″

example for 2 col

<div class="row">
            <div class="col-sm-6">
                <div class="panel panel-default text-center">
                    <div class="panel-heading">
                        <strong>Developer</strong>
                    </div>
                    <div class="panel-body">
                        <h3 class="panel-title price">Free
                           
                        </h3>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">50,000 events/month</li>
                        <li class="list-group-item">5 GB of Storage</li>
                        <li class="list-group-item">Up to 100 Users</li>
                        <li class="list-group-item">10 GB Bandwidth</li>
                        <li class="list-group-item">Security Suite</li>
                        <li class="list-group-item"><a class="btn btn-primary">Sign Up Now!</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default text-center">
                    <div class="panel-heading">
                        <strong>Startup</strong>
                    </div>
                    <div class="panel-body">
                        <h3 class="panel-title price">$20
                        </h3>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">100,000 events/month</li>
                        <li class="list-group-item">10 GB of Storage</li>
                        <li class="list-group-item">Up to 250 Users</li>
                        <li class="list-group-item">25 GB Bandwidth</li>
                        <li class="list-group-item">Security Suite</li>
                        <li class="list-group-item"><a class="btn btn-primary">Sign Up Now!</a>
                        </li>
                    </ul>
                </div>
            </div>
       
           

        </div>

    </div>

for advance see http://www.helloerik.com/bootstrap-3-grid-introduction

Related posts:

This entry was posted in bootstap. Bookmark the permalink.