Align Cards-List to Center

KrystalPhaneuf3

I'm trying to align the cards-list to center in the text block.  Right now it aligns to the top right of the block forcing there to be a larger gap between text on the left than on the right.  I'd like to center it so i can offset cards and text evenly.  Below is the code for the card and attached is a picture showing what I mean.  Any help is greatly appreciated!

<ul class="cards-list">
<li class="col-xs-12 col-sm-6 col-md-3">
<div class="card center-block"><img src="https://gis.vta.org/images/lrt.jpg" alt="Ridership">
<div class="card-options">
<br />
<br />
<a href="https://community.esri.com/pages/ridership" class="btn btn-default">Ridership</a>
</div>
<hr>
<br />
<h3>Ridership</h3>
<p> Explore the ridership dashboard.</p>
</div>
</li>
</ul>

KlaraSchmitt

Hi Krystal,

If I might offer a suggestion...I know the code above that you provided is part of the default site template. While we still support that type of card, it is our goal to update new site templates to use a more accessible, more mobile-friendly version of cards for which support is already included in our codebase. While you may be able to achieve your desired look by overriding the width of the cards in the .cards-list .card class with inline or embedded styling, I would encourage actually using this code instead: http://esri.github.io/calcite-bootstrap/patterns.html#card-classic which will automatically resize your card to fill the whole space. Then you wouldn't need to center the card and could instead add a margin to your text.