I am using bootstrap list-group to display links to itunes, amazon and google play. Each link is its own list-group-item. I would like for all of these items to be centered inline with one another. How do I do this?
<!-- Download badges -->
<div class="container-fluid">
<div class="row">
<div class="list-group">
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/cplq6c" class="list-group-item" target="_blank">
<i class="fa fa-apple fa-2x" aria-hidden="true"></i>itunes</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/1qcfl6" class="list-group-item" target="_blank">
<i class="fa fa-amazon fa-2x" aria-hidden="true"></i>amazon</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/mb95g4" class="list-group-item" target="_blank">
<i class="fa fa-google fa-2x" aria-hidden="true"></i>google play</a>
</div>
</div>
</div>
</div>
To be more clear, I would like to have the list-group centered on the page.
Use the col-lg-offset-* classes. Demo. You need it on your first column.
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2 col-lg-offset-3">
...
</div>