Boomerang UI Kit

Cards

Our cards provide a flexible and extensible content container with multiple variants and options.

Open Bootstrap Docs

Example

Card image cap

Card title

Some quick example text....

Go somewhere 
<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="holder.js/600x400?auto=yes" alt="Card image cap" class="img-fluid">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text....</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
</div>

Metadata

Special title treatment
2 hrs ago

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <h6 class="text-muted mb-4">2 hrs ago</h6>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <ul class="list-inline mb-4">
                    <li class="list-inline-item pr-2">
                        <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                    </li>
                    <li class="list-inline-item">
                        <i class="fas fa-eye text-muted mr-1"></i> 750
                    </li>
                </ul>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>
Special title treatment
2 hrs ago

With supporting text below...

Go somewhere
JD David Wally
Special title treatment
2 hrs ago

With supporting text below...

Go somewhere
JD David Wally
  • 2 hrs ago 
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <h6 class="heading heading-sm strong-400 text-muted mb-4">
                    2 hrs ago
                </h6>
                <p class="card-text">With supporting text below...</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col">
                        <span class="avatar avatar-sm bg-purple">JD</span>
                        <span class="avatar-content">David Wally</span>
                    </div>
                    <div class="col text-right text-xs-right">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item pr-2">
                                <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                            </li>
                            <li class="list-inline-item">
                                <i class="fas fa-eye text-muted mr-1"></i> 750
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                <h6 class="heading heading-sm strong-400 text-muted mb-4">
                    2 hrs ago
                </h6>
                <p class="card-text">With supporting text below...</p>
                <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col">
                        <span class="avatar avatar-sm bg-purple">JD</span>
                        <span class="avatar-content">David Wally</span>
                    </div>
                    <div class="col text-right text-xs-right">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item pr-2">
                                2 hrs ago
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Actions

Favorite post

With supporting text below as a natural lead-in to additional content.

Action button
2 hrs ago

Love & bookmark post

With supporting text below as a natural lead-in to additional content.

Action button
2 hrs ago 
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h4 class="heading h5 mb-0">Favorite post</h4>
                    </div>
                    <div class="col-4">
                        <div class="card-icon-actions text-right">
                            <a href="#" class="favorite active" data-toggle="tooltip" data-original-title="Save to favorites"><i class="fas fa-star"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col-6">
                        <a href="#" class="btn btn-sm btn-primary">Action button</a>
                    </div>
                    <div class="col-6 text-right">
                        <span class="text-muted">2 hrs ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h4 class="heading h5 mb-0">Love &amp; bookmark post</h4>
                    </div>
                    <div class="col-4">
                        <div class="card-icon-actions text-right">
                            <a href="#" class="favorite" data-toggle="tooltip" data-original-title="Save as favorite"><i class="fas fa-star"></i></a>
                            <a href="#" class="love active" data-toggle="tooltip" data-original-title="Love this"><i class="fas fa-heart"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col-6">
                        <a href="#" class="btn btn-sm btn-primary">Action button</a>
                    </div>
                    <div class="col-6 text-right">
                        <span class="text-muted">2 hrs ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Commentable

JD
Bettie Mavis
New York, US
23 likes

With supporting text below as a natural lead-in to additional content.

Got to post Repost inappropriate Embed Cancel 
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header py-4">
                <div class="d-flex align-items-center">
                    <span class="avatar avatar-sm bg-purple">JD</span>
                    <div class="avatar-content">
                        <h5 class="h6 mb-0">Bettie Mavis</h5>
                        <small class="d-block text-muted">New York, US</small>    
                    </div>
                </div>
            </div>
            <div class="card-image">
                <img src="holder.js/600x400?auto=yes" class="img-fluid">
            </div>
            <div class="card-body">
                <div class="row mb-1">
                    <div class="col">
                        <div class="card-icon-actions card-icon-actions-lg">
                            <a href="#" class="love active"><i class="fas fa-heart"></i></a>
                            <a href="#"><i class="fas fa-comment"></i></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-icon-actions card-icon-actions-lg text-right">
                            <a href="#"><i class="fas fa-bookmark"></i></a>
                        </div>
                    </div>
                </div>
                <h6 class="heading h6 mb-3">23 likes</h6>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
            <div class="card-footer">
                <div class="row ">
                    <div class="col-10">
                        <form class="card-comment-box" role="form">
                            <textarea rows="1" class="form-control textarea-autosize" placeholder="Add a comment..."></textarea>
                        </form>
                    </div>
                    <div class="col-2 text-right">
                        <div class="card-icon-actions card-icon-actions-lg">
                            <a href="#" data-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-ellipsis-h"></i>
                            </a>
                            <div class="dropdown-menu py-0 text-center">
                                <a class="dropdown-item" href="#">Got to post</a>
                                <a class="dropdown-item" href="#">Repost inappropriate</a>
                                <a class="dropdown-item" href="#">Embed</a>
                                <a class="dropdown-item" href="#">Cancel</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

List groups

Simple list group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Add team members

JD
Johnyy Depp 10:05 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor
TC
Tom Cruise 11:30 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor
WS
Will Smith 15:45 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor

 
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header py-4">
                <h4 class="heading h5 font-weight-500 mb-0">Simple list group</h4>
            </div>
            <div class="list-group">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header py-4">
                <div class="d-flex align-items-center">
                    <h4 class="heading h5 mb-0">Add team members</h4>
                </div>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-purple">JD</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-pink">TC</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                    <div class="list-group-img">
                        <span class="avatar bg-blue">WS</span>
                    </div>
                    <div class="list-group-content">
                        <div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
                        <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                    </div>
                </a>
            </div>
            <div class="card-footer">
                <form class="card-comment-box" role="form">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <input class="form-control" placeholder="e.g @willsmith">
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-sm btn-success btn-icon-only rounded-circle">
                                <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Card with overlay

Card image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card text-white border-0 overflow-hidden">
    <img class="card-img" src="../assets/images/backgrounds/img-1.jpg" alt="Card image">
    <span class="mask bg-primary alpha-7"></span>
    <div class="card-img-overlay d-flex align-items-center">
        <div class="col-lg-8">
            <h4 class="heading h3 text-white">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text">Last updated 3 mins ago</p>
        </div>
    </div>
</div>

Colored cards

Theme as framework

We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.

Learn more

Even more components

We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.

Learn more 
<div class="row">
    <div class="col-md-6">
        <div class="card bg-primary text-white px-4 py-4 border-0 mb-0">
            <div class="card-body">
                <h1 class="heading h3 text-white">Theme as framework</h1>
                <p class="mt-4">
                    We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                </p>
                <a href="#" class="btn btn-secondary mt-4">Learn more</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card bg-secondary px-4 py-4 border-0 mb-0">
            <div class="card-body">
                <h1 class="heading h3">Even more components</h1>
                <p class="mt-4">
                    We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                </p>
                <a href="#" class="btn btn-primary mt-4">Learn more</a>
            </div>
        </div>
    </div>
</div>

Pricing cards

Starter

$19

per month
  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation

Small business

$49

per month
  • Up to 15 users
  • Premium email support
  • Weekly updates
  • Free cancelation
<div class="row">
    <div class="col-md-6">
        <div class="card card-pricing text-center px-3 mb-4">
            <div class="card-header py-4">
                <h4 class="mb-4">Starter</h4>
                <h1 class="display-4 text-primary text-center">$19</h1>
                <span class="h6 text-muted">per month</span>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-4">
                    <li>Up to 5 users</li>
                    <li>Basic support on Github</li>
                    <li>Monthly updates</li>
                    <li>Free cancelation</li>
                </ul>
                <button type="button" class="btn btn-primary mb-3">Start free trial</button>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-pricing popular text-center px-3 mb-4 z-depth-3">
            <div class="card-header py-4">
                <h4 class="mb-4">Small business</h4>
                <h1 class="display-4 text-primary text-center">$49</h1>
                <span class="h6 text-muted">per month</span>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-4">
                    <li>Up to 15 users</li>
                    <li>Premium email support</li>
                    <li>Weekly updates</li>
                    <li>Free cancelation</li>
                </ul>
                <button type="button" class="btn btn-primary mb-3">Start free trial</button>
            </div>
        </div>
    </div>
</div>

Icon cards

Latest Bootstrap framework (v4.0.0)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Latest Bootstrap framework (v4.0.0)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

<div class="row">
    <div class="col-md-6">
        <div class="card bg-primary">
            <div class="card-body py-5">
                <div class="d-flex align-items-start">
                    <div class="icon icon-lg">
                        <i class="fab fa-twitter text-white"></i>
                    </div>
                    <div class="icon-text">
                        <h4 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h4>
                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card bg-dark">
            <div class="card-body py-5">
                <div class="d-flex align-items-start">
                    <div class="icon icon-lg">
                        <i class="fab fa-twitter text-white"></i>
                    </div>
                    <div class="icon-text">
                        <h4 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h4>
                        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>