CODEWITHSUNDEEP
htmlcsstwitter-bootstraplistalignment
Leth
Leth

Reputation: 1059

Aligning list groups of varied height horizontally (Bootstrap 3)

I'm trying to horizontally align my list groups, which currently act like this:

https://i.sstatic.net/S2m6H.png

What I want is for the list groups to display on the next line, directly below the list-group above with the biggest height.

They are all placed on the same row, with 6 columns each. My code looks like this:

                                 <div class="col-sm-6">
                                    <div class="list-group">
                                        <div class="list-group-item">
                                            <h4 class="list-group-item-heading">Soveværelser</h4>
                                            <ul class="ul-with-bullets">
                                                <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
                                                <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="list-group">
                                        <div class="list-group-item">
                                            <h4 class="list-group-item-heading">Toiletter</h4>
                                            <ul class="ul-with-bullets">
                                                    <li>Nr 1: WC. Varmt og koldt vand</li>
                                                </ul>
                                        </div>
                                    </div>
                                </div>

I would like to avoid created a new row for every 2nd list group, as I need this implemented in a CMS system. Is there a smarter way to set up a grid? Having the list groups align below each other, while eliminating white space could also work, but I'm not if that is possible.

Edit: Added code changes.

<div class="row">
                                <div class="col-sm-12">
                                    <div class="list-group col-sm-6">
                                        <div class="list-group-item">
                                            <h4 class="list-group-item-heading">Soveværelser</h4>
                                            <ul class="ul-with-bullets">
                                                <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
                                                <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="list-group col-sm-6">
                                        <div class="list-group-item">
                                            <h4 class="list-group-item-heading">Toiletter</h4>
                                            <ul class="ul-with-bullets">
                                                    <li>Nr 1: WC. Varmt og koldt vand</li>
                                                </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="list-group col-sm-6">
                                        <div class="list-group-item">
                                            <h4 class="list-group-item-heading">Andre faciliteter</h4>
                                            <ul class="ul-with-bullets">
                                                    <li>Køkken: varmt og koldt vand</li>
                                                    <li>Gas/elkomfur</li>
                                                    <li>Opvaskemaskine</li>
                                                </ul>
                                        </div>
                                    </div>
                                    <div class="list-group col-sm-6">
                                        <div class="list-group-item">
                                            <h4 class="list-group-item-heading">Udenfor</h4>
                                            <ul class="ul-with-bullets">
                                                    <li>Terrasse el. lignende</li>
                                                    <li>P-plads på grunden: 3</li>
                                                    <li>Havemøbler</li>
                                                    <li>Grill</li>
                                                </ul>
                                        </div>
                                    </div>
                                </div>
                        </div>

Upvotes: 0

Views: 493

Answers (3)

Jenti Dabhi
Jenti Dabhi

Reputation: 880

hi you can try css flexbox here

CSS

  .row.flex-row{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    .row.flex-row > div{margin-bottom: 15px;}
    .row.flex-row .list-group{margin-bottom: 0;}
    .row.flex-row .list-group,.row.flex-row .list-group .list-group-item{height: 100%;}

HTML

<div class="row flex-row">
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Soveværelser</h4>
                <ul class="ul-with-bullets">
                    <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
                    <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                    </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                        <li>Nr 1: WC. Varmt og koldt vand</li>


                    </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                    </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                    </ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

toffler
toffler

Reputation: 1233

I'm not exactely sure if thats what you are looking for, but u might do it with tables?

<table>
    <thead>
      <tr>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    <td>

        <div class="list-group">
          <div class="list-group-item">
            <h4 class="list-group-item-heading">Soveværelser</h4>
            <ul class="ul-with-bullets">
              <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
              <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
            </ul>
          </div>

      </div>
      </td>
      <td>

        <div class="list-group">
          <div class="list-group-item">
            <h4 class="list-group-item-heading">Toiletter</h4>
            <ul class="ul-with-bullets">
              <li>Nr 1: WC. Varmt og koldt vand</li>
            </ul>
          </div>
        </div>

      </td>
    </tbody>

</table>

Upvotes: 1

Stem Florin
Stem Florin

Reputation: 872

The way i think this could be done is like this : i changed col-sm-6 to col-sm-12 , and then i added col-sm-6 to the list-group

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
  <div class="list-group col-sm-6">
    <div class="list-group-item">
      <h4 class="list-group-item-heading">Soveværelser</h4>
      <ul class="ul-with-bullets">
        <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
        <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
      </ul>
    </div>
  </div>
</div>
<div class="col-sm-12">
  <div class="list-group col-sm-6">
    <div class="list-group-item">
      <h4 class="list-group-item-heading">Toiletter</h4>
      <ul class="ul-with-bullets">
        <li>Nr 1: WC. Varmt og koldt vand</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions