Button alignment

983
2
02-15-2022 05:08 AM
KevinKhosa
New Contributor

Greetings all

I've created a list of buttons with dropdowns using custom html in a text card, but alignment seems to be a problem when viewing on different screen sizes. Also, I'd prefer that they be centered. Am I missing something in the code that'd eliminate the problem? I'm using Hub Basic.

0 Kudos
2 Replies
KlaraSchmitt
Esri Regular Contributor

Hi @KevinKhosa,

You don't have much CSS specified and it looks like you may be using Bootstrap classes. This is Hub's underlying framework, but you'd probably need to put these buttons into a .navbar to have different sized devices handled automatically. 

You might find one of these two samples helpful as a starting point for center-aligning navbar links:
https://www.codeply.com/go/1lrdvNH9GI/bootstrap-3-center-navbar-brand-and-links
https://codepen.io/davidcochran/pen/LYPrPr 

I'd definitely start by wrapping all your buttons in a uniquely-named container. This will help you if you need to write any custom media-queries around placement and sizing. I can give you a Bootstrap class that will help you center your row of dropdown buttons, but it won't automatically handle how this looks on different devices. You may need to research media-queries for that if you don't use the .navbar classes. But to just center the buttons, you can put .text-center on the container wrapping around the buttons.

<div class="my-row-of-buttons text-center">
  [all button code goes here]
</div>

KevinKhosa
New Contributor

Thanks, Klara

0 Kudos