How to Create Floating Testimonial in Bootstrap ?

Last Updated : 30 Jul, 2024

In this article, we will explore how to create an advanced floating testimonial using Bootstrap. We will guide you through setting up the HTML structure, applying Bootstrap classes for styling, and implementing smooth floating effects with CSS. This technique enhances the visual appeal of testimonials, making them dynamic and engaging.

Prerequisites

Basic Understanding of HTML and CSS
Bootstrap

Approach

HTML Structure Setup: Begin by creating the basic HTML structure for the testimonial, including necessary Bootstrap classes for responsive design and layout.
Styling with CSS: Apply custom CSS to style the testimonial box, adding padding, shadows, and rounded corners for a polished look. Use pseudo-elements for decorative floating circles.
Animation Implementation: Use CSS animations to create a smooth floating effect, defining keyframes to move the testimonial box up and down continuously.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Floating Testimonial</title>
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #2e2e2e;
            padding: 10px 20px;
            color: #fff;
        }

        .navbar img {
            max-width: 200px;
            display: block;
            margin: 0 auto;
        }

        body {
            background-color: #f8f9fa;
        }

        .testimonial {
            position: relative;
            max-width: 400px;
            margin: 40px auto;
            padding: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0);
            }
        }

        .testimonial::before,
        .testimonial::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.05);
            z-index: -1;
            animation: float 6s ease-in-out infinite;
        }

        .testimonial::before {
            top: -50px;
            left: -50px;
        }

        .testimonial::after {
            bottom: -50px;
            right: -50px;
            animation-delay: 3s;
        }

        .testimonial p {
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
        }

        .testimonial .author {
            display: flex;
            align-items: center;
        }

        .testimonial .author img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
        }

        .testimonial .author .name {
            font-weight: bold;
            font-size: 16px;
            color: #007bff;
        }

        .testimonial .author .title {
            font-size: 14px;
            color: #555;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="Logo">
    </nav>
    <div class="container">
        <div class="testimonial text-center">
            <p>"Bootstrap is incredibly powerful and versatile.
                I use it in all my projects!"</p>
            <div class="author">
                <img src="https://via.placeholder.com/50" alt="Author">
                <div>
                    <div class="name">John Doe</div>
                    <div class="title">Web Developer</div>
                </div>
            </div>
        </div>
    </div>
    <script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    </script>
</body>

</html>