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.
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
<div class="container">
<div class="row bg-light p-3 align-items-center">
<div class="col-12 col-lg-7 py-2">
<h3 class="display-6 fw-bold mt-0 mb-2">
Call To Action Blocks
</h3>
<h5 class="text-light-dark fw-normal">
Grab attention and drive clicks so get using them now!!
</h5>
</div>
<div class="col-12 col-lg-5 py-2 text-lg-end">
<a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme" class="btn btn-lg btn-primary btn-shadow py-3 px-4 d-inline-flex align-items-center">Get AppStrap <i class="bi-arrow-right-short icon-1x lh-1 ms-2"></i></a>
</div>
</div>
</div>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.
<div class="bg-light text-center p-3 p-lg-4 mb-3">
<h3 class="display-6 fw-bold mt-0 mb-2">
Call To Action Blocks
</h3>
<h5 class="text-faded fw-normal">
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?ref=tme" class="btn btn-lg btn-primary d-inline-flex align-items-center">Get AppStrap <i class="bi-arrow-right-short icon-1x lh-1 ms-2"></i></a>
</div>Call To Action Blocks
Grab attention and drive clicks so get using them now!!
<div class="container">
<div class="row bg-light p-3 align-items-center">
<div class="col-12 col-lg-8 order-2 py-2">
<h3 class="display-6 fw-bold mt-0 mb-2">
Call To Action Blocks
</h3>
<h5 class="text-light-dark mb-0 fw-normal">
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-end">
<a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme" class="btn btn-lg btn-primary py-3 px-4 d-inline-flex align-items-center">Get AppStrap <i class="bi-arrow-right-short icon-1x lh-1 ms-2"></i></a>
</div>
</div>
</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
<div class="container p-4 text-center bg-dark text-white">
<h3 class="display-6 fw-bold my-0">
Awesome <span class="text-primary">Features</span>
</h3>
<hr class="hr-lg border-primary mt-3 mb-4 w-20 mx-auto">
<div class="row g-0">
<div class="col-md-6 text-start text-md-end mb-5">
<div class="row g-0 align-items-center">
<div class="col-3 order-2 text-center"><i class="bi-bar-chart-line icon-3x text-primary"></i></div>
<div class="col-9 order-1">
<h4 class="mb-0 h4 fw-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-start mb-5">
<div class="row g-0 align-items-center">
<div class="col-3 text-center"><i class="bi-bug icon-3x text-primary"></i></div>
<div class="col-9">
<h4 class="mb-0 h4 fw-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-start text-md-end mb-5 mb-md-0">
<div class="row g-0 align-items-center">
<div class="col-3 order-2 text-center"><i class="bi-phone-vibrate icon-3x text-primary"></i></div>
<div class="col-9 order-1">
<h4 class="mb-0 h4 fw-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-start mb-3 mb-md-0">
<div class="row g-0 align-items-center">
<div class="col-3 text-center"><i class="bi-lightning icon-3x text-primary"></i></div>
<div class="col-9">
<h4 class="mb-0 h4 fw-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?ref=tme" class="btn btn-lg btn-primary px-5 mt-5">Get AppStrap <i class="fa fa-angle-double-right ms-2"></i></a>
</div>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-dark text-white bg-img-cover overlay overlay-op-8" data-bg-img="./assets/img/backgrounds/zfg9gz7ylcu-dalibor-bosnjakovic.jpg">
<h3 class="display-6 fw-bold my-0">
Awesome <span class="text-primary">Features</span>
</h3>
<hr class="hr-lg border-primary mt-3 mb-4 w-20 mx-auto">
<div class="row g-0">
<div class="col-md-6 text-start text-md-end mb-3">
<div class="row g-0 align-items-center">
<div class="col-3 order-2 text-center"><i class="bi-bar-chart-line-fill icon-3x text-primary"></i></div>
<div class="col-9 order-1">
<h4 class="mb-0 h4 fw-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-start mb-3">
<div class="row g-0 align-items-center">
<div class="col-3 text-center"><i class="bi-bug-fill icon-3x text-primary"></i></div>
<div class="col-9">
<h4 class="mb-0 h4 fw-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?ref=tme" class="btn btn-lg btn-primary px-5 mt-5">Get AppStrap <i class="fa fa-angle-double-right ms-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.
<div class="container p-4 text-center bg-dark text-white bg-img-cover overlay overlay-op-8" data-bg-img="./assets/img/backgrounds/zfg9gz7ylcu-dalibor-bosnjakovic.jpg" data-css="'{"background-attachment":">
<h3 class="display-6 fw-bold my-0">
Awesome <span class="text-primary">Features</span>
</h3>
<hr class="hr-lg border-primary mt-3 mb-4 w-20 mx-auto">
<div class="row g-0">
<div class="col-md-6 text-start text-md-end mb-3">
<div class="row g-0 align-items-center">
<div class="col-3 order-2 text-center"><i class="bi-bar-chart-line icon-3x text-primary"></i></div>
<div class="col-9 order-1">
<h4 class="mb-0 h4 fw-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-start mb-3">
<div class="row g-0 align-items-center">
<div class="col-3 text-center"><i class="bi-bug icon-3x text-primary"></i></div>
<div class="col-9">
<h4 class="mb-0 h4 fw-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?ref=tme" class="btn btn-lg btn-primary px-5 mt-5">Get AppStrap <i class="fa fa-angle-double-right ms-2"></i></a>
</div>Video Backgrounds
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
<div class="container" data-bg-video="./assets/videos/night.mp4" data-settings="'{"position":"50%">
<div class="row p-3 p-lg-5 text-white align-items-lg-center">
<div class="col-12 col-lg-7 py-2">
<h3 class="display-6 fw-bold mt-0 mb-2">
Call To Action Blocks
</h3>
<h5 class="fw-normal">
Grab attention and drive clicks so get using them now!!
</h5>
</div>
<div class="col-12 col-lg-5 py-2 text-lg-end">
<a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme" class="btn btn-lg btn-primary py-3 px-4 d-inline-flex align-items-center">Get AppStrap <i class="bi-arrow-right-short icon-1x lh-1 ms-2 ms-2"></i></a>
</div>
</div>
</div>Clickable CTA Blocks
To make the whole CTA block clickable to a URL simply add an
data-url="URL"
.
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
<div class="container bg-primary" data-url="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme">
<div class="row p-3 p-lg-5 text-white align-items-lg-center">
<div class="col-12 col-lg-7 py-2">
<h3 class="display-6 fw-bold mt-0 mb-2">
Call To Action Blocks
</h3>
<h5 class="fw-normal">
Grab attention and drive clicks so get using them now!!
</h5>
</div>
<div class="col-12 col-lg-5 py-2 text-lg-end">
<a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme" class="btn btn-lg btn-dark py-3 px-4 d-inline-flex align-items-center">Get AppStrap <i class="bi-arrow-right-short icon-1x lh-1 ms-2"></i></a>
</div>
</div>
</div>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!!
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.