Making list to a responsive three column list

Hello All, I have a long list and I want it to be a three column list when in desktop view but when bringing it to a Medium size window (Maybe tablet) it becomes a two column list and when bringing it to a small size window (maybe mobile) it becomes a one column list. How would I do this via bootstrap? Current code I have right now is

<h3> <b>Material Guides:</b></h3>

                                    <ul>
                                        <li><a href="victims/pa103_v_ahern_john.php">John Michael Gerard Ahern</a>
                                        <li><a href="victims/pa103_v_akerstrom_john.php">John David Akerstrom</a>
                                        <li><a href="victims/pa103_v_atkinson_william_judith.php">William Garretson Atkinson III and Judith Bernstein Atkinson</a>
                                        <li><a href="victims/pa103_v_bainbridge_harry.php">Harry Michael Bainbridge</a>
                                        <li><a href="victims/pa103_v_bennett_lawrence.php">Lawrence Ray Bennett</a> 
                                        <li><a href="victims/pa103_v_berkley_alistair.php">Alistair David Berkley</a>
                                        <li><a href="victims/pa103_v_berrell_steven.php">Steven Russell Berrell * </a>  
                                        <li><a href="victims/pa103_v_bhatia_surinder.php">Surinder Mohan Bhatia</a>
                                        <li><a href="victims/pa103_v_bouckley_glenn_paula.php">Glenn John and Paula Marie Alderman Bouckley</a>
                                        <li><a href="victims/pa103_v_bright_nicholas.php">Nicholas Bright</a>
                                        <li><a href="victims/pa103_v_buser_michael_warren.php">Warren Max and Michael Warren Buser</a>
                                        <li><a href="victims/pa103_v_butler_steven.php">Steven Lee Butler</a>
                                        <li><a href="victims/pa103_v_cadman_william.php">William Martin Cadman</a>
                                        <li><a href="victims/pa103_v_caffarone_hernan_fabiana.php">Hern&aacute;n Luis Caffarone and Fabiana Benvenuto de Caffarone</a>
                                        <li><a href="victims/pa103_v_carlsson_bernt.php">Bernt Wilmar Carlsson</a> 
                                        <li><a href="victims/pa103_v_cawley_richard.php">Richard Anthony Cawley</a>
                                        <li><a href="victims/pa103_v_corner_tracey.php">Tracey Jane Corner</a> 
                                        <li><a href="victims/pa103_v_coyle_patricia.php">Patricia Mary Coyle</a>
                                        <li><a href="victims/pa103_v_cummock_john.php">John Binning Cummock</a>
                                        <li><a href="victims/pa103_v_di_mauro_joyce.php">Joyce Christine Di Mauro</a>
                                        <li><a href="victims/pa103_v_dix_peter.php">Peter Thomas Stanley Dix</a>
                                        <li><a href="victims/pa103_v_dornstein_david.php">David Scott Dornstein</a>
                                        <li><a href="victims/pa103_v_flannigan_family.php">Kathleen Mary, Thomas Brown, and Joanne Flannigan</a>
                                        <li><a href="victims/pa103_v_flynn_john_patrick.php">John Patrick Flynn * </a>  
                                        <li><a href="victims/pa103_v_gabor_ibolya.php">Ibolya Gabor</a>
                                        <li><a href="victims/pa103_v_gannon_matthew.php">Matthew Kevin Gannon</a>
                                        <li><a href="victims/pa103_v_gibson_kenneth.php">Kenneth James Gibson</a>
                                        <li><a href="victims/pa103_v_halsch_lorraine.php">Lorraine Buser Halsch</a>
                                        <li><a href="victims/pa103_v_hartunian_lynne.php">Lynne Carol Hartunian</a>
                                        <li><a href="victims/pa103_v_herbert_pamela.php">Pamela Elaine Herbert * </a>  
                                        <li><a href="victims/pa103_v_hollister_katharine.php">Katharine Augusta Hollister</a> 
                                        <li><a href="victims/pa103_v_hudson_josephine.php">Josephine Lisa Hudson</a>
                                        <li><a href="victims/pa103_v_ivell_elizabeth.php">Elizabeth Sophie Ivell</a>
                                        <li><a href="victims/pa103_v_jaafar_khaled.php">Khaled Nazir Jaafar</a>
                                        <li><a href="victims/pa103_v_jermyn_kathleen.php">Kathleen Mary Jermyn</a>
                                        <li><a href="victims/pa103_v_johnson_mary.php">Mary Lincoln Johnson</a>
                                        <li><a href="victims/pa103_v_ludlow_lloyd.php">Lloyd David Ludlow</a>
                                        <li><a href="victims/pa103_v_macalolooy_lilibeth.php">Lilibeth Tobila MacAlolooy</a>
                                        <li><a href="victims/pa103_v_macquarrie_james.php">James Bruce MacQuarrie</a>
                                        <li><a href="victims/pa103_v_marek_elizabeth.php">Elizabeth Lillian Marek</a>
                                        <li><a href="victims/pa103_v_mccollum_robert.php">Robert Eugene McCollum</a>
                                        <li><a href="victims/pa103_v_mckee_charles.php">Charles Dennis McKee</a>
                                        <li><a href="victims/pa103_v_mclaughlin_bernard.php">Bernard Joseph McLaughlin</a>
                                        <li><a href="victims/pa103_v_miller_joseph.php">Joseph Kenneth Miller</a>
                                        <li><a href="victims/pa103_v_mosey_helga.php">Helga Rachael Mosey</a>
                                        <li><a href="victims/pa103_v_mulroy_family.php">John, Sean Kevin and Ingrid Elizabeth Svensson Mulroy</a>
                                        <li><a href="victims/pa103_v_noonan_karen.php">Karen Elizabeth Noonan</a>
                                        <li><a href="victims/pa103_v_o'connor_daniel.php">Daniel Emmett O'Connor</a> 
                                        <li><a href="victims/pa103_v_owen_yvonne_bryony.php">Bryony Elise and Gwyneth Yvonne Margaret Owen</a>
                                        <li><a href="victims/pa103_v_peirce_peter.php">Peter Raymond Peirce * </a>  
                                        <li><a href="victims/pa103_v_pescatore_michael.php">Michael C. Pescatore</a>
                                        <li><a href="victims/pa103_v_pitt_james.php">James Andrew Campbell Pitt</a>
                                        <li><a href="victims/pa103_v_posen_pamela.php">Pamela Lynn Posen</a>
                                        <li><a href="victims/pa103_v_rubin_arnaud.php">Arnaud David Rubin</a>
                                        <li><a href="victims/pa103_v_saraceni_elyse.php">Elyse Jeanne Saraceni</a>
                                        <li><a href="victims/pa103_v_saunders_scott.php">Scott Christopher Saunders</a>
                                        <li><a href="victims/pa103_v_schauble_johannes.php">Johannes Otto Schauble</a> 
                                        <li><a href="victims/pa103_v_shapiro_amy.php">Amy Elizabeth Shapiro * </a>  
                                        <li><a href="victims/pa103_v_shastri_mridula.php">Mridula Shastri</a>
                                        <li><a href="victims/pa103_v_sigal_irving.php">Irving Stanley Sigal</a>
                                        <li><a href="victims/pa103_v_skabo_irja.php">Irja S. Skabo</a>
                                        <li><a href="victims/pa103_v_smith_cynthia.php">Cynthia Joan Smith * </a>  
                                        <li><a href="victims/pa103_v_smith_ingrid.php">Ingrid Anita Smith</a>
                                        <li><a href="victims/pa103_v_smith_james.php">James Alvin Smith</a>
                                        <li><a href="victims/pa103_v_stow_james.php">James Ralph Stow</a>
                                        <li><a href="victims/pa103_v_swire_flora.php">Flora Macdonald Margaret Swire</a>
                                        <li><a href="victims/pa103_v_teran_andrew.php">Andrew Alexander Teran</a>
                                        <li><a href="victims/pa103_v_van_tienhoven_tomas.php">Tomas Floro van Tienhoven</a>
                                        <li><a href="victims/pa103_v_vejdany_asaad.php">Asaad Eidi Vejdany</a>
                                        <li><a href="victims/pa103_v_velimirovich_milutin.php">Milutin Velimirovich</a>
                                        <li><a href="victims/pa103_v_wagner_raymond.php">Raymond Ronald Wagner</a>
                                        <li><a href="victims/pa103_v_weedon_kesha.php">Kesha Weedon * </a>  
                                        <li><a href="victims/pa103_v_williams_george.php">George Watterson Williams</a>
                                        <li><a href="victims/pa103_v_zwynenburg_mark.php">Mark James Zwynenburg</a>
                                    </ul>

You could try using the columns CSS and just control how many columns you want by the media query break points. https://caniuse.com/#search=columns

Just add the class col-group and set the Options for the List to be Unstyled. I say that because the bullet point only shows on the first column apparently.

Using the following CSS you don't specify the columns at mobile size because that's the default. Then you set the 2 columns at SM size and LG you set 3. This is assuming you are using BS 4 and not BS 3.3.7. The break points would be placed at different media queries then.

@media (min-width: 576px) {
  .col-group {
    -webkit-columns:2;
    columns:2;
  }
}

@media (min-width: 992px) {
  .col-group {
    -webkit-columns:3;
    columns:3;
  }
}

Another way would be to split the single list into 3 listings and use the Bootstrap grid to accomplish the same thing and with that you could have the bullet points as well.

Saj

Thank you so much

Sure things, glad I could help. :)

Saj

Hi I need a Need an option for 2 columns (tablet size). What would I add to the Css for this to happen

If the first media query is to small for you (SM) and you need it on (MD). What you would do to change the media query assigned to that CSS rule is select the triple stacked dots to the right of the rule and select Delete Media Query. Then above the Live View pane on the Device/Media Query Toolbar (middle/top/right) icon(s), select the device you want a media query for then click the triple dots on the CSS rule again and select Add Media Query.

Saj

This is what I used, what else should I add to it?

ul.list-unstyled.victims-list {
  columns: 3;
}
/*Mobile style is default (2 col for SM size and 3 for LG)*/
@media (max-width: 992px) {
  ul.list-unstyled.victims-list {
    columns: 2;
  }
}

@media (max-width: 576px) {
  ul.list-unstyled.victims-list {
    columns: 1;
  }
}

I don't know why you did that.

Mobile first means this bit of CSS is default behavior..

@media (max-width: 576px) {
  ul.list-unstyled.victims-list {
    columns: 1;
  }
}

as in the list naturally is single column making that bit of CSS unnecessary, which is why I gave you the CSS the way that I did.

No need to declare single column for Mobile because that's what comes naturally with the list element.

/* if the screen is at least 576px (SM+) wide change from 1 column to 2 columns */
@media (min-width: 576px) {
  .victims-list {
    columns:2;
  }
}

/* if the screen is at least 992px (LG+) wide change from 2 columns to 3 columns */
@media (min-width: 992px) {
  .victims-list {
    columns:3;
  }
}

So with that CSS in Mobile view there is only 1 column because that's what naturally happens with a list you don't need to modify it. For SM and MD you get 2 columns. For LG and greater, you get 3 columns.

Also you shouldn't need to over qualify your CSS rule either. You don't need to state ul.list-unstyled.victims-list just .victims-list should be just fine. I know the app tends to do that, just update the rule when it does. It makes the CSS a little cleaner and smaller in size.

I hope this is more understandable.

Saj

I got it, also what would I do create more space between the columns or more "gutter" between the column names .. thank u

You should be able to use the CSS property column-gap for that.

Here are a couple sites to help you get up to speed with the column properties.

https://www.w3schools.com/Css/css3_multiple_columns.asp

https://css-tricks.com/guide-responsive-friendly-css-columns/

Saj