How to create Call to Action Template using Bootstrap 5 ?

How to create Call to Action Template using Bootstrap 5 ?

Last Updated : 25 Jul, 2024

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

bsnap-(1)

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          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(
"https://media.geeksforgeeks.org/wp-content/uploads/20240104124620/1.png");
            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" 
               href="https://www.geeksforgeeks.org/">
                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" 
                           href="https://www.geeksforgeeks.org/" 
                           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=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104124458/1.png"
                 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=
"https://www.geeksforgeeks.org/oops-interview-questions/" 
                       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:

How to create Call to Action Template using Bootstrap 5 ?

S

shivanigupta18rk

Improve

Article Tags :

Similar Reads

How to create a Simple Footer using Bootstrap 5 ?

Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The <footer> tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bo

How to create a web page using Bootstrap ?

Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for

Create a To Do List using Bootstrap 5

A To-Do List is a tool for organizing tasks, allowing users to list, prioritize, and manage their activities, ensuring efficiency and productivity in completing them. Here we will create a ToDo list using Bootstrap. We will create our layout or component using Bootstrap predefined utilities and comp

How to Create ToDo App using HTML, CSS, JS and Bootstrap ?

We will create a basic todo app to understand the basics of JavaScript. In this web app, one can create a todo list and can remove specific elements from the list.Features or Functionalities to implement:Â Â Interactive and Responsive designResponsive Grid SystemStore and Delete itemsPrerequisites: Ba

How to Create Multipage Website Using Bootstrap?

To create a multipage website using Bootstrap and HTML structure utilize Bootstrap's navbar component to create navigation links between pages. Incorporate Font Awesome icons for visual enhancements and use Bootstrap classes for responsive design.Output Preview:How to Create Multipage Website Using