DocsAllOver Need Help Support Page with Search in Bootstrap 5 Snippets

Need Help Support Page with Search in Bootstrap 5

Oct. 13, 2024

Bootstrap, Bootstrap 5, Responsive, Contact Us, Search Bar

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
    <style>
        body {
            background-color: #511693;
        }

        .card {
            border: none;
            background: #eee
        }

        .search {
            width: 100%;
            margin-bottom: auto;
            margin-top: 20px;
            height: 50px;
            background-color: #fff;
            padding: 10px;
            border-radius: 5px
        }

        .search-input {
            color: white;
            border: 0;
            outline: 0;
            background: none;
            width: 0;
            margin-top: 5px;
            caret-color: transparent;
            line-height: 20px;
            transition: width 0.4s linear
        }

        .search .search-input {
            padding: 0 10px;
            width: 100%;
            caret-color: #536bf6;
            font-size: 19px;
            font-weight: 300;
            color: black;
            transition: width 0.4s linear
        }

        .search-icon {
            height: 34px;
            width: 34px;
            float: right;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            background-color: #536bf6;
            font-size: 10px;
            bottom: 30px;
            position: relative;
            border-radius: 5px
        }

        .search-icon:hover {
            color: #fff !important
        }

        a:link {
            text-decoration: none
        }

        .card-inner {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 1px solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            border: none;
            cursor: pointer;
            transition: all 2s
        }

        .card-inner:hover {
            transform: scale(1.1);
            -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.75);
        }

        .mg-text span {
            font-size: 12px
        }

        .mg-text {
            line-height: 14px
        }
    </style>

</head>

<body>
    <div class="container mt-4">
        <div class="row d-flex justify-content-center">
            <div class="col-md-9">
                <div class="card p-4 mt-3">
                    <h3 class="heading mt-5 text-center">Hi! How can we help You?</h3>
                    <div class="d-flex justify-content-center px-5">
                        <div class="search"> <input type="text" class="search-input" placeholder="Search..." name=""> <a
                                href="#" class="search-icon"> <i class="fa fa-search"></i> </a> </div>
                    </div>
                    <div class="row mt-4 g-1 px-4 mb-5">
                        <div class="col-md-2">
                            <div class="card-inner p-3 d-flex flex-column align-items-center"> <img
                                    src="https://i.imgur.com/Mb8kaPV.png" width="50">
                                <div class="text-center mg-text"> <span class="mg-text">Account</span> </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card-inner p-3 d-flex flex-column align-items-center"> <img
                                    src="https://i.imgur.com/ueLEPGq.png" width="50">
                                <div class="text-center mg-text"> <span class="mg-text">Payments</span> </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card-inner p-3 d-flex flex-column align-items-center"> <img
                                    src="https://i.imgur.com/tmqv0Eq.png" width="50">
                                <div class="text-center mg-text"> <span class="mg-text">Delivery</span> </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card-inner p-3 d-flex flex-column align-items-center"> <img
                                    src="https://i.imgur.com/D0Sm15i.png" width="50">
                                <div class="text-center mg-text"> <span class="mg-text">Product</span> </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card-inner p-3 d-flex flex-column align-items-center"> <img
                                    src="https://i.imgur.com/Z7BJ8Po.png" width="50">
                                <div class="text-center mg-text"> <span class="mg-text">Return</span> </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card-inner p-3 d-flex flex-column align-items-center"> <img
                                    src="https://i.imgur.com/YLsQrn3.png" width="50">
                                <div class="text-center mg-text"> <span class="mg-text">Guarantee</span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
    <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js'>
    </script>
</body>

</html>

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap);

body {
    font-family: "Roboto", sans-serif;
    background: #EFF1F3;
    min-height: 100vh;
    position: relative;
}

.section-50 {
    padding: 50px 0;
}

.m-b-50 {
    margin-bottom: 50px;
}

.dark-link {
    color: #333;
}

.heading-line {
    position: relative;
    padding-bottom: 5px;
}

.heading-line:after {
    content: "";
    height: 4px;
    width: 75px;
    background-color: #29B6F6;
    position: absolute;
    bottom: 0;
    left: 0;
}

.notification-ui_dd-content {
    margin-bottom: 30px;
}

.notification-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 7px;
    background: #fff;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.notification-list--unread {
    border-left: 2px solid #29B6F6;
}

.notification-list .notification-list_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.notification-list .notification-list_content .notification-list_img img {
    height: 48px;
    width: 48px;
    border-radius: 50px;
    margin-right: 20px;
}

.notification-list .notification-list_content .notification-list_detail p {
    margin-bottom: 5px;
    line-height: 1.2;
}

.notification-list .notification-list_feature-img img {
    height: 48px;
    width: 48px;
    border-radius: 5px;
    margin-left: 20px;
}

//Doesn't require any JS.

This Bootstrap 5 snippet provides a visually appealing and user-friendly support page designed to assist users with their inquiries and needs. The page features a prominent search bar, frequently asked questions (FAQs), contact information, and a clear call-to-action button.

Key Features:

Search Functionality: The search bar allows users to quickly find relevant information by searching for keywords or topics.
Frequently Asked Questions: Provide a list of common questions and answers to address frequently asked inquiries.
Contact Information: Display your contact details, such as email address, phone number, and social media links, making it easy for users to reach out for further assistance.
Call-to-Action: Include a clear and compelling call-to-action button, encouraging users to submit their questions or requests.
Responsive Design: The support page adapts to various screen sizes, ensuring a consistent user experience across devices.

Implementation:

Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the support page, including the container, search bar, FAQ section, contact information, and call-to-action button.
Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the support page and its elements, such as container, form-group, input, btn, list-group, and any other relevant classes.
Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and content of the support page according to your specific requirements.

Latest Snippets

View All