Design a Google Chrome Page Template using Bootstrap

Last Updated : 27 Feb, 2024

The Chrome template replicates Google’s search page with navigation links, a search input section, and buttons. It uses Bootstrap for styling and responsiveness, resembling Google Chrome’s familiar interface.

Prerequisites

Approach

This app recreates the Google Chrome template using Bootstrap. It comprises a navigation section with links to Gmail and Images, a flask icon, and a sign-in button. The main content section features the Google logo, a search input field with an icon, and buttons for Google search and “I’m Feeling Lucky.” A “Customize Chrome” button is positioned at the bottom right corner. Bootstrap’s classes are utilized for responsive design and layout alignment. While the core structure and functionality mirror the original design, minor adjustments may be needed for precise styling and positioning to fully replicate the original HTML and CSS version.

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>Google Chrome Template</title>
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
 
<body>
 
    <!-- Navigation Section -->
    <nav class="navbar navbar-light bg-light">
        <div class="container">
            <div class="d-flex align-items-center">
                <a class="navbar-brand me-4">Gmail</a>
                <a class="navbar-brand me-4">Images</a>
            </div>
            <a class="navbar-brand">
                <i class="bi bi-flask"></i>
            </a>
            <button class="btn btn-primary">Sign in</button>
        </div>
    </nav>
 
    <!-- Main Content Section -->
    <main class="container mt-5">
        <div class="text-center">
            <img id="google_image"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240120152553/social-(1).png"
                 alt="Google Logo"
                class="img-fluid mb-4">
 
            <!-- Search Input Section -->
            <div class="input-group mb-3">
                <span class="input-group-text">
                    <i class="bi bi-search"></i>
                </span>
                <input type="text" class="form-control"
                       placeholder="Search Google or type a URL">
            </div>
            <div class="d-grid gap-2 d-md-flex 
            justify-content-md-center">
                <button class="btn btn-primary 
                me-md-2 mb-2 mb-md-0">Google Search</button>
                <button class="btn btn-primary">
                    I'm Feeling Lucky</button>
            </div>
 
            <div class="d-flex justify-content-end mt-4">
                <div class="bg-primary text-light p-2 rounded">
                    <i class="bi bi-pencil"></i>
                    Customize Chrome
                </div>
            </div>
        </div>
    </main>
 
    <!-- Bootstrap JS Bundle (popper.js included) -->
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
      </script>
</body>
 
</html>