bootstrap list-group not inter-locking

As you can see in the following picture I've got states of America within a list-group class, my problem is that I'm trying to remove the whitespace and basically push Arkansas underneath Alaska and so on, here's the current HTML, CSS in which I'm using:

CodePen

I've tried everything from float:left to removing the <div class='row'> but can't seem to get it positioning correctly.

enter image description here

1 answer

  • answered 2018-07-11 03:40 joknawe

    You can use the Bootstrap .card-columns class (see snippet below). https://getbootstrap.com/docs/4.0/components/card/#card-columns

    However, I don't believe you'll be able to change the item flow direction (without changing the order in markup). You will most likely need to use something like Masonry: https://masonry.desandro.com to accomplish this.

    .region {
      color:black;
      padding-left: 0;
      font-size: 14px;
      font-weight: bold;
    }
    
    .city {
      color: #304ffe;
      padding: 0.25rem 0.25rem;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
    
    <body>
      <div class="col-md-12 col-lg-6 col-sm-12">
        <div class="card">
          <div class="card-header">
            <strong>United States</strong>
          </div>
          <div class="card-body">
            <div class="card-columns">
              <div class="card">
                <div class="list-group list-group-root well"><a href="http://siddiq.local/us/alabama/1" class="list-group-item region">Alabama</a>
                  <div class="list-group">
                    <a href="http://siddiq.local/us/alabama/auburn/1" class="list-group-item city">Auburn</a>
                    <a href="http://siddiq.local/us/alabama/birmingham/2" class="list-group-item city">Birmingham</a>
                    <a href="http://siddiq.local/us/alabama/dothan/3" class="list-group-item city">Dothan</a>
                    <a href="http://siddiq.local/us/alabama/florence-muscle-shoals/4" class="list-group-item city">Florence / Muscle Shoals</a>
                    <a href="http://siddiq.local/us/alabama/gadsden-anniston/5" class="list-group-item city">Gadsden / Anniston</a>
                    <a href="http://siddiq.local/us/alabama/huntsville/6" class="list-group-item city">Huntsville</a>
                    <a href="http://siddiq.local/us/alabama/mobile/7" class="list-group-item city">Mobile</a>                                <a href="http://siddiq.local/us/alabama/montgomery/8" class="list-group-item city">Montgomery</a> <a href="http://siddiq.local/us/alabama/tuscaloosa/9" class="list-group-item city">Tuscaloosa</a></div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/alaska/10" class="list-group-item region">Alaska</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/alaska/anchorage/10" class="list-group-item city">Anchorage</a>
                      <a href="http://siddiq.local/us/alaska/fairbanks/11" class="list-group-item city">Fairbanks</a>
                      <a href="http://siddiq.local/us/alaska/homer/12" class="list-group-item city">Homer</a>
                      <a href="http://siddiq.local/us/alaska/juneau/13" class="list-group-item city">Juneau</a>
                      <a href="http://siddiq.local/us/alaska/kenai/14" class="list-group-item city">Kenai</a>
                      <a href="http://siddiq.local/us/alaska/kodiak/15" class="list-group-item city">Kodiak</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/arizona/16" class="list-group-item region">Arizona</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/arizona/flagstaff-sedona/16" class="list-group-item city">Flagstaff / Sedona</a>
                      <a href="http://siddiq.local/us/arizona/mohave-county/17" class="list-group-item city">Mohave County</a>
                      <a href="http://siddiq.local/us/arizona/prescott/18" class="list-group-item city">Prescott</a>
                      <a href="http://siddiq.local/us/arizona/phoenix/19" class="list-group-item city">Phoenix</a>
                      <a href="http://siddiq.local/us/arizona/sierra-vista/20" class="list-group-item city">Sierra Vista</a>
                      <a href="http://siddiq.local/us/arizona/tucson/21" class="list-group-item city">Tucson</a>
                      <a href="http://siddiq.local/us/arizona/yuma/22" class="list-group-item city">Yuma</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/arkansas/23" class="list-group-item region">Arkansas</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/arkansas/fayetteville/23" class="list-group-item city">Fayetteville</a>
                      <a href="http://siddiq.local/us/arkansas/fort-smith/24" class="list-group-item city">Fort Smith</a>
                      <a href="http://siddiq.local/us/arkansas/little-rock/25" class="list-group-item city">Little Rock</a>
                      <a href="http://siddiq.local/us/arkansas/jonesboro/26" class="list-group-item city">Jonesboro</a>
                      <a href="http://siddiq.local/us/arkansas/texarkana/27" class="list-group-item city">Texarkana</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/california/28" class="list-group-item region">California</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/california/bakersfield/28" class="list-group-item city">Bakersfield</a>
                      <a href="http://siddiq.local/us/california/chico/29" class="list-group-item city">Chico</a>
                      <a href="http://siddiq.local/us/california/fresno/30" class="list-group-item city">Fresno</a>
                      <a href="http://siddiq.local/us/california/gold-country/31" class="list-group-item city">Gold Country</a>
                      <a href="http://siddiq.local/us/california/humboldt-county/32" class="list-group-item city">Humboldt County</a>
                      <a href="http://siddiq.local/us/california/imperial-county/33" class="list-group-item city">Imperial County</a>
                      <a href="http://siddiq.local/us/california/inland-empire/34" class="list-group-item city">Inland Empire</a>
                      <a href="http://siddiq.local/us/california/los-angeles/35" class="list-group-item city">Los Angeles</a>
                      <a href="http://siddiq.local/us/california/mendocino-county/36" class="list-group-item city">Mendocino County</a>
                      <a href="http://siddiq.local/us/california/merced/37" class="list-group-item city">Merced</a>
                      <a href="http://siddiq.local/us/california/modesto/38" class="list-group-item city">Modesto</a>
                      <a href="http://siddiq.local/us/california/monterey-bay/39" class="list-group-item city">Monterey Bay</a>
                      <a href="http://siddiq.local/us/california/orange-county/40" class="list-group-item city">Orange County</a>
                      <a href="http://siddiq.local/us/california/palm-springs/41" class="list-group-item city">Palm Springs</a>
                      <a href="http://siddiq.local/us/california/redding/42" class="list-group-item city">Redding</a>
                      <a href="http://siddiq.local/us/california/reno-tahoe/43" class="list-group-item city">Reno / Tahoe</a>
                      <a href="http://siddiq.local/us/california/sacramento/44" class="list-group-item city">Sacramento</a>
                      <a href="http://siddiq.local/us/california/san-diego/45" class="list-group-item city">San Diego</a>
                      <a href="http://siddiq.local/us/california/san-luis-obispo/46" class="list-group-item city">San Luis Obispo</a>
                      <a href="http://siddiq.local/us/california/santa-barbara/47" class="list-group-item city">Santa Barbara</a>
                      <a href="http://siddiq.local/us/california/sf-bay-area/48" class="list-group-item city">SF Bay Area</a>
                      <a href="http://siddiq.local/us/california/stockton/49" class="list-group-item city">Stockton</a>
                      <a href="http://siddiq.local/us/california/ventura-county/50" class="list-group-item city">Ventura County</a>
                      <a href="http://siddiq.local/us/california/visalia-tulare/51" class="list-group-item city">Visalia-Tulare</a>
                      <a href="http://siddiq.local/us/california/yuba-sutter/52" class="list-group-item city">Yuba-Sutter</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/colorado/53" class="list-group-item region">Colorado</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/colorado/boulder/53" class="list-group-item city">Boulder</a>
                      <a href="http://siddiq.local/us/colorado/colorado-springs/54" class="list-group-item city">Colorado Springs</a>
                      <a href="http://siddiq.local/us/colorado/denver/55" class="list-group-item city">Denver</a>
                      <a href="http://siddiq.local/us/colorado/fort-collins-north-co/56" class="list-group-item city">Fort Collins / North CO</a>
                      <a href="http://siddiq.local/us/colorado/pueblo/57" class="list-group-item city">Pueblo</a>
                      <a href="http://siddiq.local/us/colorado/rocky-mountains/58" class="list-group-item city">Rocky Mountains</a>
                      <a href="http://siddiq.local/us/colorado/western-slope/59" class="list-group-item city">Western Slope</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/connecticut/60" class="list-group-item region">Connecticut</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/connecticut/eastern-ct/60" class="list-group-item city">Eastern CT</a>
                      <a href="http://siddiq.local/us/connecticut/hartford/61" class="list-group-item city">Hartford</a>
                      <a href="http://siddiq.local/us/connecticut/northwest-ct/62" class="list-group-item city">Northwest CT</a>
                      <a href="http://siddiq.local/us/connecticut/new-haven/63" class="list-group-item city">New Haven</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/delaware/64" class="list-group-item region">Delaware</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/delaware/dover/64" class="list-group-item city">Dover</a>
                      <a href="http://siddiq.local/us/delaware/wilmington/65" class="list-group-item city">Wilmington</a>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="list-group list-group-root well">
                    <a href="http://siddiq.local/us/district-of-columbia/66" class="list-group-item region">District of Columbia</a>
                    <div class="list-group">
                      <a href="http://siddiq.local/us/district-of-columbia/washington/66" class="list-group-item city">Washington</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </body>
    </html>