How to create Call to Action Template using Bootstrap 5 ?

Last Updated : 08 Jan, 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

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/bootstrap@5.3.2/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:

ljk

Suggest improvement

How to Create a Basic Two-Column Layout using Bootstrap 5 ?

Share your thoughts in the comments

How to create Call to Action Template using Bootstrap 5 ?

Preview

Approach

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?