In this article, we will create a Call to Action (CTA) Template using Bootstrap 5. The main purpose of a Bootstrap Call to Action(CTA) template is to encourage the user to perform a specific action when the user visits the webpage. A simple CTA may consist of the image, content, button, etc, that will redirect to the specified page. For this, the user may immediately engage or respond to the action that needs to be taken, along with providing the on-screen guidelines to move to the next steps in a conversion process.
Preview
Approach
- Integrate the bootstrap with the CDN links. Make a basic structure of the template project using different bootstrap classes.
- The class navbar is used for making the navbar. The navbar-expand-lg class is used to make the navbar responsive.
- The brand name has the class fw-bold for bold text. The toggle button has the class navbar-toggler.
- The collapse element for navbar links has the class collapse. It is used when the screen size reduces the collapse class to hide the navigation links and provide a toggle effect.
Example: The example illustrates the code for making a Call to Action Template using Bootstrap 5.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Call to Action
</title>
<link href=
rel="stylesheet"
integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.bgimg {
background-image:
linear-gradient(rgba(252, 253, 252, 0.5) 0%,
rgba(250, 250, 250, 0.5) 100%),
url(
background-size: cover;
height: 92vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 20rem;
height: 25rem;
}
</style>
</head>
<body>
<!-- Navbar Component -->
<nav class="navbar navbar-expand-lg
bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand text-success fw-bold" GeeksforGeeks
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link fw-bold" role="button"
aria-expanded="false">
Courses
</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="#" role="button" aria-expanded="false">
Tutorials
</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold" href="#" role="button"
aria-expanded="false">
Practice
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Card Component-->
<div class="col bgimg">
<div class="card">
<img src=
class="card-img-top"
alt="gfgimg">
<div class="card-body">
<h5 class="card-title text-primary">
30 OOPs Interview Questions
and Answers (2023)
</h5>
<p class="card-text">
Object-Oriented Programming, or OOPs,
is a programming paradigm that implements
the concept of objects in the program.
</p>
<div>
<a href=
class="btn float-right btn-success
fw-bold d-flex
justify-content-center
align-items-center">
Click to Explore
</a>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output: