CODEWITHSUNDEEP
twitter-bootstrap
Greg
Greg

Reputation: 936

How to use multiple columns in a list-group-item of a Bootstrap accordion?

How does one use columns in the list items that expand out when an accordion is opened in Bootstrap (3)? I am trying to keep it simple, and just use the grid classes in list-group-items as divs, as in using the col-sm-3 class.

Here is a bootply.

Excerpted, the accordion list-group-items look like this:

<div id="One" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-One">
    <div class="list-group">
                 <a class="list-group-item col-sm-3" href="#">a</a>
                <div class="list-group-item col-sm-3">b</div>
                <div class="list-group-item col-sm-3">c</div>
                <div class="list-group-item col-sm-3">d</div>
   </div>
</div>

The trouble is that when the accordions open, they don't get their height sized properly, and bleed into each other. I've tried adding a clearfix div under each list-group, but there are some weird artifacts with the first list-group-item border then.

Upvotes: 1

Views: 23323

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

From the bootstrap documentation

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

and

Content should be placed within columns, and only columns may be immediate children of rows.

Just add the row and container classes in the proper places and you'll have it.

Updated bootply - http://www.bootply.com/LQgHemNzZr

Upvotes: 4

Related Questions