Home  ›  bootstrap5  ›  css  ›  html

How to design square rating in bootstrap5? | Create customer review using HTML, CSS

April 09, 2022

How to design square rating in bootstrap5? | Rating in bootstrap5
Bootstrap5 में स्क्वेयर रेटिंग कैसे डिज़ाइन करें? | बूटस्ट्रैप में रेटिंग

It is very easy to create square rating layout  using bootstrap5. In this code we are using html, css and bootstrap5. 
बूटस्ट्रैप 5 का उपयोग करके स्क्वेयर रेटिंग लेआउट बनाना बहुत आसान है। इस कोड में हम html, css और bootstrap5 का उपयोग कर रहे हैं।

Create Square rating Using Bootstrap5, HTML, CSS


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        /* main section */
        h3 {
            color: #ffffff;
            text-align: center;
            margin-bottom: 20px;
        }
         .main-sec {
            background-image: linear-gradient(to right, #f8c05c, #9f53d6) !important;
        }

        /* button styling */
        .White-button {
            background: #FFFFFF8C !important;
            border: 2px solid #ffffff;
        }

        .White-button:hover {

            border: 2px solid #ffffff;
        }

        .rating-widget {
            display: flex;
            flex-direction: row;
        }

        /* second section width */
        .main-sec .container {
            max-width: 620px;
            margin: 0 auto;
        }

        /* Rating Functionality */

        .rating-widget input {
            display: none;
        }

        .rating-widget label {
            margin: 5px;
            display: flex;
            background: #FFFFFF8C;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            color: #ffffff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="survay-main-div">
        <!-- main section -->
        <div class="main-sec">
            <div class="container pt-5 pb-5">

                <div class="row">
                    <h3>Square Rating</h3>
                    <p class="text-white mb-2">Q1. How likely are you to recommend us to a friend?</p>
                    <div class="rating-widget">
                        <label for="rating-1">1</label>
                        <input type="radio" name="rating" id="rating-1">
                        <label for="rating-2">2</label>
                        <input type="radio" name="rating" id="rating-2">
                        <label for="rating-3">3</label>
                        <input type="radio" name="rating" id="rating-3">
                        <label for="rating-4">4</label>
                        <input type="radio" name="rating" id="rating-4">
                        <label for="rating-5">5</label>
                        <input type="radio" name="rating" id="rating-5">
                        <label for="rating-5">6</label>
                        <input type="radio" name="rating" id="rating-6">
                        <label for="rating-5">7</label>
                        <input type="radio" name="rating" id="rating-7">
                        <label for="rating-5">8</label>
                        <input type="radio" name="rating" id="rating-8">
                        <label for="rating-5">9</label>
                        <input type="radio" name="rating" id="rating-9">
                        <label for="rating-5">10</label>
                        <input type="radio" name="rating" id="rating-10">
                    </div>

                </div>
                <div class="row">
                    <div class="col">
                        <p class="text-white">Highly Unlikely</p>
                    </div>
                    <div class="col">
                        <p class="text-white">Natural</p>
                    </div>
                    <div class="col">
                        <p class="text-white"> Highly likely</p>
                    </div>
                </div>
                <button type="button" class="White-button pop-up-btn btn btn-secondary btn-secondary"
                    data-dismiss="modal">Next ➜</button>
            </div>
        </div>
    </div>

</body>

</html>

Output Square rating Using Bootstrap5, HTML, CSS

rating-using-bootstrap5

Next
« Prev Post
Previous
Next Post »

Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)