Styling List Groups

List groups are a way of displaying list type content in a box that makes it similar to the type of interfaces that you would see on mobile devices. So you can combine them with other media types and there's actually a couple of ways of doing these so we're going to get into those.

Working With Panels

Panels are another way to encapsulate content in Bootstrap. They're similar to what you can do with thumbnails and even list groups, but they have a different structure that makes a little more semantic sense. Plus, you can combine these with tables and list groups to create slightly more complex layouts than you can do with something like a thumbnail.

Using Wells

Wells are sort of a super-simpler version of panels. Think of them as a variation on a blockquote. It gives the element essentially an inset effect, and it boxes them.

List Groups Example Code

            <ul class="list-group">
                <li class="list-group-item">First item</li>
                <li class="list-group-item">Second item</li>
                <li class="list-group-item">Third item</li>
            </ul>
        

Panels Example Code

            <div class="panel panel-default">
                <div class="panel-body">A Basic Panel</div>
            </div>
        

Wells Example Code

            <div class="well">Basic Well</div>