Topic: Mimicking craigslist "sites" page

Andrew Ford priority asked 1 year ago


I'm trying to mimic craigslist's "site" page (https://www.craigslist.org/about/sites), 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 1 year 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 1 year ago

So do you need any other help? Maybe this wil help (or other sections such as Flexbox, Columns) https://mdbootstrap.com/docs/standard/layout/grid/.


Dawid Wajszczuk staff answered 1 year ago


Hi,

You can simply put every 13 states into a div and then row row-cols-4 will work. Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3852203#html-tab-view.

Keep coding,
Dawid



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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