Which bootstrap 3 class should I use to create vertical list of items / "cards" (Rails 3.2, bootstrap3)

Question

I am building a daily deal app to learn Ruby on Rails.

I'm now building the home page view. I would like it to be simply a vertical list of "cards" (see https://www.intercom.com/blog/why-cards-are-the-future-of-the-web/), or more simply put, a vertical list of elements with each one being a horizontal rectangle with a grey border.

I'm new to Bootstrap and there are so many classes available. Is there one I could use for these "cards", even if I have to override a little of its CSS afterwards?

Here is an example of the kind of "simple vertical rectangle list" I'd like to have.

Maybe class "list-group-item" but my rectangles are all separated as you see in the picture (i.e they're not touching each other) and I need a red title above each rectangle (i.e the title is outside the rectangle/item) so I'm not sure it's the right choice.

Is there a better match for the class in Bootstrap 3 for what I want to do?

Answer 1

What on top of my head is you spit out unordered list ul > list-group-item > div > more div > text

I made an example. checkout here https://jsfiddle.net/kuntau/X5Wvn/

HTML

<div class="container" >
    <ul class="list-group">
    <li>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="panel-info">
                    <p><strong>Tel: 011-345-898</strong></p>
                    <p>9182 Lorem Ipsum<br />
                        consectetur adipiscing elit.<br />
                       Nullam vel lacus felis.</p>
                </div>
                <div class="panel-rating">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <p>Rate Yourself!</p>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
            </div>
        </div>
    </li>
</ul>
</div>

CSS

.list-group li {
    list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
    float: left;
    margin: 0 10px;
}