CODEWITHSUNDEEP
htmltwitter-bootstrapcss
mijok
mijok

Reputation: 201

Align columns in bootstrap

I'm trying to achieve two fixed columns in Bootstrap. Current situation is you can see on the image below:

enter image description here

I'm trying to achieve that left and right column is align to the top no matter how many item I have in column. See image below.

enter image description here

My current code is here:

[3]:https://jsfiddle.net/evr86bjn/2/

Can anybody help me?

Upvotes: 0

Views: 368

Answers (3)

alesssz
alesssz

Reputation: 520

You can use bootstrap at your own advantage if you want... I stripped down your html code to just your 2 ul, using bootstrap its quite simple, something like

<div class="row">
  <div class="col-sm-6">             
    <ul id="listWrap" class="price-table__info"> 
      <li>
        <p class="ocjenaNaslov">Lorem Lorem 1</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem 1</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>2</p>
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul id="listWrap" class="price-table__info">
      <li>
        <p class="ocjenaNaslov">Lorem Lorem 2</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <button type="submit" class="btn btn-primary waves-effect isp"><i class="far fa-calendar-alt"></i>Info</button>
      </li>
    </ul>
  </div>
</div>

Upvotes: 0

Rajesh
Rajesh

Reputation: 272

You gave align-items: center for the Holder div. Try adding align-items:flex-start. hope this will fix the issue.

.Holder {
display: flex;
align-items: flex-start;
justify-content: center;
}

Upvotes: 0

Xenio Gracias
Xenio Gracias

Reputation: 2758

remove align-items: center; from .holder. since 1st ul has less content it is aligned to center.

https://jsfiddle.net/evr86bjn/2/

    .Holder {
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

Upvotes: 2

Related Questions