Skip to content

Elements:Call To Action Blocks

Grab attention with call to actions blocks.

Basics

Create quick, easy and responsive call to actions blocks. Call to action blocks make use of colour utilities, spacer utilities, grid & flexbox functionality built into AppStrap to give you ultimate freedom to build awesome call to action blocks.

View code example
<div class="container">
  <div class="row bg-faded p-3">
    <div class="col-12 col-lg-7 py-2">
      <h3 class="text-uppercase font-weight-bold mt-0 mb-2">Call To Action Blocks</h3>
      <h5 class="text-grey-dark">Grab attention and drive clicks so get using them now!!</h5>
    </div>
    <div class="col-12 col-lg-5 py-2 text-lg-right">
      <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-primary py-3 px-4">Get AppStrap <i class="fa fa-cc-visa ml-2"></i></a>
    </div>
  </div>
</div>

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Examples

You have totally freedom to mix and match all the utilities AppStrap has to offer to build all kinds of awesome call to action block layouts.

View code example
<div class="bg-faded text-center p-3 p-lg-4 mb-3">
  <h3 class="text-uppercase font-weight-bold mt-0 mb-2">Call To Action Blocks</h3>
  <h5 class="text-faded">Grab attention and drive clicks so get using them now!!</h5>
  <hr class="my-3 w-50 mx-auto" />
  <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-outline-primary">Get AppStrap <i class="fa fa-angle-right ml-2"></i></a>
</div>

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Get AppStrap

View code example
<div class="container">
  <div class="row bg-faded p-3 align-items-center">
    <div class="col-12 col-lg-8 order-2 py-2">
      <h3 class="text-uppercase font-weight-bold mt-0 mb-2">Call To Action Blocks</h3>
      <h5 class="text-grey-dark mb-0">Grab attention and drive clicks so get using them now!!</h5>
    </div>
    <div class="col-12 col-lg-4 order-1 py-2 text-lg-right">
      <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-primary py-3 px-4">Get AppStrap <i class="fa fa-cc-visa ml-2"></i></a>
    </div>
  </div>
</div>

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

View code example
<div class="container p-4 text-center bg-inverse text-white">
  <h3 class="text-uppercase font-weight-bold my-0">Awesome <span class="text-primary">Features</span></h3>
  <hr class="hr-lg hr-primary mt-3 mb-4 w-20 mx-auto" />
  
  <div class="row no-gutters">
    <div class="col-md-6 text-left text-md-right mb-5">
      <div class="row no-gutters align-items-center">
        <div class="col-3 order-2 text-center"><i class="fa fa-bolt icon-3x text-primary"></i></div>
        <div class="col-9 order-1">
          <h4 class="mb-0 text-uppercase font-weight-bold">99.9% Uptime</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>          
        </div>
      </div>
    </div>
    <div class="col-md-6 text-left mb-5">
      <div class="row no-gutters align-items-center">
        <div class="col-3 text-center"><i class="fa fa-bug icon-3x text-primary"></i></div>
        <div class="col-9">
          <h4 class="mb-0 text-uppercase font-weight-bold">100% Bug Free</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>
        </div>
      </div>
    </div>
    
    <div class="col-md-6 text-left text-md-right mb-5 mb-md-0">
      <div class="row no-gutters align-items-center">
        <div class="col-3 order-2 text-center"><i class="fa fa-mobile icon-3x text-primary"></i></div>
        <div class="col-9 order-1">
          <h4 class="mb-0 text-uppercase font-weight-bold">Mobile Friendly</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>          
        </div>
      </div>
    </div>
    <div class="col-md-6 text-left mb-3 mb-md-0">
      <div class="row no-gutters align-items-center">
        <div class="col-3 text-center"><i class="fa fa-rocket icon-3x text-primary"></i></div>
        <div class="col-9">
          <h4 class="mb-0 text-uppercase font-weight-bold">Free Upgrades</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>
        </div>
      </div>
    </div>     
  </div>   
    
  <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-primary px-5 mt-5">Get AppStrap <i class="fa fa-angle-double-right ml-2"></i></a>
</div>

Awesome Features


99.9% Uptime

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

100% Bug Free

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

Mobile Friendly

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

Free Upgrades

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

Get AppStrap

Image Backgrounds

Add background images quickly and easily using the data-bg-img="IMAGE-PATH" attribute on a wrapper element.

You can also add the classes .overlay & .overlay-op-(1-10) to apply an overlay over the background image so text shows.

View code example
<div class="container p-4 text-center bg-inverse text-white bg-img-cover overlay overlay-op-6" data-bg-img="assets/img/backgrounds/zfg9gz7ylcu-dalibor-bosnjakovic.jpg">
  <h3 class="text-uppercase font-weight-bold my-0">Awesome <span class="text-primary">Features</span></h3>
  <hr class="hr-lg hr-primary mt-3 mb-4 w-20 mx-auto" />
  
  <div class="row no-gutters">
    <div class="col-md-6 text-left text-md-right mb-3">
      <div class="row no-gutters align-items-center">
        <div class="col-3 order-2 text-center"><i class="fa fa-bolt icon-3x text-primary"></i></div>
        <div class="col-9 order-1">
          <h4 class="mb-0 text-uppercase font-weight-bold">99.9% Uptime</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>          
        </div>
      </div>
    </div>
    <div class="col-md-6 text-left mb-3">
      <div class="row no-gutters align-items-center">
        <div class="col-3 text-center"><i class="fa fa-bug icon-3x text-primary"></i></div>
        <div class="col-9">
          <h4 class="mb-0 text-uppercase font-weight-bold">100% Bug Free</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>
        </div>
      </div>
    </div>    
  </div>   
    
  <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-primary px-5 mt-5">Get AppStrap <i class="fa fa-angle-double-right ml-2"></i></a>
</div>

Awesome Features


99.9% Uptime

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

100% Bug Free

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

Get AppStrap

Quick Parallax

Here we simply add 2 attributes to our wrapper element: data-bg-img="IMAGE-PATH" and data-css='{"background-attachment": "fixed"}'

NOTE: extended parallax functionality will be added in a future release of AppStrap.

View code example
<div class="container p-4 text-center bg-inverse text-white bg-img-cover overlay overlay-op-6" data-bg-img="assets/img/backgrounds/zfg9gz7ylcu-dalibor-bosnjakovic.jpg" data-css='{"background-attachment": "fixed"}'>
  <h3 class="text-uppercase font-weight-bold my-0">Awesome <span class="text-primary">Features</span></h3>
  <hr class="hr-lg hr-primary mt-3 mb-4 w-20 mx-auto" />
  
  <div class="row no-gutters">
    <div class="col-md-6 text-left text-md-right mb-3">
      <div class="row no-gutters align-items-center">
        <div class="col-3 order-2 text-center"><i class="fa fa-bolt icon-3x text-primary"></i></div>
        <div class="col-9 order-1">
          <h4 class="mb-0 text-uppercase font-weight-bold">99.9% Uptime</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>          
        </div>
      </div>
    </div>
    <div class="col-md-6 text-left mb-3">
      <div class="row no-gutters align-items-center">
        <div class="col-3 text-center"><i class="fa fa-bug icon-3x text-primary"></i></div>
        <div class="col-9">
          <h4 class="mb-0 text-uppercase font-weight-bold">100% Bug Free</h4>
          <p class="mb-0">Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore</p>
        </div>
      </div>
    </div>    
  </div>   
    
  <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-primary px-5 mt-5">Get AppStrap <i class="fa fa-angle-double-right ml-2"></i></a>
</div>

Awesome Features


99.9% Uptime

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

100% Bug Free

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

Get AppStrap

Video Backgrounds

View code example
<div class="container" data-bg-video="assets/videos/night.mp4" data-settings='{"position":"50% 50%";}'>
  <div class="row p-3 p-lg-5 text-white">
    <div class="col-12 col-lg-7 py-2">
      <h3 class="text-uppercase font-weight-bold mt-0 mb-2">Call To Action Blocks</h3>
      <h5 class="text-faded">Grab attention and drive clicks so get using them now!!</h5>
    </div>
    <div class="col-12 col-lg-5 py-2 text-lg-right">
      <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-primary py-3 px-4">Get AppStrap <i class="fa fa-cc-visa ml-2"></i></a>
    </div>
  </div>
</div>

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Clickable CTA Blocks

To make the whole CTA block clickable to a URL simply add an data-url="URL" .

View code example
<div class="container bg-primary" data-url="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4">
  <div class="row p-3 p-lg-5 text-white">
    <div class="col-12 col-lg-7 py-2">
      <h3 class="text-uppercase font-weight-bold mt-0 mb-2">Call To Action Blocks</h3>
      <h5 class="text-faded">Grab attention and drive clicks so get using them now!!</h5>
    </div>
    <div class="col-12 col-lg-5 py-2 text-lg-right">
      <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-inverse py-3 px-4">Get AppStrap <i class="fa fa-cc-visa ml-2"></i></a>
    </div>
  </div>
</div>

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Colour Options

You can make use of all the colour utilities for call to action blocks.

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Bordered

You can use the border colour classes to give CTA blocks a coloured border.

You can also remove borders from a given side or sides using the border-0 and border-SIDE-0 classes.

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Full Width

To make a CTA block full width simply put it outside of any .container wrapper and then include a .container within it so it stretches to the full page width but the content is contained.

View code example
<div class="bg-faded p-3 mb-3"><!-- Wrapper: add background colour, image or video to this -->
  <div class="container"><!-- Stops the content stretching full width -->
    <div class="row">
      <div class="col-12 col-lg-7 py-2">
        <h3 class="text-uppercase font-weight-bold mt-0 mb-2">Call To Action Blocks</h3>
        <h5 class="text-grey-dark">Grab attention and drive clicks so get using them now!!</h5>
      </div>
      <div class="col-12 col-lg-5 py-2 text-lg-right">
        <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4" class="btn btn-lg btn-primary py-3 px-4">Get AppStrap <i class="fa fa-cc-visa ml-2"></i></a>
      </div>
    </div>
  </div>
</div>

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Call To Action Blocks

Grab attention and drive clicks so get using them now!!

Awesome Features


99.9% Uptime

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

100% Bug Free

Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore

Get AppStrap

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage