Call To Action

A simple call to action banner.

  1. Info - Button Callout
  2. Warning - Button Callout
  3. Danger - Email Subscribe Callout

Font Awesome Required for Chevron in Button

Code:

<link rel="stylesheet" href="../../css/font-awesome.min.css">

Info - Button Callout

A Catchy Title

And some background information



Code:

<div class="row">
    <div class="col">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="row">
                    <div class="col-8">
                        <h4 class="card-title">A Catchy Title</h4>
                        <p>And some background information</p>
                    </div>
                    <div class="col-4">
                        <br>
                        <button class="btn btn-dark btn-block">Buy Now!
                            &nbsp;&nbsp;&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Warning - Button Callout

A Catchy Title

And some background information



Code:

<div class="row">
    <div class="col">
        <div class="card bg-warning">
            <div class="card-body">
                <div class="row">
                    <div class="col-8">
                        <h4 class="card-title">A Catchy Title</h4>
                        <p>And some background information</p>
                    </div>
                    <div class="col-4">
                        <br>
                        <button class="btn btn-dark btn-block">Buy Now!
                            &nbsp;&nbsp;&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Danger - Email Subscribe Callout

A Catchy Title

And some background information


Code:

<div class="row">
    <div class="col">
        <div class="card bg-danger text-white">
            <div class="card-body">
                <div class="row">
                    <div class="col-8">
                        <h4 class="card-title">A Catchy Title</h4>
                        <p>And some background information</p>
                    </div>
                    <div class="col-4">
                        <form action="#">
                            <input class="form-control" type="text" placeholder="your@email.com">
                            <button class="btn btn-dark btn-block">Subscribe!
                                &nbsp;&nbsp;&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </button>
                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>