Topic: Mimicking craigslist "sites" page

Andrew Ford priority asked 2 years ago

I'm trying to mimic craigslist's "site" page (, where it lists all countries -> states -> cities.

<div class="row row-cols-4"> is a start, but my list becomes; Alabama Alaska Arizona Arkansas ... etc...

Instead of;

  • Alabama
  • Alaska
  • Arizona etc...

I tried to add .flex-column to the div, but it cancels out .row-cols-4 and creates a single column. Is this a bug?

So, my question is --- how can I turn this into a 4 column list where in the US I would have the states Alabama - Idaho in one column, states Illinois - Missouri in a 2nd column... then the last 26 states equally split in the remaining 2 columns?

By the way, I am creating county/state/city tables in the database for all of this.

Andrew Ford priority answered 2 years ago

That would look great for large screens (and look like there is a masonry effect). The lists would look uneven on smaller screens, with the exception of viewing on the phone when it all needs to become a single column.

All the lists are coming from the database;

  • all 7 countries/regions,
  • all states/countries in each region,
  • and all the cities/local regions per state/country

Dawid Wajszczuk staff commented 2 years ago

So do you need any other help? Maybe this wil help (or other sections such as Flexbox, Columns)

Dawid Wajszczuk staff answered 2 years ago


You can simply put every 13 states into a div and then row row-cols-4 will work. Here is the snippet:

Keep coding,

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: Yes
  • Provided link: No