Select to view content in your preferred language

Centering 5 Cards in a single Row in Hub

3216
3
Jump to solution
05-16-2022 07:08 AM
JustinGleeson1
Emerging Contributor

I am trying to add five cards to a row in Hub but am having through to center them across the page. I've used the out of the box set up that adds three by default. I have adjusted the html to display 5 in one line rather than 3 but am having trouble centering them. At the moment they are left aligned (see image below).

Could you help in getting them centered on the page?

This is the .html

******

<div class="col-xs-12 col-sm-6 col-md-2">
<div class="calcite-web">
<div class="card-base contrast-safe-text">
<div class="card-image-wrap">
<img alt="Bridge Club, 1954" class="card-image" src="https://hubcdn.arcgis.com/opendata-ui/assets/assets/images/bridge3-ab9c41a43f1bf4379a90134a0658f4c2...." style="text-align: center;">
<div class="card-image-caption" style="text-align: center;">
Florida, January 1954
</div>
</div>
<div class="card-content">
<h4 style="text-align: center;"><b>Sustainable and Planned Settlement Patterns</b></h4>
<p style="text-align: center;">Residential Density, Housing Vacancies, Housing Completions, Property Prices, Rental Prices</p>
<div aria-label="actions" class="btn-group btn-group-justified" role="group">
<a class="btn btn-primary" href="#SettlementPatternsTestBox">Explore</a>
</div>
</div>
</div>
</div>
</div>

**********

Any help would be much appreciated. Thanks. JustinRightAligned_5Cards.jpg

0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Regular Contributor

Hello @JustinGleeson1,

Hub uses the Bootstrap 3 framework, which relies on a 12 column grid. Assuming you are using a single Text Card and each card is wrapped in the Bootstrap grid classes you have above, you may want to look at adding a col-md-offset-1 https://getbootstrap.com/docs/3.4/css/#grid-offsetting on your first card since you essentially have two extra columns leftover in your set of five cards.

View solution in original post

0 Kudos
3 Replies
KlaraSchmitt
Esri Regular Contributor

Hello @JustinGleeson1,

Hub uses the Bootstrap 3 framework, which relies on a 12 column grid. Assuming you are using a single Text Card and each card is wrapped in the Bootstrap grid classes you have above, you may want to look at adding a col-md-offset-1 https://getbootstrap.com/docs/3.4/css/#grid-offsetting on your first card since you essentially have two extra columns leftover in your set of five cards.

0 Kudos
JustinGleeson1
Emerging Contributor

Hi Klara, the offset suggestion worked perfectly.

Many thanks for your help. 

0 Kudos
David-Semitekol
Regular Contributor

The only solution I ever found was to create multiple text boxes across the screen and then add each card to each text box.  The Text boxes will auto align to the center.  It is a cumbersome solution though.

You can also try to add the following code to your DIV:

<div style="text-align: center;">

0 Kudos