CODEWITHSUNDEEP
htmlcssbootstrap-4
user2837961
user2837961

Reputation: 1555

Bootstrap - list-group to take entire width of the div

I have a div which is 200px in height. How do I divide the ul items in equal rows? They always align on top. I have colored the div green to make it obvious. Eventually I would be using ngFor in my ul, so I do not know how many rows are going to be there

<div style="height:200px">
   <ul class="list-group list-group-flush">
     <li class="list-group-item border-0 bg-transparent ">
        test
     </li>
     <li class="list-group-item border-0 bg-transparent">
        test1
     </li>
   </ul>
</div>

enter image description here

Upvotes: 0

Views: 1072

Answers (2)

sawan
sawan

Reputation: 2381

If you want to divide the content of your div then its best you should use table

<table style="height: 200px;">
  <tbody>
    <tr *ngFor="let hero of heroes">
      <td class="align-baseline">
           <td>{{hero.name}}</td>
      </td>
    </tr>
  </tbody>
</table>

This is another way by which can give height to li

<ul  class="list-group list-group-flush" style="line-height:180%">
    <li class="list-group-item border-0 bg-transparent ">
        test
     </li>
     <li class="list-group-item border-0 bg-transparent">
        test1
     </li>
</ul>

Upvotes: 1

David Taiaroa
David Taiaroa

Reputation: 25495

Would a flexbox solution work for you? https://codepen.io/panchroma/pen/ExWpdeK

HTML

<div class="wrap">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CSS

.wrap ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 200px;
}  
.wrap {
  background-color: green;
}

Upvotes: 0

Related Questions