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>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
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.
<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>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>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"
.
<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.
<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>