1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Making list to a responsive three column list

Discussion in 'HTML & Website Design' started by Soupi, Mar 5, 2018.

  1. #1
    Hello All, I have a long list and I want it to be a responsive bootstrap 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</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</a>
                                                <li><a href="victims/pa103_v_bright_nicholas.php">Nicholas Bright</a>
                                                <li><a href="victims/pa103_v_buser_michael_warren.php">Warren Maxr</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">uto 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</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 Keviy</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</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>
    Code (markup):

    SEMrush
     
    Soupi, Mar 5, 2018 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,420
    Likes Received:
    353
    Best Answers:
    27
    Trophy Points:
    335
    #2
    Where are your closing brackets for each list item (<li>)? It is allowed in html5, but is a not-good idea; easy to break.
    Here's an example using columns. There are other ways to do this but this is simple. Note that breakpoints are in em measures.
    This makes them self adjusting to the users' preferred font sizes. By narrowing the viewport until something breaks, you don't need to track various device viewport sizes. The #victim-list id is on the UL element.
    CSS
    
      body {
      background-color: white;
      color: black;
      font: 100%/1.5 sans-serif;
      margin: 0;
      padding: 1em;
      }
    
      p {
      font-size: 1em;
      }
    
      h1 {
       text-align: center;
       font-family: serif;
      }
    
      #victim-list {
       columns: 3;
       column-gap: 1.5em;
      }
    
      @media screen and (max-width: 56em) {
       #victim-list {
        columns: 2;
       }
      }
    
      @media screen and (max-width: 38em) {
       #victim-list {
        columns: 1;
       }
      }
    Code (markup):
    gary
     
    kk5st, Mar 5, 2018 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,670
    Likes Received:
    1,564
    Best Answers:
    226
    Trophy Points:
    515
    #3
    @kk5st gave you the good solution, just use CSS columns, then adjust the number of columns based on the width in EM for accessibility.

    He's also right on closing your </li> properly, and it's semantic gibberish to put <b> inside a <h3> since "Material Guides" is neither a proper name or legal entity, aka what <b> is supposed to be used for. Aka would be bold in a professionally written document for semantic reasons when not applying "more emphasis" (which is <strong>'s job). You want the h3 bold, do it in your stylesheet (though that SHOULD be H3's default state)

    Oh and Gary, that unitless line-height LIE doesn't work for large font users in certain browsers. The derps over at suckup-central (sitepoint) promoting that are flapping their arse-cheeks in the wind. Declare a metric on that line-height!
     
    deathshadow, Mar 6, 2018 IP