Topic: Mimicking craigslist "sites" page
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.
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
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 3 years 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/.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.11.0
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: No