Designing a ChatGPT Clone with Bootstrap

In today’s digital world, artificial intelligence-based chatbots like ChatGPT have become increasingly popular. If you’re interested in creating a simple web-based ChatGPT clone design, Bootstrap provides a great framework to help speed up the development process. In this article, we’ll walk through the design of a ChatGPT clone, leveraging HTML, CSS, and Bootstrap to create a sleek and functional interface.

Follow this video for complete guidance :

Full Source Code : ChatGPT Clone using Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body style="background-color: #343541;">
    <div class="d-flex min-vh-100">
        <!-- Sidebar -->
        <nav class="d-flex flex-column flex-shrink-0 bg-black" style="width: 260px;">
            <!-- New Chat Button -->
            <div class="p-2">
                <button class="btn btn-outline-light w-100 d-flex align-items-center gap-3 p-3" style="border-radius: 0.375rem; height: 44px;">
                    <i class="fas fa-plus"></i>
                    <span style="font-size: 14px;">New chat</span>
                </button>
            </div>

            <!-- Chat History -->
            <div class="flex-grow-1 overflow-y-auto px-2" style="height: 0;">
                <div style="font-size: 12px; color: #888; padding: 8px 12px;">Today</div>
                <div class="chat-item mb-1 rounded-1 p-3 d-flex align-items-center gap-3" style="font-size: 14px; color: #ECECF1; background-color: #343541; cursor: pointer;">
                    <i class="fas fa-message"></i>
                    <span class="text-truncate">Responsive Design Discussion</span>
                </div>
                <div class="chat-item mb-1 rounded-1 p-3 d-flex align-items-center gap-3" style="font-size: 14px; color: #ECECF1; cursor: pointer;">
                    <i class="fas fa-message"></i>
                    <span class="text-truncate">JavaScript Help</span>
                </div>
            </div>

            <!-- Bottom Navigation -->
            <div class="p-2 border-top border-secondary">
                <!-- Upgrade to Plus -->
                <button class="btn w-100 mb-2 d-flex align-items-center gap-3 p-3 rounded-1" style="background: #AB68FF; color: white; font-size: 14px; height: 44px;">
                    <i class="fas fa-star"></i>
                    <span>Upgrade to Plus</span>
                </button>
                
                <!-- User Menu -->
                <div class="dropdown">
                    <button class="btn btn-dark w-100 d-flex align-items-center gap-3 p-3 rounded-1" style="font-size: 14px; height: 44px;" data-bs-toggle="dropdown">
                        <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d" alt="User" class="rounded-circle" width="24" height="24">
                        <span class="text-white flex-grow-1 text-start">John Doe</span>
                        <i class="fas fa-ellipsis text-white"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-dark">
                        <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>Custom Instructions</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>Settings</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i>Log out</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="flex-grow-1 d-flex flex-column position-relative">
            <!-- Welcome Screen -->
            <div class="flex-grow-1 overflow-y-auto px-2 py-4">
                <div class="container" style="max-width: 48rem;">
                    <!-- Examples Section -->
                    <h1 class="text-white text-center mb-5 fw-semibold" style="font-size: 2rem;">ChatGPT</h1>
                    
                    <div class="row g-3">
                        <div class="col-md-4">
                            <h2 class="text-white mb-3 text-center fw-normal" style="font-size: 0.875rem;">Examples</h2>
                            <div class="d-flex flex-column gap-3">
                                <button class="btn btn-dark w-100 text-start p-3 rounded-3">"Explain quantum computing in simple terms" →</button>
                                <button class="btn btn-dark w-100 text-start p-3 rounded-3">"Got any creative ideas for a 10 year old's birthday?" →</button>
                                <button class="btn btn-dark w-100 text-start p-3 rounded-3">"How do I make an HTTP request in Javascript?" →</button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h2 class="text-white mb-3 text-center fw-normal" style="font-size: 0.875rem;">Capabilities</h2>
                            <div class="d-flex flex-column gap-3">
                                <div class="p-3 text-white text-center rounded-3" style="background-color: #3E3F4B;">
                                    Remembers what user said earlier in the conversation
                                </div>
                                <div class="p-3 text-white text-center rounded-3" style="background-color: #3E3F4B;">
                                    Allows user to provide follow-up corrections
                                </div>
                                <div class="p-3 text-white text-center rounded-3" style="background-color: #3E3F4B;">
                                    Trained to decline inappropriate requests
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h2 class="text-white mb-3 text-center fw-normal" style="font-size: 0.875rem;">Limitations</h2>
                            <div class="d-flex flex-column gap-3">
                                <div class="p-3 text-white text-center rounded-3" style="background-color: #3E3F4B;">
                                    May occasionally generate incorrect information
                                </div>
                                <div class="p-3 text-white text-center rounded-3" style="background-color: #3E3F4B;">
                                    May occasionally produce harmful instructions or biased content
                                </div>
                                <div class="p-3 text-white text-center rounded-3" style="background-color: #3E3F4B;">
                                    Limited knowledge of world and events after 2022
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Input Box -->
            <div class="p-4 position-relative" style="background: linear-gradient(180deg, rgba(53,55,64,0), #353740 58.85%);">
                <div class="mx-auto position-relative" style="max-width: 48rem;">
                    <div class="input-group">
                        <textarea class="form-control px-4 py-3 bg-dark text-white border-0" 
                                 rows="1"
                                 style="resize: none; border-radius: 1rem; font-size: 1rem;"
                                 placeholder="Send a message"></textarea>
                        <button class="btn position-absolute end-0 top-50 translate-middle-y me-2" style="color: #ACACBE;">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                    <div class="text-center mt-2" style="font-size: 0.75rem; color: #C5C5D2;">
                        Free Research Preview. ChatGPT may produce inaccurate information about people, places, or facts.
                    </div>
                </div>
            </div>
        </main>
    </div>

</body>
</html>

The Layout Structure

The layout for the ChatGPT clone is divided into two main sections: the sidebar and the main content area. The sidebar is designed to be a vertical navigation panel that takes up a fixed width, while the main content area takes up the rest of the screen. This structure ensures that the interface is clean and easy to navigate.

ALSO READ Rotating Earth Animation using CSS

Sidebar: The Navigation Hub

The sidebar is created using Bootstrap’s grid system, ensuring it remains consistent across different screen sizes. It is designed with a dark theme, and it features several key elements:

New Chat Button: A button at the top allows users to start a new chat. It is styled with Bootstrap’s utility classes to make it visually appealing and accessible.
Chat History: A scrollable list of past conversations is displayed below the new chat button. Each chat item is designed with a minimalist icon and a text label, ensuring that the content is easy to scan.
User Menu and Upgrade Option: At the bottom of the sidebar, there are options for the user to upgrade to a premium version or access their account settings via a dropdown menu. These options are clearly visible and easily accessible.

Main Content Area: The Heart of the Chat

The main content area is where the bulk of the interaction takes place. It is designed to offer a smooth and immersive chat experience. The content section is flexible and adapts to different screen sizes, thanks to the responsive features of Bootstrap.

Welcome Screen: When no active chat is taking place, a welcome screen with a header and some helpful examples is shown. These examples guide the user on how to start a conversation with ChatGPT, providing useful suggestions like “Explain quantum computing in simple terms” or “How do I make an HTTP request in Javascript?”.
Capabilities and Limitations: In addition to the examples, the main content area also provides information about the capabilities and limitations of the ChatGPT system. This section highlights the bot’s ability to remember past conversations, provide follow-up corrections, and its limitations, such as generating incorrect information or biased content.

ALSO READ Part 2 : Creating a Dynamic File Manager with PHP

The Input Box: Engaging Users

At the bottom of the main content area is a sleek, user-friendly input box where users can type their messages. The text area is designed to be spacious, with a large input field that allows users to type long questions or statements. A send button with a paper plane icon sits on the right side, ensuring that the interface remains intuitive and easy to use.

Styling with Bootstrap

Bootstrap’s utility classes make styling the ChatGPT clone a breeze. The dark-themed background, combined with white and muted gray text, ensures that the interface remains visually consistent and easy on the eyes. For example:

Buttons and Icons: Bootstrap’s button classes are used extensively throughout the sidebar for actions like starting a new chat, upgrading to the premium version, and accessing the user settings menu. The icons from Font Awesome further enhance the user experience by providing intuitive visual cues.
Responsive Design: The layout is fully responsive, thanks to Bootstrap’s grid system and flexbox utilities. Whether viewed on a small mobile screen or a larger desktop monitor, the design adjusts seamlessly to fit the screen size.
Typography: Text styling is kept minimal and easy to read. The use of a consistent font size and color scheme creates a professional and user-friendly interface.

Building a ChatGPT clone using Bootstrap is an excellent way to practice frontend development while designing a functional, aesthetically pleasing interface. The use of a sidebar navigation system, responsive layout, and intuitive input field creates a seamless user experience, allowing users to interact with the AI chatbot effectively. The simple yet powerful design ensures that users can easily navigate through past conversations, explore capabilities, and even access settings, all while enjoying a clean and modern interface.

ALSO READ Free Text to Speech Converter using JavaScript

While this is just a basic design for a ChatGPT clone, it can easily be extended and enhanced by adding more features like real-time messaging, user authentication, and advanced AI functionalities. With the power of Bootstrap and other web technologies, building a robust chatbot interface has never been easier.