Bootstrap Plus

Elevate your designs with Bootstrap Plus. Browse copy-pasteable components, live utilities setup, custom grids, timelines, responsive navigation modules, and dynamic UI elements built directly for swift integration.

CDN Setup

SETUP

Place this core template setup in your html header. Includes Bootstrap 5.3 CSS, JS bundle, and Icons.

HTML Skeleton Preview
Ready to copy and deploy

Include CSS in <head> and JS before </body>.

Code Copy Section
HTML 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
    <div class="container-md">
        <!-- Make a website with Bootstrap 5.3.3 and Bootstrap Icons 1.11.3 -->
        <!-- You must need all component in this section -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

Colors & Background

UTILITIES

Bootstrap utility classes for custom foreground colors and background colors.

Color Palette Previews
Primary
Secondary
Success
Danger
Warning
Info
Dark
Subtle
.text-primary .text-success .text-danger .text-warning
Code Copy Section
HTML 
<!-- Text Colors -->
<p class="text-primary">Primary text color</p>
<p class="text-success">Success text color</p>
<p class="text-danger">Danger text color</p>
<p class="text-warning">Warning text color</p>

<!-- Background Colors -->
<div class="bg-primary text-white p-3 rounded">Primary Background</div>
<div class="bg-success text-white p-3 rounded">Success Background</div>
<div class="bg-danger text-white p-3 rounded">Danger Background</div>
<div class="bg-light text-dark p-3 border rounded">Light Background</div>
<div class="bg-dark text-white p-3 rounded">Dark Background</div>
<div class="bg-primary-subtle text-primary p-3 rounded">Subtle Accent Background</div>

Margin & Padding

UTILITIES

Spacing utilities match parameters: {property}{sides}-{size} where property is m or p and size ranges from 0 to 5.

Spacing Preview Visual
Margin Area (Outer Spacing)
Padding Area (Inner Spacing)
Example combines outer margin spacing and internal text padding grid.
Code Copy Section
HTML 
<!-- Margin (Outer Spacing) examples -->
<div class="m-3">Margin on all sides (1rem)</div>
<div class="mt-4">Margin top only (1.5rem)</div>
<div class="mb-5">Margin bottom only (3rem)</div>
<div class="mx-auto" style="width: 200px;">Centred element via horizontal margin auto</div>
<div class="ms-2">Margin start / left spacing (0.5rem)</div>

<!-- Padding (Inner Spacing) examples -->
<div class="p-3 bg-light text-dark">Padding on all sides (1rem)</div>
<div class="py-2 px-4 bg-light text-dark">Padding top/bottom (0.5rem) and left/right (1.5rem)</div>
<div class="pe-5 bg-light text-dark">Padding end / right spacing (3rem)</div>

Floating Labels

STANDARD

Create beautifully simple form labels that float over your input fields.

Preview
Code Copy Section
HTML 
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Forms

STANDARD

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Preview
We'll never share your email with anyone else.
Code Copy Section
HTML 
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Images & Figures

STANDARD

Documentation and examples for opting images into responsive behavior, image thumbnails, and captioned figures.

Preview
A generic square placeholder image200x200
Placeholder400x200
A caption for the above image.
Code Copy Section
HTML 
<!-- Image Thumbnail -->
<img src="..." class="img-thumbnail" alt="...">

<!-- Figure with Caption -->
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Input Group

STANDARD

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Preview
@
With textarea
Code Copy Section
HTML 
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Tables

STANDARD

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Preview
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Code Copy Section
HTML 
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

Typography

STANDARD

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Preview

Display heading

This is a lead paragraph. It stands out from regular paragraphs.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
Code Copy Section
HTML 
<h1 class="display-6">Display heading</h1>
<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Accordion

STANDARD

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Preview

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.

This is the second item's accordion body. It is hidden by default.
Code Copy Section
HTML 
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default.
      </div>
    </div>
  </div>
</div>

Alerts

STANDARD

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Preview
Code Copy Section
HTML 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

<div class="alert alert-success d-flex align-items-center" role="alert">
  <i class="bi bi-check-circle-fill flex-shrink-0 me-2 fs-4"></i>
  <div>
    An example success alert with an icon
  </div>
</div>

Badges

STANDARD

Documentation and examples for badges, our small count and labeling component.

Preview
Primary Secondary Success Danger Warning Pill Info Pill
Code Copy Section
HTML 
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>

<!-- Pill badges -->
<span class="badge rounded-pill text-bg-warning">Warning Pill</span>
<span class="badge rounded-pill text-bg-info">Info Pill</span>

Button Group

STANDARD

Group a series of buttons together on a single line or stack them in a vertical column.

Preview
Code Copy Section
HTML 
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

List of Buttons

ELEMENTS

Diverse buttons collections: sizes, outlines, block containers, and custom gradients.

Buttons List Preview
Code Copy Section
HTML 
<!-- Standard Theme Buttons -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline-success">Success Outline</button>
<button class="btn btn-danger btn-sm">Small Button</button>
<button class="btn btn-warning btn-lg">Large Button</button>

<!-- Full Width Block Button -->
<div class="d-grid gap-2">
  <button class="btn btn-dark" type="button">Full Width Block Button</button>
</div>

<!-- Round Pill Shape & Icon buttons -->
<button class="btn btn-primary rounded-pill px-4">Pill Button</button>
<button class="btn btn-secondary d-inline-flex align-items-center gap-2">
  <i class="bi bi-share"></i> Icon Button
</button>

Card Variations

CARDS

Layout structures showing full image width panels, side image elements, and category cards.

Cards Preview
Card Image Banner
Full Image Top Card

Standard top image panel layout suitable for grids and landing portals.

Explore Page
Side Image Card

Compact horizontal layout.

View
Code Copy Section
HTML 
<!-- Full Image Card -->
<div class="card shadow-sm" style="max-width: 320px;">
  <img src="banner.jpg" class="card-img-top" alt="Card Header Banner">
  <div class="card-body">
    <h6 class="card-title fw-bold">Full Image Top Card</h6>
    <p class="card-text small text-muted">Standard top image panel layout suitable for grids.</p>
    <a href="#" class="btn btn-primary btn-sm">Explore Page</a>
  </div>
</div>

<!-- Horizontal Side Image Card -->
<div class="card shadow-sm" style="max-width: 480px; overflow: hidden;">
  <div class="row g-0">
    <div class="col-4">
      <img src="thumbnail.jpg" class="img-fluid rounded-start h-100 w-100 object-fit-cover" alt="Thumb">
    </div>
    <div class="col-8">
      <div class="card-body py-3">
        <h6 class="card-title fw-bold mb-1">Side Image Card</h6>
        <p class="card-text small text-muted mb-2">Compact horizontal layout.</p>
        <a href="#" class="btn btn-outline-info btn-sm">View Details</a>
      </div>
    </div>
  </div>
</div>

Close Button

STANDARD

A generic close icon for dismissing content like modals and alerts.

Preview
Code Copy Section
HTML 
<!-- Standard Close -->
<button type="button" class="btn-close" aria-label="Close"></button>

<!-- Disabled Close -->
<button type="button" class="btn-close" disabled aria-label="Close"></button>

<!-- White Close (for dark backgrounds) -->
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>

Collapse

STANDARD

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Preview

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Code Copy Section
HTML 
<p class="d-inline-flex gap-1">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Many Type of Lists

ELEMENTS

A collection of rich list patterns, check list blocks, and badge-aligned structures.

List Previews
  • Premium UI Kit Active
  • Documentation Draft Pending
  • Fully responsive layout framework.
  • Comprehensive utility documentation.
Code Copy Section
HTML 
<!-- List Group with Badges -->
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Premium UI Kit
    <span class="badge bg-primary rounded-pill">Active</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Documentation Draft
    <span class="badge bg-secondary rounded-pill">Pending</span>
  </li>
</ul>

<!-- Checkmark Icon List -->
<ul class="list-group list-group-flush">
  <li class="list-group-item border-0 px-0 d-flex gap-2">
    <i class="bi bi-patch-check-fill text-success"></i> Fully responsive layout framework.
  </li>
  <li class="list-group-item border-0 px-0 d-flex gap-2">
    <i class="bi bi-patch-check-fill text-success"></i> Comprehensive utility documentation.
  </li>
</ul>

Pagination

STANDARD

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Preview
Code Copy Section
HTML 
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Placeholders

STANDARD

Use loading placeholders for your components or pages to indicate something may still be loading.

Preview
Code Copy Section
HTML 
<div class="card" aria-hidden="true" style="width: 18rem;">
  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect></svg>
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

Popovers

STANDARD

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Preview
Code Copy Section
HTML 
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</button>

Progress

STANDARD

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Preview
25%
Code Copy Section
HTML 
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%"></div>
</div>

Scrollspy

STANDARD

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Preview

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 1-1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.

Item 1-2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted.

Item 2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example.

Code Copy Section
HTML 
<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
      </nav>
    </nav>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <h4 id="item-1">Item 1</h4>
      <p>...</p>
      <h5 id="item-1-1">Item 1-1</h5>
      <p>...</p>
      <h5 id="item-1-2">Item 1-2</h5>
      <p>...</p>
      <h4 id="item-2">Item 2</h4>
      <p>...</p>
    </div>
  </div>
</div>

Spinners

STANDARD

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Preview
Code Copy Section
HTML 
<!-- Border spinner -->
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Growing spinner -->
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Button with spinner -->
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

Toasts

STANDARD

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Preview
Code Copy Section
HTML 
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Tooltips

STANDARD

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using data attributes for routing and configuration.

Preview
Code Copy Section
HTML 
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>

Multi-Column Grids

CARDS

Standard responsive grid configurations matching 2, 3, and 4 columns layouts for card content structures.

Grid Formats Preview
3-Column Grid Layout
Card A
Card B
Card C
4-Column Grid Layout
Card 1
Card 2
Card 3
Card 4
Code Copy Section
HTML 
<!-- 3-Column Grid Configuration -->
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100 shadow-sm">
      <div class="card-body">Card Item A Content</div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100 shadow-sm">
      <div class="card-body">Card Item B Content</div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100 shadow-sm">
      <div class="card-body">Card Item C Content</div>
    </div>
  </div>
</div>

<!-- 4-Column Grid Configuration -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3 mt-4">
  <div class="col"><div class="card p-3 shadow-sm h-100">Card 1</div></div>
  <div class="col"><div class="card p-3 shadow-sm h-100">Card 2</div></div>
  <div class="col"><div class="card p-3 shadow-sm h-100">Card 3</div></div>
  <div class="col"><div class="card p-3 shadow-sm h-100">Card 4</div></div>
</div>
PREMIUM UNLOCKED

Extended Templates Library

Over 200+ fully responsive, copy-pasteable custom sections spanning E-Commerce, Portfolios, Restaurants, and more.

Custom Header Top Section I

PREMIUM

A standard top utility bar for headers, featuring contact info on the left and social/auth links on the right.

Preview
info@thinkori.com +1 234 567 8900
Login / Register
Code Copy Section
HTML 
<!-- Custom Header Top Bar -->
<div class="bg-dark text-light py-2 fs-7">
    <div class="container d-flex justify-content-between align-items-center">
        <!-- Contact Info -->
        <div class="d-flex gap-3 align-items-center">
            <span><i class="bi bi-envelope me-1 text-primary"></i> info@yourdomain.com</span>
            <span class="d-none d-md-inline"><i class="bi bi-telephone me-1 text-primary"></i> +1 234 567 8900</span>
        </div>
        <!-- Social & Auth -->
        <div class="d-flex gap-3 align-items-center">
            <div class="d-none d-sm-flex gap-2">
                <a href="#" class="text-light text-decoration-none"><i class="bi bi-facebook"></i></a>
                <a href="#" class="text-light text-decoration-none"><i class="bi bi-twitter-x"></i></a>
                <a href="#" class="text-light text-decoration-none"><i class="bi bi-youtube"></i></a>
            </div>
            <div class="vr mx-1 d-none d-sm-block"></div>
            <a href="#" class="text-light text-decoration-none fw-bold">Login / Register</a>
        </div>
    </div>
</div>

<!-- Required CSS for font sizing -->
<style>
.fs-7 { font-size: 0.85rem; }
</style>

Custom Navigation Section

PREMIUM

A clean, shadow-lifted navigation bar with logo branding, centered links, and a right-aligned CTA button.

Preview
Code Copy Section
HTML 
<!-- Custom Navigation Bar -->
<nav class="navbar navbar-expand-lg bg-body shadow-sm py-3">
    <div class="container">
        <!-- Brand Logo -->
        <a class="navbar-brand fw-bold text-primary fs-4" href="#">
            <i class="bi bi-hexagon-fill me-1"></i> BrandLogo
        </a>
        
        <!-- Mobile Toggle -->
        <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Nav Links -->
        <div class="collapse navbar-collapse" id="mainNavbar">
            <ul class="navbar-nav mx-auto mb-2 mb-lg-0 fw-medium gap-lg-3">
                <li class="nav-item"><a class="nav-link active text-primary" aria-current="page" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
            
            <!-- CTA Button -->
            <div class="d-flex mt-3 mt-lg-0">
                <a href="#" class="btn btn-primary px-4 rounded-pill fw-medium shadow-sm w-100">Client Portal</a>
            </div>
        </div>
    </div>
</nav>

Big Footer Section

PREMIUM

A comprehensive, multi-column dark footer with brand info, quick links, contact details, and a newsletter subscription form.

Preview
BrandLogo

We provide high-quality digital solutions to help businesses grow and scale effectively. Innovate with us.

Quick Links
Contact Info
  • 123 Innovation Ave, Tech City, NY 10001
  • support@brandlogo.com
  • +1 (555) 123-4567
Newsletter

Subscribe to receive updates, access to exclusive deals, and more.

Code Copy Section
HTML 
<!-- Big Custom Footer -->
<footer class="bg-dark text-light pt-5 pb-4 mt-5">
    <div class="container">
        <div class="row gy-5">
            
            <!-- Column 1: Brand & About -->
            <div class="col-lg-4 col-md-6">
                <h5 class="fw-bold text-white mb-3"><i class="bi bi-hexagon-fill text-primary me-2"></i>BrandLogo</h5>
                <p class="text-secondary small mb-4">We provide high-quality digital solutions to help businesses grow and scale effectively. Innovate with us and reach new heights.</p>
                <div class="d-flex gap-2">
                    <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle"><i class="bi bi-twitter-x"></i></a>
                    <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle"><i class="bi bi-linkedin"></i></a>
                    <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle"><i class="bi bi-instagram"></i></a>
                </div>
            </div>
            
            <!-- Column 2: Quick Links -->
            <div class="col-lg-2 col-md-6">
                <h6 class="text-white mb-3 text-uppercase fw-bold tracking-wide">Quick Links</h6>
                <ul class="list-unstyled small text-secondary d-flex flex-column gap-2">
                    <li><a href="#" class="text-secondary text-decoration-none hover-white transition-all">About Us</a></li>
                    <li><a href="#" class="text-secondary text-decoration-none hover-white transition-all">Our Services</a></li>
                    <li><a href="#" class="text-secondary text-decoration-none hover-white transition-all">Portfolio Projects</a></li>
                    <li><a href="#" class="text-secondary text-decoration-none hover-white transition-all">Contact Support</a></li>
                    <li><a href="#" class="text-secondary text-decoration-none hover-white transition-all">Privacy Policy</a></li>
                </ul>
            </div>
            
            <!-- Column 3: Contact Info -->
            <div class="col-lg-3 col-md-6">
                <h6 class="text-white mb-3 text-uppercase fw-bold tracking-wide">Contact Info</h6>
                <ul class="list-unstyled small text-secondary d-flex flex-column gap-3">
                    <li class="d-flex gap-3 align-items-start">
                        <i class="bi bi-geo-alt fs-5 text-primary"></i> 
                        <span>123 Innovation Ave, Tech City,<br>New York 10001</span>
                    </li>
                    <li class="d-flex gap-3 align-items-center">
                        <i class="bi bi-envelope fs-5 text-primary"></i> 
                        <span>support@brandlogo.com</span>
                    </li>
                    <li class="d-flex gap-3 align-items-center">
                        <i class="bi bi-telephone fs-5 text-primary"></i> 
                        <span>+1 (555) 123-4567</span>
                    </li>
                </ul>
            </div>
            
            <!-- Column 4: Newsletter -->
            <div class="col-lg-3 col-md-6">
                <h6 class="text-white mb-3 text-uppercase fw-bold tracking-wide">Newsletter</h6>
                <p class="text-secondary small mb-3">Subscribe to receive updates, access to exclusive deals, and more.</p>
                <form class="d-flex gap-2">
                    <input type="email" class="form-control bg-dark text-light border-secondary" placeholder="Email address" required>
                    <button class="btn btn-primary" type="submit">Subscribe</button>
                </form>
                <div class="form-text text-secondary mt-2" style="font-size: 0.7rem;">We respect your privacy. No spam.</div>
            </div>
            
        </div>
        
        <!-- Simple Footer Copyright -->
        <hr class="border-secondary mt-5 mb-4">
        <div class="row align-items-center">
            <div class="col-md-6 text-center text-md-start small text-secondary mb-3 mb-md-0">
                &copy; 2026 BrandLogo. All rights reserved.
            </div>
            <div class="col-md-6 text-center text-md-end small">
                <a href="#" class="text-secondary text-decoration-none me-3 hover-white">Terms of Service</a>
                <a href="#" class="text-secondary text-decoration-none hover-white">Privacy Policy</a>
            </div>
        </div>
    </div>
</footer>

<!-- Optional CSS for hovers -->
<style>
.hover-white:hover { color: #fff !important; }
.tracking-wide { letter-spacing: 1px; }
</style>

Custom Login Form

PREMIUM

A beautiful, centered login form with floating labels, remember me toggle, forgot password link, and a simulated confirmation popup (toast) upon submission.

Preview

Welcome Back

Please login to your account

Forgot password?
Don't have an account? Register
Code Copy Section
HTML 
<!-- Centered Login Form with Validation & Toast Popup -->
<div class="container d-flex justify-content-center align-items-center min-vh-100 py-5">
    <div class="card shadow-lg border-0 w-100 rounded-4" style="max-width: 450px;">
        <div class="card-body p-4 p-md-5">
            <div class="text-center mb-4">
                <div class="bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                    <i class="bi bi-shield-lock-fill fs-2"></i>
                </div>
                <h3 class="fw-bold">Secure Login</h3>
                <p class="text-muted small">Enter your credentials to continue</p>
            </div>
            
            <form id="customLoginForm">
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="usernameInput" placeholder="Username" required>
                    <label for="usernameInput"><i class="bi bi-person me-2 text-muted"></i>Username</label>
                </div>
                <div class="form-floating mb-3 position-relative">
                    <input type="password" class="form-control" id="passwordInput" placeholder="Password" required>
                    <label for="passwordInput"><i class="bi bi-lock me-2 text-muted"></i>Password</label>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mb-4 small">
                    <div class="form-check">
                        <input class="form-check-input shadow-none cursor-pointer" type="checkbox" value="" id="rememberMe">
                        <label class="form-check-label text-muted cursor-pointer" for="rememberMe">Remember me</label>
                    </div>
                    <a href="#" class="text-primary text-decoration-none fw-medium">Forgot password?</a>
                </div>
                
                <button class="btn btn-primary w-100 py-3 fw-bold rounded-3 shadow-sm" type="submit">
                    Sign In <i class="bi bi-arrow-right ms-1"></i>
                </button>
            </form>
            
            <div class="text-center mt-4 pt-3 border-top small text-muted">
                Don't have an account? <a href="#" class="text-primary fw-bold text-decoration-none">Register Now</a>
            </div>
        </div>
    </div>
</div>

<!-- Global Toast Container for Popup Notification -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="loginSuccessToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body fw-medium">
                <i class="bi bi-check-circle-fill me-2"></i> Authentication successful!
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

<!-- Required JS for handling the form submission popup -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('customLoginForm');
    if(loginForm) {
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault(); // Prevent page reload
            // In a real app, you would validate and send AJAX request here
            
            // Show Bootstrap Toast popup on success
            const toastEl = document.getElementById('loginSuccessToast');
            const toast = new bootstrap.Toast(toastEl);
            toast.show();
        });
    }
});
</script>

Custom Banner (Hero Slider)

PREMIUM

A full-width hero carousel with background images, a dark overlay, bold typography, and Call-to-Action buttons. Uses native Bootstrap Carousel.

Preview
Code Copy Section
HTML 
<!-- Custom Full-Width Hero Slider -->
<div id="heroCarousel" class="carousel slide carousel-fade vh-100" data-bs-ride="carousel">
    <!-- Indicators -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
    </div>

    <!-- Slides -->
    <div class="carousel-inner h-100">
        <!-- Slide 1: Left Aligned -->
        <div class="carousel-item active h-100 bg-dark" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://source.unsplash.com/1600x900/?business') center/cover;">
            <div class="container h-100 d-flex align-items-center">
                <div class="col-lg-8 text-white">
                    <span class="badge bg-primary mb-3 px-3 py-2 text-uppercase tracking-wide">Innovate Your Future</span>
                    <h1 class="display-3 fw-bold mb-4">Building Digital <br>Excellence Together</h1>
                    <p class="lead mb-5 text-light opacity-75">We craft stunning web experiences that drive results and elevate your brand to the next level.</p>
                    <div class="d-flex gap-3">
                        <a href="#" class="btn btn-primary btn-lg px-4 rounded-pill fw-medium">Get Started</a>
                        <a href="#" class="btn btn-outline-light btn-lg px-4 rounded-pill fw-medium">Our Work</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Slide 2: Center Aligned -->
        <div class="carousel-item h-100 bg-dark" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://source.unsplash.com/1600x900/?office') center/cover;">
            <div class="container h-100 d-flex align-items-center justify-content-center text-center">
                <div class="col-lg-8 text-white">
                    <h1 class="display-3 fw-bold mb-4">Scaling Corporate Solutions</h1>
                    <p class="lead mb-5 text-light opacity-75">Enterprise-grade architecture with seamless design integration.</p>
                    <a href="#" class="btn btn-primary btn-lg px-5 rounded-pill fw-medium">Learn More</a>
                </div>
            </div>
        </div>
        
        <!-- Slide 3: Right Aligned -->
        <div class="carousel-item h-100 bg-dark" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://source.unsplash.com/1600x900/?technology') center/cover;">
            <div class="container h-100 d-flex align-items-center justify-content-end text-end">
                <div class="col-lg-8 text-white">
                    <h1 class="display-3 fw-bold mb-4">Strategic Thinking</h1>
                    <p class="lead mb-5 text-light opacity-75">Data-driven approaches to solve complex business challenges.</p>
                    <a href="#" class="btn btn-light btn-lg px-4 rounded-pill fw-medium text-dark">Contact Us</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<!-- Optional CSS -->
<style>
.tracking-wide { letter-spacing: 2px; }
.carousel-item { transition: transform 1.2s ease-in-out, opacity 1s ease-in-out; }
</style>

Custom Services Section

PREMIUM

A beautiful 3-column grid displaying services with big icons, titles, descriptions, and a hover-lift effect.

Preview
Our Expertise

Premium Services

Web Development

Custom coded, fully responsive, and highly optimized web applications built with modern frameworks.

Mobile Apps

Native and cross-platform mobile experiences designed to engage your users on iOS and Android.

UI/UX Design

Beautiful, intuitive, and user-centric interfaces created to enhance customer journey and satisfaction.

Code Copy Section
HTML 
<!-- Services Section -->
<section class="py-5 bg-light">
    <div class="container py-4">
        <!-- Section Title -->
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase" style="letter-spacing: 2px;">Our Expertise</h6>
            <h2 class="display-6 fw-bold">Premium Services</h2>
            <div class="mx-auto mt-3 bg-primary" style="width: 60px; height: 3px;"></div>
        </div>
        
        <!-- Services Grid -->
        <div class="row g-4">
            <!-- Service 1 -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm service-card text-center p-4 p-xl-5">
                    <div class="bg-primary-subtle text-primary rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <i class="bi bi-laptop fs-1"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Web Development</h4>
                    <p class="text-muted mb-4">Custom coded, fully responsive, and highly optimized web applications built with modern frameworks.</p>
                    <a href="#" class="text-primary fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
                </div>
            </div>
            
            <!-- Service 2 -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm service-card text-center p-4 p-xl-5">
                    <div class="bg-success-subtle text-success rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <i class="bi bi-phone fs-1"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Mobile Apps</h4>
                    <p class="text-muted mb-4">Native and cross-platform mobile experiences designed to engage your users on iOS and Android.</p>
                    <a href="#" class="text-success fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
                </div>
            </div>
            
            <!-- Service 3 -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm service-card text-center p-4 p-xl-5">
                    <div class="bg-warning-subtle text-warning rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <i class="bi bi-palette fs-1"></i>
                    </div>
                    <h4 class="fw-bold mb-3">UI/UX Design</h4>
                    <p class="text-muted mb-4">Beautiful, intuitive, and user-centric interfaces created to enhance customer journey and satisfaction.</p>
                    <a href="#" class="text-warning fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Required CSS -->
<style>
.service-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; }
</style>

Custom Featured Projects

PREMIUM

A portfolio-style grid showing project images with an elegant overlay containing details and a button on hover.

Preview
Project 1

FinTech Dashboard

Web Application & UI Design

View Project
Project 2

Architecture Studio

Corporate Website & SEO

View Project
Code Copy Section
HTML 
<!-- Featured Projects Portfolio -->
<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <!-- Project 1 -->
            <div class="col-lg-6">
                <div class="portfolio-item position-relative overflow-hidden rounded-4 shadow-sm">
                    <img src="project1.jpg" alt="Project 1" class="img-fluid w-100 portfolio-img" style="height: 350px; object-fit: cover;">
                    <div class="portfolio-overlay position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-75 d-flex flex-column justify-content-center align-items-center text-center p-4">
                        <h4 class="text-white fw-bold mb-2 content-up">FinTech Dashboard</h4>
                        <p class="text-light small mb-4 content-up delay-1">Web Application & UI Design</p>
                        <a href="#" class="btn btn-primary rounded-pill px-4 content-up delay-2">View Project</a>
                    </div>
                </div>
            </div>
            
            <!-- Project 2 -->
            <div class="col-lg-6">
                <div class="portfolio-item position-relative overflow-hidden rounded-4 shadow-sm">
                    <img src="project2.jpg" alt="Project 2" class="img-fluid w-100 portfolio-img" style="height: 350px; object-fit: cover;">
                    <div class="portfolio-overlay position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-75 d-flex flex-column justify-content-center align-items-center text-center p-4">
                        <h4 class="text-white fw-bold mb-2 content-up">Architecture Studio</h4>
                        <p class="text-light small mb-4 content-up delay-1">Corporate Website & SEO</p>
                        <a href="#" class="btn btn-primary rounded-pill px-4 content-up delay-2">View Project</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Required Custom CSS for Hover Animations -->
<style>
.portfolio-item .portfolio-img { transition: transform 0.5s ease; }
.portfolio-item .portfolio-overlay { opacity: 0; transition: opacity 0.4s ease; }
.portfolio-item .content-up { transform: translateY(20px); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; }
.portfolio-item .delay-1 { transition-delay: 0.1s; }
.portfolio-item .delay-2 { transition-delay: 0.2s; }

.portfolio-item:hover .portfolio-img { transform: scale(1.05); }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item:hover .content-up { transform: translateY(0); opacity: 1; }
</style>

Custom Client Testimonials

PREMIUM

An elegant centered testimonial slider using native Bootstrap Carousel, featuring circular avatars, star ratings, and quote styling.

Preview
Code Copy Section
HTML 
<!-- Centered Testimonial Slider -->
<section class="py-5 bg-light">
    <div class="container text-center py-5">
        <i class="bi bi-quote text-primary opacity-25" style="font-size: 5rem; line-height: 0;"></i>
        
        <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner px-4 pb-4">
                
                <!-- Testimonial 1 -->
                <div class="carousel-item active">
                    <p class="lead fw-medium text-dark mb-4 px-md-5" style="font-size: 1.25rem;">
                        "This team completely transformed our web presence. The new platform is incredibly fast, intuitive, and the conversion rates have doubled within a month!"
                    </p>
                    <div class="d-flex justify-content-center align-items-center gap-3">
                        <img src="avatar1.jpg" alt="Client" class="rounded-circle object-fit-cover shadow-sm" style="width: 60px; height: 60px;">
                        <div class="text-start">
                            <h6 class="mb-0 fw-bold">John Doe</h6>
                            <small class="text-muted">CEO, TechCorp</small>
                            <div class="text-warning small mt-1">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="carousel-item">
                    <p class="lead fw-medium text-dark mb-4 px-md-5" style="font-size: 1.25rem;">
                        "Outstanding service from start to finish. They understood exactly what we needed and delivered a product that exceeded all our expectations."
                    </p>
                    <div class="d-flex justify-content-center align-items-center gap-3">
                        <img src="avatar2.jpg" alt="Client" class="rounded-circle object-fit-cover shadow-sm" style="width: 60px; height: 60px;">
                        <div class="text-start">
                            <h6 class="mb-0 fw-bold">Sarah Miller</h6>
                            <small class="text-muted">Marketing Director</small>
                            <div class="text-warning small mt-1">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
            <!-- Indicators below -->
            <div class="carousel-indicators position-relative mt-4">
                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active bg-primary rounded-circle" style="width: 10px; height: 10px;"></button>
                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1" class="bg-primary rounded-circle" style="width: 10px; height: 10px;"></button>
            </div>
        </div>
    </div>
</section>

Custom Technology Stack

PREMIUM

A minimal grid layout for showcasing technology logos, partners, or client brands.

Preview
Technologies We Use
Code Copy Section
HTML 
<!-- Tech Stack Logo Grid -->
<section class="py-5 border-top border-bottom">
    <div class="container text-center">
        <h6 class="text-muted text-uppercase mb-5 fw-bold" style="letter-spacing: 2px;">Trusted By & Built With</h6>
        
        <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4 justify-content-center align-items-center opacity-75 grayscale-hover">
            <!-- Replace icons with your actual brand logos (img tags) -->
            <div class="col">
                <img src="logo-react.svg" alt="React" class="img-fluid tech-logo">
            </div>
            <div class="col">
                <img src="logo-laravel.svg" alt="Laravel" class="img-fluid tech-logo">
            </div>
            <div class="col">
                <img src="logo-node.svg" alt="Node.js" class="img-fluid tech-logo">
            </div>
            <div class="col">
                <img src="logo-aws.svg" alt="AWS" class="img-fluid tech-logo">
            </div>
            <div class="col">
                <img src="logo-figma.svg" alt="Figma" class="img-fluid tech-logo">
            </div>
        </div>
    </div>
</section>

<!-- Custom CSS for Logos -->
<style>
.tech-logo { max-height: 40px; filter: grayscale(100%); transition: filter 0.3s ease, transform 0.3s ease; }
.tech-logo:hover { filter: grayscale(0%); transform: scale(1.1); }
</style>

Custom Team Member Section

PREMIUM

A card-based grid showcasing team members with an elegant image hover effect and social link overlays.

Preview

Meet Our Team

Team Member
Robert Vance

Chief Executive Officer

Driving the strategic vision and operations to scale global enterprise solutions.

Team Member
Emily Chen

Lead Product Designer

Crafting intuitive and highly engaging user experiences for our flagship apps.

Code Copy Section
HTML 
<!-- Team Members Section -->
<section class="py-5 bg-light">
    <div class="container py-4 text-center">
        <h6 class="text-primary fw-bold text-uppercase" style="letter-spacing: 2px;">The People</h6>
        <h2 class="display-6 fw-bold mb-5">Meet Our Experts</h2>
        
        <div class="row g-4 justify-content-center">
            <!-- Member 1 -->
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden team-card h-100">
                    <div class="position-relative overflow-hidden">
                        <img src="team1.jpg" alt="Team Member" class="card-img-top team-img" style="height: 350px; object-fit: cover;">
                        <div class="team-social-overlay position-absolute bottom-0 w-100 p-3 bg-white bg-opacity-75 backdrop-blur d-flex justify-content-center gap-3">
                            <a href="#" class="btn btn-sm btn-primary rounded-circle"><i class="bi bi-linkedin"></i></a>
                            <a href="#" class="btn btn-sm btn-primary rounded-circle"><i class="bi bi-twitter-x"></i></a>
                        </div>
                    </div>
                    <div class="card-body py-4">
                        <h5 class="fw-bold mb-1">Robert Vance</h5>
                        <p class="text-primary small fw-medium mb-3">Chief Executive Officer</p>
                        <p class="text-muted small mb-0">Driving the strategic vision and operations to scale global enterprise solutions.</p>
                    </div>
                </div>
            </div>
            
            <!-- Member 2 -->
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden team-card h-100">
                    <div class="position-relative overflow-hidden">
                        <img src="team2.jpg" alt="Team Member" class="card-img-top team-img" style="height: 350px; object-fit: cover;">
                        <div class="team-social-overlay position-absolute bottom-0 w-100 p-3 bg-white bg-opacity-75 backdrop-blur d-flex justify-content-center gap-3">
                            <a href="#" class="btn btn-sm btn-primary rounded-circle"><i class="bi bi-linkedin"></i></a>
                            <a href="#" class="btn btn-sm btn-primary rounded-circle"><i class="bi bi-github"></i></a>
                        </div>
                    </div>
                    <div class="card-body py-4">
                        <h5 class="fw-bold mb-1">Emily Chen</h5>
                        <p class="text-primary small fw-medium mb-3">Lead Product Designer</p>
                        <p class="text-muted small mb-0">Crafting intuitive and highly engaging user experiences for our flagship apps.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Custom CSS -->
<style>
.backdrop-blur { backdrop-filter: blur(5px); }
.team-card .team-img { transition: transform 0.4s ease; }
.team-card:hover .team-img { transform: scale(1.05); }
.team-card .team-social-overlay { transform: translateY(100%); transition: transform 0.3s ease; }
.team-card:hover .team-social-overlay { transform: translateY(0); }
</style>

Custom Contact & Map Section

PREMIUM

A comprehensive split-layout contact block containing a message form, direct contact info side-panel, and a full-width embedded Google Map.

Preview

Get in touch

We'd love to hear from you. Our friendly team is always here to chat.

Office Address

123 Innovation Ave, NY 10001

Email Us

hello@brandlogo.com

Call Us

+1 (555) 123-4567

Send us a message

Code Copy Section
HTML 
<!-- Contact Split Form & Info Section -->
<section class="py-5">
    <div class="container py-4">
        <!-- Main Contact Card -->
        <div class="row g-0 rounded-4 shadow-sm overflow-hidden border">
            
            <!-- Left Info Panel -->
            <div class="col-lg-4 bg-primary text-white p-5 d-flex flex-column justify-content-between">
                <div>
                    <h3 class="fw-bold mb-2">Get in touch</h3>
                    <p class="opacity-75 mb-5">We'd love to hear from you. Our friendly team is always here to chat.</p>
                    
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <i class="bi bi-geo-alt fs-3 text-light opacity-50"></i>
                        <div>
                            <h6 class="mb-1 fw-bold">Office Address</h6>
                            <p class="mb-0 opacity-75 small">123 Innovation Ave, NY 10001</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <i class="bi bi-envelope fs-3 text-light opacity-50"></i>
                        <div>
                            <h6 class="mb-1 fw-bold">Email Us</h6>
                            <p class="mb-0 opacity-75 small">hello@brandlogo.com</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center gap-3">
                        <i class="bi bi-telephone fs-3 text-light opacity-50"></i>
                        <div>
                            <h6 class="mb-1 fw-bold">Call Us</h6>
                            <p class="mb-0 opacity-75 small">+1 (555) 123-4567</p>
                        </div>
                    </div>
                </div>
                
                <!-- Socials -->
                <div class="mt-5">
                    <a href="#" class="text-white me-3 fs-5 opacity-75 hover-opacity-100 transition-all"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="text-white me-3 fs-5 opacity-75 hover-opacity-100 transition-all"><i class="bi bi-twitter-x"></i></a>
                    <a href="#" class="text-white fs-5 opacity-75 hover-opacity-100 transition-all"><i class="bi bi-linkedin"></i></a>
                </div>
            </div>
            
            <!-- Right Form Panel -->
            <div class="col-lg-8 bg-white p-5">
                <h3 class="fw-bold mb-4">Send us a message</h3>
                <form id="contactForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-medium text-muted">First Name</label>
                            <input type="text" class="form-control" placeholder="John" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-medium text-muted">Last Name</label>
                            <input type="text" class="form-control" placeholder="Doe" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-medium text-muted">Email Address</label>
                            <input type="email" class="form-control" placeholder="john@example.com" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-medium text-muted">Message</label>
                            <textarea class="form-control" rows="4" placeholder="How can we help you?" required></textarea>
                        </div>
                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-primary px-5 fw-bold">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Full Width Map Embed -->
        <div class="rounded-4 overflow-hidden shadow-sm mt-5 border bg-light" style="height: 400px;">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1700000000000!5m2!1sen!2sbd" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
</section>

<!-- Optional CSS -->
<style>
.hover-opacity-100:hover { opacity: 1 !important; }
</style>

Custom Header Top Section II

PREMIUM

An E-Commerce specific top utility bar featuring promotional offers, order tracking, and language/currency selectors.

Preview
Track Order Support
FLASH SALE: Get 50% Off Selected Items! Shop Now
USD
ENG
Code Copy Section
HTML 
<!-- E-Commerce Promotional Top Bar -->
<div class="bg-primary text-white py-2 fs-7">
    <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
        
        <!-- Left: Utility Links -->
        <div class="d-none d-md-flex gap-3 align-items-center opacity-75">
            <a href="#" class="text-white text-decoration-none hover-opacity-100 transition-all">
                <i class="bi bi-truck me-1"></i> Track Order
            </a>
            <span class="vr mx-1"></span>
            <a href="#" class="text-white text-decoration-none hover-opacity-100 transition-all">
                <i class="bi bi-question-circle me-1"></i> Support
            </a>
        </div>
        
        <!-- Center: Promo Text -->
        <div class="fw-bold tracking-wide text-center" style="font-size: 0.85rem;">
            <span class="text-warning">FLASH SALE:</span> Get 50% Off Selected Items! 
            <a href="#" class="text-white text-decoration-underline ms-2 hover-text-warning">Shop Now</a>
        </div>
        
        <!-- Right: Selectors -->
        <div class="d-flex gap-3 align-items-center mt-2 mt-md-0 opacity-75">
            <div class="dropdown">
                <a class="text-white text-decoration-none dropdown-toggle hover-opacity-100" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    USD ($)
                </a>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 fs-7">
                    <li><a class="dropdown-item" href="#">EUR</a></li>
                    <li><a class="dropdown-item" href="#">GBP</a></li>
                </ul>
            </div>
            <span class="vr mx-1"></span>
            <div class="dropdown">
                <a class="text-white text-decoration-none dropdown-toggle hover-opacity-100" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    English
                </a>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 fs-7">
                    <li><a class="dropdown-item" href="#">BAN</a></li>
                    <li><a class="dropdown-item" href="#">CHN</a></li>
                </ul>
            </div>
        </div>
        
    </div>
</div>

<!-- Custom CSS Helpers -->
<style>
.fs-7 { font-size: 0.85rem; }
.hover-opacity-100:hover { opacity: 1 !important; }
.hover-text-warning:hover { color: var(--bs-warning) !important; }
</style>

Custom Category Highlight Section

PREMIUM

A stylish horizontal scrolling list of product categories featuring circular images with hover zoom effects.

Preview

Shop by Category

T-Shirts
T-Shirts
Jackets
Jackets
Accessories
Accessories
Shoes
Shoes
Code Copy Section
HTML 
<!-- Shop By Category Circular Grid -->
<section class="py-5">
    <div class="container text-center">
        <h3 class="fw-bold mb-5">Shop by Category</h3>
        
        <!-- Horizontal Scroll Wrapper for Mobile -->
        <div class="d-flex overflow-auto pb-3 hide-scrollbar gap-4 justify-content-lg-center" style="scroll-snap-type: x mandatory;">
            
            <!-- Category 1 -->
            <a href="#" class="text-decoration-none text-dark category-item" style="scroll-snap-align: start;">
                <div class="category-img-wrapper rounded-circle overflow-hidden mb-3 mx-auto shadow-sm border border-2 border-white" style="width: 120px; height: 120px;">
                    <img src="category1.jpg" alt="T-Shirts" class="img-fluid w-100 h-100 object-fit-cover category-img">
                </div>
                <span class="fw-bold">T-Shirts</span>
            </a>
            
            <!-- Category 2 -->
            <a href="#" class="text-decoration-none text-dark category-item" style="scroll-snap-align: start;">
                <div class="category-img-wrapper rounded-circle overflow-hidden mb-3 mx-auto shadow-sm border border-2 border-white" style="width: 120px; height: 120px;">
                    <img src="category2.jpg" alt="Jackets" class="img-fluid w-100 h-100 object-fit-cover category-img">
                </div>
                <span class="fw-bold">Jackets</span>
            </a>
            
            <!-- Category 3 -->
            <a href="#" class="text-decoration-none text-dark category-item" style="scroll-snap-align: start;">
                <div class="category-img-wrapper rounded-circle overflow-hidden mb-3 mx-auto shadow-sm border border-2 border-white" style="width: 120px; height: 120px;">
                    <img src="category3.jpg" alt="Accessories" class="img-fluid w-100 h-100 object-fit-cover category-img">
                </div>
                <span class="fw-bold">Accessories</span>
            </a>
            
            <!-- Category 4 -->
            <a href="#" class="text-decoration-none text-dark category-item" style="scroll-snap-align: start;">
                <div class="category-img-wrapper rounded-circle overflow-hidden mb-3 mx-auto shadow-sm border border-2 border-white" style="width: 120px; height: 120px;">
                    <img src="category4.jpg" alt="Shoes" class="img-fluid w-100 h-100 object-fit-cover category-img">
                </div>
                <span class="fw-bold">Shoes</span>
            </a>
            
            <!-- Category 5 -->
            <a href="#" class="text-decoration-none text-dark category-item" style="scroll-snap-align: start;">
                <div class="category-img-wrapper rounded-circle overflow-hidden mb-3 mx-auto shadow-sm border border-2 border-white" style="width: 120px; height: 120px;">
                    <img src="category5.jpg" alt="Watches" class="img-fluid w-100 h-100 object-fit-cover category-img">
                </div>
                <span class="fw-bold">Watches</span>
            </a>
            
        </div>
    </div>
</section>

<!-- Custom CSS for Hover & Scroll -->
<style>
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.category-item .category-img { transition: transform 0.4s ease; }
.category-item:hover .category-img { transform: scale(1.1); }
.category-item:hover span { color: var(--bs-primary); transition: color 0.3s ease; }
</style>

Custom Flash Sale Section

PREMIUM

A vibrant flash sale banner block with a JS-powered countdown timer and featured product cards.

Preview
LIMITED TIME OFFER

Super Flash Sale!

Grab your favorite items at mind-blowing prices before the timer runs out!

02

Days

14

Hours

45

Mins

30

Secs
Shop All Deals
-40%
Product
Nike Air Max Red
.99 .99
Add to Cart
-25%
Product
Smart Watch Series 7
.00 .00
Add to Cart
Code Copy Section
HTML 
<!-- Flash Sale Section with Countdown -->
<section class="py-5 bg-danger-subtle position-relative overflow-hidden">
    <!-- Decorative background icon -->
    <div class="position-absolute top-0 end-0 translate-middle text-danger opacity-25" style="transform: scale(6) !important;">
        <i class="bi bi-lightning-fill"></i>
    </div>
    
    <div class="container py-4 position-relative z-1">
        <div class="row align-items-center g-5">
            
            <!-- Sale Info & Timer -->
            <div class="col-lg-5 text-center text-lg-start">
                <span class="badge bg-danger text-white px-3 py-2 rounded-pill fw-bold mb-3 tracking-wide">LIMITED TIME OFFER</span>
                <h2 class="display-5 fw-bold text-dark mb-4">Super Flash Sale!</h2>
                <p class="lead text-dark opacity-75 mb-4">Grab your favorite items at mind-blowing prices before the timer runs out!</p>
                
                <!-- Countdown Timer Container -->
                <div class="d-flex gap-2 gap-sm-3 justify-content-center justify-content-lg-start mb-5" id="flashSaleCountdown">
                    <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center flex-fill" style="max-width: 90px;">
                        <h3 class="fw-bold mb-0" id="days">00</h3>
                        <small class="text-uppercase fw-bold opacity-75" style="font-size: 0.7rem;">Days</small>
                    </div>
                    <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center flex-fill" style="max-width: 90px;">
                        <h3 class="fw-bold mb-0" id="hours">00</h3>
                        <small class="text-uppercase fw-bold opacity-75" style="font-size: 0.7rem;">Hours</small>
                    </div>
                    <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center flex-fill" style="max-width: 90px;">
                        <h3 class="fw-bold mb-0" id="minutes">00</h3>
                        <small class="text-uppercase fw-bold opacity-75" style="font-size: 0.7rem;">Mins</small>
                    </div>
                    <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center flex-fill" style="max-width: 90px;">
                        <h3 class="fw-bold mb-0" id="seconds">00</h3>
                        <small class="text-uppercase fw-bold opacity-75" style="font-size: 0.7rem;">Secs</small>
                    </div>
                </div>
                
                <a href="#" class="btn btn-danger btn-lg px-5 rounded-pill fw-bold shadow hover-lift">Shop All Deals</a>
            </div>
            
            <!-- Featured Sale Items -->
            <div class="col-lg-7">
                <div class="row g-4">
                    <!-- Item 1 -->
                    <div class="col-sm-6">
                        <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden product-card">
                            <div class="position-absolute top-0 start-0 m-3 z-1">
                                <span class="badge bg-danger rounded-pill px-2">-40%</span>
                            </div>
                            <img src="product1.jpg" alt="Product" class="card-img-top bg-light p-4" style="height: 250px; object-fit: contain;">
                            <div class="card-body text-center p-4">
                                <h6 class="fw-bold mb-2">Premium Sneakers</h6>
                                <div class="d-flex justify-content-center gap-2 mb-3">
                                    <span class="text-danger fw-bold fs-5">.99</span>
                                    <span class="text-muted text-decoration-line-through small align-self-center">.99</span>
                                </div>
                                <a href="#" class="btn btn-outline-dark btn-sm w-100 rounded-pill fw-medium">Add to Cart</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Item 2 -->
                    <div class="col-sm-6">
                        <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden product-card">
                            <div class="position-absolute top-0 start-0 m-3 z-1">
                                <span class="badge bg-danger rounded-pill px-2">-25%</span>
                            </div>
                            <img src="product2.jpg" alt="Product" class="card-img-top bg-light p-4" style="height: 250px; object-fit: contain;">
                            <div class="card-body text-center p-4">
                                <h6 class="fw-bold mb-2">Smart Watch Series 7</h6>
                                <div class="d-flex justify-content-center gap-2 mb-3">
                                    <span class="text-danger fw-bold fs-5">.00</span>
                                    <span class="text-muted text-decoration-line-through small align-self-center">.00</span>
                                </div>
                                <a href="#" class="btn btn-outline-dark btn-sm w-100 rounded-pill fw-medium">Add to Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- Optional JS for Countdown Timer -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set the date we're counting down to (e.g., 3 days from now)
    let countDownDate = new Date().getTime() + (3 * 24 * 60 * 60 * 1000);

    // Update the count down every 1 second
    let x = setInterval(function() {
        let now = new Date().getTime();
        let distance = countDownDate - now;

        // Time calculations
        let days = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display results
        let daysEl = document.getElementById("days");
        let hoursEl = document.getElementById("hours");
        let minutesEl = document.getElementById("minutes");
        let secondsEl = document.getElementById("seconds");
        
        if(daysEl) daysEl.innerHTML = days < 10 ? "0" + days : days;
        if(hoursEl) hoursEl.innerHTML = hours < 10 ? "0" + hours : hours;
        if(minutesEl) minutesEl.innerHTML = minutes < 10 ? "0" + minutes : minutes;
        if(secondsEl) secondsEl.innerHTML = seconds < 10 ? "0" + seconds : seconds;

        // If the count down is finished
        if (distance < 0) {
            clearInterval(x);
            if(document.getElementById("flashSaleCountdown")) {
                document.getElementById("flashSaleCountdown").innerHTML = "<h3 class='text-danger fw-bold'>EXPIRED</h3>";
            }
        }
    }, 1000);
});
</script>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.product-card { transition: transform 0.3s ease; border: 1px solid transparent; }
.product-card:hover { transform: translateY(-5px); border-color: rgba(0,0,0,.05); }
</style>

Custom Product Grid Layout

PREMIUM

A robust E-Commerce layout featuring a sidebar with filters (price, color, size) and a main product grid with sorting dropdowns.

Preview
Filters
Price Range
+
Categories
Size
S M L XL

Showing 1-12 of 36 products

Product
Classic Denim Jacket

.50

NEW Product
Cotton Basic T-Shirt

.00

SALE Product
Running Sneakers Ultra
.99 .99
Code Copy Section
HTML 
<!-- Shop Layout: Sidebar Filters & Product Grid -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            
            <!-- Sidebar Filters -->
            <div class="col-lg-3 d-none d-lg-block">
                <div class="card border-0 shadow-sm rounded-4 p-4 position-sticky" style="top: 2rem;">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold mb-0">Filters</h5>
                        <a href="#" class="text-decoration-none small text-muted hover-primary">Reset</a>
                    </div>
                    
                    <!-- Price Filter -->
                    <h6 class="fw-bold mb-3 small text-uppercase tracking-wide">Price Range</h6>
                    <div class="mb-4">
                        <input type="range" class="form-range" min="0" max="500" step="10">
                        <div class="d-flex justify-content-between text-muted small">
                            <span></span>
                            <span>+</span>
                        </div>
                    </div>
                    
                    <hr class="text-muted opacity-25">
                    
                    <!-- Categories -->
                    <h6 class="fw-bold mb-3 small text-uppercase tracking-wide mt-4">Categories</h6>
                    <ul class="list-unstyled mb-4">
                        <li class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cat1" checked>
                                <label class="form-check-label text-muted" for="cat1">Men's Clothing (42)</label>
                            </div>
                        </li>
                        <li class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cat2">
                                <label class="form-check-label text-muted" for="cat2">Women's Clothing (38)</label>
                            </div>
                        </li>
                        <li class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cat3">
                                <label class="form-check-label text-muted" for="cat3">Accessories (15)</label>
                            </div>
                        </li>
                    </ul>
                    
                    <hr class="text-muted opacity-25">
                    
                    <!-- Size -->
                    <h6 class="fw-bold mb-3 small text-uppercase tracking-wide mt-4">Size</h6>
                    <div class="d-flex flex-wrap gap-2 mb-4">
                        <span class="badge border border-secondary text-dark px-3 py-2 rounded-1 fw-normal filter-size">S</span>
                        <span class="badge bg-dark text-white border border-dark px-3 py-2 rounded-1 fw-normal filter-size">M</span>
                        <span class="badge border border-secondary text-dark px-3 py-2 rounded-1 fw-normal filter-size">L</span>
                        <span class="badge border border-secondary text-dark px-3 py-2 rounded-1 fw-normal filter-size">XL</span>
                    </div>
                    
                    <button class="btn btn-primary w-100 fw-bold mt-2 rounded-pill">Apply Filters</button>
                </div>
            </div>
            
            <!-- Product Grid Layout -->
            <div class="col-lg-9">
                <!-- Toolbar -->
                <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 bg-white p-3 rounded-4 shadow-sm">
                    <p class="mb-0 text-muted small fw-medium">Showing <strong class="text-dark">1-12</strong> of 36 products</p>
                    <div class="d-flex gap-3 align-items-center mt-3 mt-sm-0">
                        <label class="text-muted small d-none d-sm-block">Sort by:</label>
                        <select class="form-select form-select-sm border border-secondary-subtle" style="width: 160px; cursor: pointer;">
                            <option selected>Featured</option>
                            <option value="1">Price: Low to High</option>
                            <option value="2">Price: High to Low</option>
                            <option value="3">Newest Arrivals</option>
                        </select>
                        <button class="btn btn-outline-secondary btn-sm d-lg-none"><i class="bi bi-funnel"></i> Filter</button>
                    </div>
                </div>
                
                <!-- Grid -->
                <div class="row g-4">
                    <!-- Product 1 -->
                    <div class="col-sm-6 col-xl-4">
                        <div class="card border-0 shadow-sm rounded-4 h-100 product-card overflow-hidden">
                            <div class="position-relative">
                                <img src="product1.jpg" alt="Product" class="card-img-top object-fit-cover" style="height: 280px;">
                                <div class="position-absolute top-0 end-0 m-3 z-1">
                                    <button class="btn btn-light btn-sm rounded-circle shadow-sm text-muted hover-danger"><i class="bi bi-heart"></i></button>
                                </div>
                                <!-- Add to cart hover overlay -->
                                <div class="position-absolute bottom-0 start-0 w-100 p-3 product-overlay">
                                    <button class="btn btn-primary w-100 fw-bold rounded-pill shadow"><i class="bi bi-cart-plus me-1"></i> Add to Cart</button>
                                </div>
                            </div>
                            <div class="card-body p-4 text-center">
                                <div class="text-warning small mb-2">
                                    <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                                    <span class="text-muted ms-1">(24)</span>
                                </div>
                                <h6 class="fw-bold text-truncate mb-1"><a href="#" class="text-dark text-decoration-none hover-primary">Classic Denim Jacket</a></h6>
                                <p class="text-primary fw-bold mb-0 fs-5">.50</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Product 2 (New) -->
                    <div class="col-sm-6 col-xl-4">
                        <div class="card border-0 shadow-sm rounded-4 h-100 product-card overflow-hidden">
                            <div class="position-relative">
                                <span class="badge bg-dark position-absolute top-0 start-0 m-3 z-1">NEW</span>
                                <img src="product2.jpg" alt="Product" class="card-img-top object-fit-cover" style="height: 280px;">
                                <div class="position-absolute top-0 end-0 m-3 z-1">
                                    <button class="btn btn-light btn-sm rounded-circle shadow-sm text-danger hover-danger"><i class="bi bi-heart-fill"></i></button>
                                </div>
                                <div class="position-absolute bottom-0 start-0 w-100 p-3 product-overlay">
                                    <button class="btn btn-primary w-100 fw-bold rounded-pill shadow"><i class="bi bi-cart-plus me-1"></i> Add to Cart</button>
                                </div>
                            </div>
                            <div class="card-body p-4 text-center">
                                <div class="text-warning small mb-2">
                                    <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                                    <span class="text-muted ms-1">(18)</span>
                                </div>
                                <h6 class="fw-bold text-truncate mb-1"><a href="#" class="text-dark text-decoration-none hover-primary">Cotton Basic T-Shirt</a></h6>
                                <p class="text-primary fw-bold mb-0 fs-5">.00</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Product 3 (Sale) -->
                    <div class="col-sm-6 col-xl-4">
                        <div class="card border-0 shadow-sm rounded-4 h-100 product-card overflow-hidden">
                            <div class="position-relative">
                                <span class="badge bg-danger position-absolute top-0 start-0 m-3 z-1">SALE</span>
                                <img src="product3.jpg" alt="Product" class="card-img-top object-fit-cover" style="height: 280px;">
                                <div class="position-absolute top-0 end-0 m-3 z-1">
                                    <button class="btn btn-light btn-sm rounded-circle shadow-sm text-muted hover-danger"><i class="bi bi-heart"></i></button>
                                </div>
                                <div class="position-absolute bottom-0 start-0 w-100 p-3 product-overlay">
                                    <button class="btn btn-primary w-100 fw-bold rounded-pill shadow"><i class="bi bi-cart-plus me-1"></i> Add to Cart</button>
                                </div>
                            </div>
                            <div class="card-body p-4 text-center">
                                <div class="text-warning small mb-2">
                                    <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i>
                                    <span class="text-muted ms-1">(6)</span>
                                </div>
                                <h6 class="fw-bold text-truncate mb-1"><a href="#" class="text-dark text-decoration-none hover-primary">Running Sneakers Ultra</a></h6>
                                <div class="d-flex justify-content-center gap-2">
                                    <span class="text-danger fw-bold fs-5">.99</span>
                                    <span class="text-muted text-decoration-line-through small align-self-center">.99</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Pagination -->
                <nav class="mt-5">
                    <ul class="pagination justify-content-center border-0">
                        <li class="page-item disabled"><a class="page-link rounded-circle me-2 shadow-sm border-0" href="#"><i class="bi bi-chevron-left"></i></a></li>
                        <li class="page-item active"><a class="page-link rounded-circle me-2 shadow-sm border-0" href="#">1</a></li>
                        <li class="page-item"><a class="page-link rounded-circle me-2 shadow-sm border-0" href="#">2</a></li>
                        <li class="page-item"><a class="page-link rounded-circle me-2 shadow-sm border-0" href="#">3</a></li>
                        <li class="page-item"><a class="page-link rounded-circle shadow-sm border-0" href="#"><i class="bi bi-chevron-right"></i></a></li>
                    </ul>
                </nav>
            </div>
            
        </div>
    </div>
</section>

<!-- Custom CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-primary:hover { color: var(--bs-primary) !important; transition: color 0.2s ease; }
.hover-danger:hover { color: var(--bs-danger) !important; transition: color 0.2s ease; }

.filter-size { cursor: pointer; transition: all 0.2s ease; }
.filter-size:hover { background-color: var(--bs-dark); color: white !important; border-color: var(--bs-dark) !important; }

.product-card .product-overlay { transform: translateY(100%); opacity: 0; transition: all 0.3s ease; }
.product-card:hover .product-overlay { transform: translateY(0); opacity: 1; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }
</style>

Custom Product Details Page Layout

PREMIUM

A full product information block including image gallery, title, pricing, stock status, variants (color/size), and add to cart/wishlist buttons.

Preview
Thumb Thumb Thumb
Main Product Image
In Stock

Sony Noise Cancelling Headphones

4.8 (124 reviews)

.99 .99

Industry-leading noise canceling with Dual Noise Sensor technology. Next-level music with Edge-AI, co-developed with Sony Music Studios Tokyo.

Color: Matte Black
  • Free shipping on orders over
  • 30 days easy returns
  • 1 Year Warranty Included
Code Copy Section
HTML 
<!-- Product Details Section -->
<section class="py-5">
    <div class="container">
        <div class="row g-5">
            
            <!-- Left: Image Gallery -->
            <div class="col-lg-6">
                <div class="row g-2 flex-column-reverse flex-md-row">
                    <!-- Thumbnails -->
                    <div class="col-12 col-md-2 d-flex flex-row flex-md-column gap-2">
                        <img src="thumb1.jpg" alt="Thumb" class="img-fluid rounded border border-2 border-primary object-fit-cover cursor-pointer" style="height: 80px;">
                        <img src="thumb2.jpg" alt="Thumb" class="img-fluid rounded border object-fit-cover cursor-pointer opacity-50 hover-opacity-100" style="height: 80px;">
                        <img src="thumb3.jpg" alt="Thumb" class="img-fluid rounded border object-fit-cover cursor-pointer opacity-50 hover-opacity-100" style="height: 80px;">
                    </div>
                    <!-- Main Image -->
                    <div class="col-12 col-md-10">
                        <div class="position-relative overflow-hidden rounded-3 shadow-sm">
                            <img src="main-product.jpg" id="mainProductImg" alt="Main Product Image" class="img-fluid w-100 object-fit-cover bg-light product-zoom" style="height: 500px;">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right: Product Info -->
            <div class="col-lg-6">
                <span class="badge bg-success-subtle text-success px-2 py-1 rounded-1 mb-2">In Stock</span>
                <h2 class="fw-bold mb-2">Premium Wireless Headphones</h2>
                
                <div class="d-flex align-items-center gap-2 mb-4">
                    <div class="text-warning small">
                        <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                    </div>
                    <a href="#reviews" class="text-muted small text-decoration-none hover-primary">4.8 (124 reviews)</a>
                </div>
                
                <h3 class="fw-bold text-primary mb-3">.99 <span class="text-muted text-decoration-line-through fs-5 ms-2">.99</span></h3>
                <p class="text-muted mb-4">Industry-leading noise canceling with Dual Noise Sensor technology. Next-level music with Edge-AI, co-developed with Sony Music Studios Tokyo. Up to 30-hour battery life with quick charging.</p>
                
                <!-- Variants (Color) -->
                <div class="mb-4">
                    <h6 class="fw-bold text-uppercase small">Color: <span class="text-muted fw-normal" id="selectedColor">Matte Black</span></h6>
                    <div class="d-flex gap-2 mt-2">
                        <button class="btn btn-sm rounded-circle p-0 border border-2 border-dark color-selector active" style="width: 32px; height: 32px; background-color: #1a1a1a;" title="Matte Black"></button>
                        <button class="btn btn-sm rounded-circle p-0 border border-1 border-secondary shadow-sm color-selector" style="width: 32px; height: 32px; background-color: #e0e0e0;" title="Silver"></button>
                        <button class="btn btn-sm rounded-circle p-0 border border-1 border-secondary shadow-sm color-selector" style="width: 32px; height: 32px; background-color: #003366;" title="Midnight Blue"></button>
                    </div>
                </div>
                
                <hr class="text-muted opacity-25 mb-4">
                
                <!-- Actions -->
                <div class="d-flex flex-wrap gap-3">
                    <!-- Quantity -->
                    <div class="input-group" style="width: 140px;">
                        <button class="btn btn-outline-secondary" type="button" onclick="this.nextElementSibling.stepDown()"><i class="bi bi-dash"></i></button>
                        <input type="number" class="form-control text-center fw-bold" value="1" min="1" max="10">
                        <button class="btn btn-outline-secondary" type="button" onclick="this.previousElementSibling.stepUp()"><i class="bi bi-plus"></i></button>
                    </div>
                    
                    <!-- Add to Cart -->
                    <button class="btn btn-primary flex-grow-1 fw-bold rounded-3 shadow hover-lift">
                        <i class="bi bi-bag-plus me-2"></i> Add to Cart
                    </button>
                    
                    <!-- Wishlist -->
                    <button class="btn btn-outline-danger px-3 rounded-3 shadow-sm hover-lift" title="Add to Wishlist">
                        <i class="bi bi-heart"></i>
                    </button>
                </div>
                
                <!-- Trust Signals -->
                <div class="mt-4 pt-4 border-top">
                    <ul class="list-unstyled text-muted small mb-0 d-flex flex-column gap-2">
                        <li><i class="bi bi-truck me-2 fs-6 text-dark"></i> Free shipping on orders over </li>
                        <li><i class="bi bi-arrow-counterclockwise me-2 fs-6 text-dark"></i> 30 days easy returns</li>
                        <li><i class="bi bi-shield-check me-2 fs-6 text-dark"></i> 1 Year Warranty Included</li>
                    </ul>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- Custom CSS & Simple JS -->
<style>
.cursor-pointer { cursor: pointer; }
.hover-opacity-100 { transition: opacity 0.3s ease; }
.hover-opacity-100:hover { opacity: 1 !important; }
.color-selector { transition: all 0.2s ease; }
.color-selector.active { border: 2px solid var(--bs-dark) !important; transform: scale(1.1); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--bs-dark) !important; }

/* Simple Image Zoom on Hover */
.product-zoom { transition: transform 0.5s ease; }
.product-zoom:hover { transform: scale(1.05); }

/* Hide Number Input Arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>

<script>
// Simple script to handle color selection UI
document.querySelectorAll('.color-selector').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.color-selector').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        document.getElementById('selectedColor').textContent = this.getAttribute('title');
    });
});
</script>

Custom Product Tabs & Reviews

PREMIUM

A sleek tabbed interface for product descriptions, specifications, and customer reviews using native Bootstrap Navs & Tabs.

Preview

Experience the next generation of sound with our Premium Wireless Headphones. Featuring advanced noise cancellation and edge AI technology, these headphones deliver unparalleled audio clarity. The ergonomic design ensures maximum comfort for all-day listening, while the impressive 30-hour battery life means you'll rarely need to pause your music.

Weight254g
Battery LifeUp to 30 Hours (NC ON)
BluetoothVersion 5.2
Charging TimeApprox. 3.5 Hours
JD
John Doe 2 days ago

Absolutely incredible sound quality. The noise cancellation is the best I've ever experienced on a flight.

Code Copy Section
HTML 
<!-- Product Tabs (Description, Specs, Reviews) -->
<div class="container mt-5">
    <!-- Tab Navigation -->
    <ul class="nav nav-tabs nav-justified border-bottom-0 mb-4 product-custom-tabs" id="productTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fw-bold text-dark py-3" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc" type="button" role="tab">Description</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold text-muted py-3" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button" role="tab">Specifications</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold text-muted py-3" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab">Reviews (124)</button>
        </li>
    </ul>
    
    <!-- Tab Content -->
    <div class="tab-content" id="productTabsContent">
        
        <!-- Description Pane -->
        <div class="tab-pane fade show active px-md-4" id="desc" role="tabpanel">
            <h4 class="fw-bold mb-3">Product Overview</h4>
            <p class="text-muted lh-lg">Experience the next generation of sound with our Premium Wireless Headphones. Featuring advanced noise cancellation and edge AI technology, these headphones deliver unparalleled audio clarity. The ergonomic design ensures maximum comfort for all-day listening, while the impressive 30-hour battery life means you'll rarely need to pause your music.</p>
            <ul class="text-muted lh-lg">
                <li>Industry leading active noise cancellation</li>
                <li>High-Resolution Audio compatible</li>
                <li>Touch sensor controls to pause/play/skip tracks</li>
            </ul>
        </div>
        
        <!-- Specs Pane -->
        <div class="tab-pane fade px-md-4" id="specs" role="tabpanel">
            <div class="table-responsive">
                <table class="table table-striped table-hover mt-3 border-top">
                    <tbody>
                        <tr><th scope="row" class="w-25 text-muted fw-bold">Weight</th><td>254g</td></tr>
                        <tr><th scope="row" class="text-muted fw-bold">Battery Life</th><td>Up to 30 Hours (NC ON)</td></tr>
                        <tr><th scope="row" class="text-muted fw-bold">Bluetooth</th><td>Version 5.2</td></tr>
                        <tr><th scope="row" class="text-muted fw-bold">Charging Time</th><td>Approx. 3.5 Hours</td></tr>
                        <tr><th scope="row" class="text-muted fw-bold">Color</th><td>Matte Black, Silver, Midnight Blue</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Reviews Pane -->
        <div class="tab-pane fade px-md-4" id="reviews" role="tabpanel">
            <!-- Review 1 -->
            <div class="d-flex mb-4 pb-4 border-bottom">
                <div class="flex-shrink-0">
                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fw-bold shadow-sm" style="width: 50px; height: 50px;">JD</div>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="fw-bold mb-1">John Doe <span class="text-muted fw-normal small ms-2">2 days ago</span></h6>
                    <div class="text-warning small mb-2">
                        <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                    </div>
                    <p class="text-muted mb-0">Absolutely incredible sound quality. The noise cancellation is the best I've ever experienced on a flight.</p>
                </div>
            </div>
            <!-- Review 2 -->
            <div class="d-flex mb-4 pb-4 border-bottom">
                <div class="flex-shrink-0">
                    <div class="bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center fw-bold shadow-sm" style="width: 50px; height: 50px;">SM</div>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="fw-bold mb-1">Sarah Miller <span class="text-muted fw-normal small ms-2">1 week ago</span></h6>
                    <div class="text-warning small mb-2">
                        <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                    </div>
                    <p class="text-muted mb-0">Great headphones, very comfortable. The only downside is the charging cable is a bit too short.</p>
                </div>
            </div>
            <button class="btn btn-outline-primary fw-bold">Load More Reviews</button>
        </div>
        
    </div>
</div>

<!-- Required CSS for Custom Tabs -->
<style>
.product-custom-tabs .nav-link { border: none; border-bottom: 3px solid transparent; color: var(--bs-secondary); }
.product-custom-tabs .nav-link:hover { color: var(--bs-dark); border-color: transparent; }
.product-custom-tabs .nav-link.active { border-color: var(--bs-primary); color: var(--bs-dark) !important; background: transparent; }
</style>

Custom Shopping Cart Layout

PREMIUM

A full-width shopping cart page featuring an interactive items table on the left and a sticky order summary/checkout box on the right.

Preview

Shopping Cart (2 Items)

Product Price Quantity Total
Product
Nike Air Max Red

Size: 10 | Color: Red

Remove
.99
.99
Product
Smart Watch Series 7

Color: Midnight

Remove
.00
.00
Continue Shopping
Order Summary
Subtotal .99
Shipping Free
Tax (EST) .00
Total .99
Secure Checkout
Code Copy Section
HTML 
<!-- Shopping Cart Layout -->
<section class="py-5 bg-light">
    <div class="container py-4">
        <h2 class="fw-bold mb-4">Shopping Cart (2 Items)</h2>
        
        <div class="row g-5">
            <!-- Left: Cart Items Table -->
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                    <div class="table-responsive">
                        <table class="table mb-0 align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" class="py-3 px-4 text-muted small text-uppercase tracking-wide">Product</th>
                                    <th scope="col" class="py-3 px-4 text-muted small text-uppercase tracking-wide">Price</th>
                                    <th scope="col" class="py-3 px-4 text-muted small text-uppercase tracking-wide">Quantity</th>
                                    <th scope="col" class="py-3 px-4 text-muted small text-uppercase tracking-wide">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Item 1 -->
                                <tr>
                                    <td class="p-4">
                                        <div class="d-flex align-items-center gap-3">
                                            <img src="product1.jpg" alt="Product" class="rounded-3 shadow-sm object-fit-cover" style="width: 80px; height: 80px;">
                                            <div>
                                                <h6 class="fw-bold mb-1">Nike Air Max Red</h6>
                                                <p class="text-muted small mb-2">Size: 10 | Color: Red</p>
                                                <a href="#" class="text-danger small text-decoration-none hover-primary"><i class="bi bi-trash"></i> Remove</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-4 fw-bold">.99</td>
                                    <td class="p-4">
                                        <div class="input-group input-group-sm" style="width: 110px;">
                                            <button class="btn btn-outline-secondary" type="button" onclick="this.nextElementSibling.stepDown()"><i class="bi bi-dash"></i></button>
                                            <input type="number" class="form-control text-center hide-arrows" value="1" min="1">
                                            <button class="btn btn-outline-secondary" type="button" onclick="this.previousElementSibling.stepUp()"><i class="bi bi-plus"></i></button>
                                        </div>
                                    </td>
                                    <td class="p-4 fw-bold text-primary">.99</td>
                                </tr>
                                <!-- Item 2 -->
                                <tr>
                                    <td class="p-4 border-bottom-0">
                                        <div class="d-flex align-items-center gap-3">
                                            <img src="product2.jpg" alt="Product" class="rounded-3 shadow-sm object-fit-cover" style="width: 80px; height: 80px;">
                                            <div>
                                                <h6 class="fw-bold mb-1">Smart Watch Series 7</h6>
                                                <p class="text-muted small mb-2">Color: Midnight</p>
                                                <a href="#" class="text-danger small text-decoration-none hover-primary"><i class="bi bi-trash"></i> Remove</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-4 border-bottom-0 fw-bold">.00</td>
                                    <td class="p-4 border-bottom-0">
                                        <div class="input-group input-group-sm" style="width: 110px;">
                                            <button class="btn btn-outline-secondary" type="button" onclick="this.nextElementSibling.stepDown()"><i class="bi bi-dash"></i></button>
                                            <input type="number" class="form-control text-center hide-arrows" value="2" min="1">
                                            <button class="btn btn-outline-secondary" type="button" onclick="this.previousElementSibling.stepUp()"><i class="bi bi-plus"></i></button>
                                        </div>
                                    </td>
                                    <td class="p-4 border-bottom-0 fw-bold text-primary">.00</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="mt-4">
                    <a href="#" class="text-decoration-none text-dark fw-bold hover-primary"><i class="bi bi-arrow-left me-2"></i> Continue Shopping</a>
                </div>
            </div>
            
            <!-- Right: Order Summary Box -->
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 p-4 position-sticky" style="top: 2rem;">
                    <h5 class="fw-bold mb-4">Order Summary</h5>
                    
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-bold">.99</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Shipping</span>
                        <span class="fw-bold text-success">Free</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Tax (EST)</span>
                        <span class="fw-bold">.00</span>
                    </div>
                    
                    <hr class="text-muted opacity-25 my-4">
                    
                    <div class="d-flex justify-content-between mb-4">
                        <span class="fw-bold fs-5">Total</span>
                        <span class="fw-bold fs-5 text-primary">.99</span>
                    </div>
                    
                    <!-- Coupon Form -->
                    <form class="mb-4">
                        <div class="input-group">
                            <input type="text" class="form-control bg-light border-0 shadow-none" placeholder="Coupon code">
                            <button class="btn btn-dark fw-bold px-4" type="button">Apply</button>
                        </div>
                    </form>
                    
                    <button class="btn btn-primary w-100 py-3 fw-bold rounded-pill shadow-sm hover-lift">Proceed to Checkout</button>
                    
                    <!-- Trust Badges -->
                    <div class="text-center mt-4">
                        <div class="d-flex align-items-center justify-content-center gap-2 text-muted small">
                            <i class="bi bi-shield-lock text-success fs-5"></i> 256-bit SSL Secure Checkout
                        </div>
                        <div class="d-flex justify-content-center gap-2 mt-3 opacity-75">
                            <!-- Add payment icons here -->
                            <i class="bi bi-credit-card fs-4"></i>
                            <i class="bi bi-paypal fs-4"></i>
                            <i class="bi bi-apple fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }
.hover-primary:hover { color: var(--bs-primary) !important; transition: color 0.2s ease; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.hide-arrows::-webkit-inner-spin-button, 
.hide-arrows::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>

Custom Checkout & Billing Forms Layout

PREMIUM

A full-page checkout experience including billing details, shipping methods, payment selection, and a sticky order summary sidebar.

Preview

Checkout

1. Billing Details

2. Payment Method

Your Order
2 Items
  • Prod
    Nike Air Max Red
    Quantity: 1
    .99
  • Prod
    Smart Watch S7
    Quantity: 2
    .00
Subtotal .99
Shipping Free
Tax .00
Total (USD) .99
Secure 256-bit SSL Encryption
Code Copy Section
HTML 
<!-- Checkout & Billing Page -->
<section class="py-5 bg-light">
    <div class="container py-4">
        <h2 class="fw-bold mb-4">Checkout</h2>
        
        <div class="row g-5">
            <!-- Left: Forms -->
            <div class="col-lg-8">
                
                <!-- Billing Details Card -->
                <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 mb-4">
                    <h4 class="fw-bold mb-4">1. Billing Details</h4>
                    <form class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">First Name</label>
                            <input type="text" class="form-control" placeholder="John" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">Last Name</label>
                            <input type="text" class="form-control" placeholder="Doe" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label small text-muted fw-bold">Email Address</label>
                            <input type="email" class="form-control" placeholder="john@example.com" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label small text-muted fw-bold">Address</label>
                            <input type="text" class="form-control" placeholder="123 Main St" required>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label small text-muted fw-bold">Country</label>
                            <select class="form-select" required>
                                <option value="">Choose...</option>
                                <option>United States</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold">State</label>
                            <select class="form-select" required>
                                <option value="">Choose...</option>
                                <option>New York</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-bold">Zip Code</label>
                            <input type="text" class="form-control" placeholder="10001" required>
                        </div>
                        <div class="col-12 mt-4">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="sameAddress" checked>
                                <label class="form-check-label text-muted cursor-pointer" for="sameAddress">Shipping address is the same as billing address</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="saveInfo">
                                <label class="form-check-label text-muted cursor-pointer" for="saveInfo">Save this information for next time</label>
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- Payment Method Card -->
                <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5">
                    <h4 class="fw-bold mb-4">2. Payment Method</h4>
                    
                    <div class="d-flex flex-column gap-3 mb-4 payment-options">
                        <!-- Credit Card Select -->
                        <div class="border rounded-3 p-3 payment-box border-primary bg-primary-subtle">
                            <div class="form-check d-flex justify-content-between align-items-center mb-0">
                                <div>
                                    <input class="form-check-input payment-radio" type="radio" name="paymentMethod" id="creditCard" checked>
                                    <label class="form-check-label fw-bold ms-2 cursor-pointer" for="creditCard">Credit Card</label>
                                </div>
                                <div class="d-flex gap-2">
                                    <i class="bi bi-credit-card-2-front fs-4 text-primary"></i>
                                </div>
                            </div>
                            
                            <!-- CC Form -->
                            <div class="row g-3 mt-2 px-2 px-md-4 cc-form-container">
                                <div class="col-12">
                                    <label class="form-label small text-muted fw-bold">Name on card</label>
                                    <input type="text" class="form-control" required>
                                    <small class="text-muted">Full name as displayed on card</small>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small text-muted fw-bold">Credit card number</label>
                                    <input type="text" class="form-control" placeholder="xxxx-xxxx-xxxx-xxxx" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small text-muted fw-bold">Expiration</label>
                                    <input type="text" class="form-control" placeholder="MM/YY" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small text-muted fw-bold">CVV</label>
                                    <input type="text" class="form-control" placeholder="123" required>
                                </div>
                            </div>
                        </div>
                        
                        <!-- PayPal Select -->
                        <div class="border rounded-3 p-3 payment-box bg-white">
                            <div class="form-check d-flex justify-content-between align-items-center mb-0">
                                <div>
                                    <input class="form-check-input payment-radio" type="radio" name="paymentMethod" id="paypal">
                                    <label class="form-check-label fw-bold ms-2 cursor-pointer" for="paypal">PayPal</label>
                                </div>
                                <i class="bi bi-paypal fs-4 text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
            <!-- Right: Sticky Order Summary -->
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 p-4 position-sticky" style="top: 2rem;">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold mb-0">Your Order</h5>
                        <span class="badge bg-primary rounded-pill">2 Items</span>
                    </div>
                    
                    <!-- Mini Cart Items -->
                    <ul class="list-group list-group-flush mb-4 border-bottom pb-3">
                        <li class="list-group-item border-0 px-0 py-3 d-flex justify-content-between lh-sm">
                            <div class="d-flex gap-3">
                                <div class="bg-light rounded p-2" style="width: 50px; height: 50px;">
                                    <img src="product1.jpg" alt="Prod" class="img-fluid w-100 h-100 object-fit-cover">
                                </div>
                                <div>
                                    <h6 class="my-0 fw-bold">Nike Air Max Red</h6>
                                    <small class="text-muted">Quantity: 1</small>
                                </div>
                            </div>
                            <span class="text-muted fw-medium">.99</span>
                        </li>
                        <li class="list-group-item border-0 px-0 py-3 d-flex justify-content-between lh-sm">
                            <div class="d-flex gap-3">
                                <div class="bg-light rounded p-2" style="width: 50px; height: 50px;">
                                    <img src="product2.jpg" alt="Prod" class="img-fluid w-100 h-100 object-fit-cover">
                                </div>
                                <div>
                                    <h6 class="my-0 fw-bold">Smart Watch S7</h6>
                                    <small class="text-muted">Quantity: 2</small>
                                </div>
                            </div>
                            <span class="text-muted fw-medium">.00</span>
                        </li>
                    </ul>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-bold">.99</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Shipping</span>
                        <span class="fw-bold text-success">Free</span>
                    </div>
                    <div class="d-flex justify-content-between mb-4">
                        <span class="text-muted">Tax</span>
                        <span class="fw-bold">.00</span>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-4 pt-3 border-top">
                        <span class="fw-bold fs-5">Total (USD)</span>
                        <span class="fw-bold fs-5 text-primary">.99</span>
                    </div>
                    
                    <button class="btn btn-primary w-100 py-3 fw-bold rounded-pill shadow hover-lift">Place Order</button>
                    
                    <div class="text-center mt-3 text-success small fw-medium">
                        <i class="bi bi-lock-fill me-1"></i> Secure 256-bit SSL Encryption
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- JS to toggle payment active states -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('.payment-radio');
    const boxes = document.querySelectorAll('.payment-box');
    
    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            // Reset all boxes
            boxes.forEach(box => {
                box.classList.remove('border-primary', 'bg-primary-subtle');
                box.classList.add('bg-white');
                const form = box.querySelector('.cc-form-container');
                if(form) form.classList.add('d-none');
            });
            
            // Activate selected box
            if(this.checked) {
                const parent = this.closest('.payment-box');
                parent.classList.add('border-primary', 'bg-primary-subtle');
                parent.classList.remove('bg-white');
                const form = parent.querySelector('.cc-form-container');
                if(form) form.classList.remove('d-none');
            }
        });
    });
});
</script>

<!-- CSS -->
<style>
.cursor-pointer { cursor: pointer; }
.payment-box { transition: all 0.3s ease; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
</style>

Custom User Profile Dashboard

PREMIUM

A comprehensive customer account dashboard with sidebar navigation, profile settings, and order history table.

Preview
Profile
Alex Morgan

alex.morgan@example.com

Account Settings Order History 2 Address Book Payment Methods Sign Out

Account Settings

Change Password

Recent Orders

View All
Order ID Date Status Total Action
#ORD-00124 Oct 24, 2023 Delivered .50 Details
#ORD-00125 Nov 12, 2023 Processing .00 Details
Code Copy Section
HTML 
<!-- User Profile Dashboard -->
<section class="py-5 bg-light">
    <div class="container py-4">
        <div class="row g-4">
            
            <!-- Left: Navigation Sidebar -->
            <div class="col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden position-sticky" style="top: 2rem;">
                    <!-- User Info -->
                    <div class="card-body p-4 text-center border-bottom bg-white">
                        <div class="position-relative d-inline-block mb-3">
                            <img src="profile.jpg" alt="Profile" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 100px; height: 100px;">
                            <button class="btn btn-primary btn-sm rounded-circle position-absolute bottom-0 end-0 shadow hover-lift" title="Change Photo"><i class="bi bi-camera"></i></button>
                        </div>
                        <h5 class="fw-bold mb-1">Alex Morgan</h5>
                        <p class="text-muted small mb-0">alex.morgan@example.com</p>
                    </div>
                    
                    <!-- Menu Links -->
                    <div class="list-group list-group-flush rounded-0 border-0 profile-nav">
                        <a href="#" class="list-group-item list-group-item-action py-3 px-4 active fw-medium border-0">
                            <i class="bi bi-person me-2"></i> Account Settings
                        </a>
                        <a href="#" class="list-group-item list-group-item-action py-3 px-4 fw-medium border-0">
                            <i class="bi bi-box-seam me-2"></i> Order History 
                            <span class="badge bg-danger rounded-pill float-end mt-1">2</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action py-3 px-4 fw-medium border-0">
                            <i class="bi bi-geo-alt me-2"></i> Address Book
                        </a>
                        <a href="#" class="list-group-item list-group-item-action py-3 px-4 fw-medium border-0">
                            <i class="bi bi-credit-card me-2"></i> Payment Methods
                        </a>
                        <a href="#" class="list-group-item list-group-item-action py-3 px-4 fw-medium border-0 text-danger mt-2 border-top">
                            <i class="bi bi-box-arrow-right me-2"></i> Sign Out
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Right: Dashboard Content -->
            <div class="col-lg-9">
                
                <!-- Settings Form -->
                <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white mb-4">
                    <h4 class="fw-bold mb-4">Account Settings</h4>
                    
                    <form class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">First Name</label>
                            <input type="text" class="form-control bg-light border-0 px-3 py-2" value="Alex">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">Last Name</label>
                            <input type="text" class="form-control bg-light border-0 px-3 py-2" value="Morgan">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">Email Address</label>
                            <input type="email" class="form-control bg-light border-0 px-3 py-2" value="alex.morgan@example.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">Phone Number</label>
                            <input type="tel" class="form-control bg-light border-0 px-3 py-2" value="+1 (555) 123-4567">
                        </div>
                        
                        <div class="col-12 mt-4 pt-4 border-top">
                            <h5 class="fw-bold mb-3">Change Password</h5>
                        </div>
                        
                        <div class="col-12">
                            <label class="form-label small text-muted fw-bold">Current Password</label>
                            <input type="password" class="form-control bg-light border-0 px-3 py-2">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">New Password</label>
                            <input type="password" class="form-control bg-light border-0 px-3 py-2">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold">Confirm New Password</label>
                            <input type="password" class="form-control bg-light border-0 px-3 py-2">
                        </div>
                        
                        <div class="col-12 mt-4 d-flex justify-content-end">
                            <button type="button" class="btn btn-primary px-4 py-2 fw-bold rounded-pill shadow-sm hover-lift">Save Changes</button>
                        </div>
                    </form>
                </div>
                
                <!-- Order History Sneak Peek -->
                <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="fw-bold mb-0">Recent Orders</h4>
                        <a href="#" class="btn btn-outline-primary btn-sm rounded-pill fw-bold px-3">View All</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 border-top">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" class="py-3 text-muted small text-uppercase tracking-wide">Order ID</th>
                                    <th scope="col" class="py-3 text-muted small text-uppercase tracking-wide">Date</th>
                                    <th scope="col" class="py-3 text-muted small text-uppercase tracking-wide">Status</th>
                                    <th scope="col" class="py-3 text-muted small text-uppercase tracking-wide">Total</th>
                                    <th scope="col" class="py-3 text-muted small text-uppercase tracking-wide text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="fw-bold text-dark py-3">#ORD-00124</td>
                                    <td class="py-3">Oct 24, 2023</td>
                                    <td class="py-3"><span class="badge bg-success-subtle text-success px-2 py-1 rounded-1">Delivered</span></td>
                                    <td class="fw-bold py-3">.50</td>
                                    <td class="text-end py-3"><a href="#" class="btn btn-sm btn-light border shadow-sm">Details</a></td>
                                </tr>
                                <tr>
                                    <td class="fw-bold text-dark py-3">#ORD-00125</td>
                                    <td class="py-3">Nov 12, 2023</td>
                                    <td class="py-3"><span class="badge bg-warning-subtle text-warning px-2 py-1 rounded-1">Processing</span></td>
                                    <td class="fw-bold py-3">.00</td>
                                    <td class="text-end py-3"><a href="#" class="btn btn-sm btn-light border shadow-sm">Details</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.profile-nav .list-group-item { transition: all 0.2s ease; border-left: 3px solid transparent !important; }
.profile-nav .list-group-item:hover { background-color: var(--bs-light); color: var(--bs-primary); }
.profile-nav .list-group-item.active { background-color: var(--bs-primary-subtle); color: var(--bs-primary); border-left: 3px solid var(--bs-primary) !important; font-weight: bold; }
.tracking-wide { letter-spacing: 1px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
</style>

Custom Recently Viewed Slider

PREMIUM

A compact, scrollable horizontal slider showcasing recently viewed products, perfect for the bottom of product details pages.

Preview

Recently Viewed

Product
Nike Air Max Red

.99

Product
Smart Watch S7

.00

Product
Running Sneakers Ultra
.99 .99
Product
Premium Headphones

.99

Product
Classic Denim Jacket

.50

Code Copy Section
HTML 
<!-- Recently Viewed Slider -->
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-4">
            <h3 class="fw-bold mb-0">Recently Viewed</h3>
            
            <!-- Custom Slider Controls -->
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary rounded-circle btn-sm shadow-sm d-flex justify-content-center align-items-center slider-btn" style="width: 36px; height: 36px;" onclick="document.getElementById('recentSlider').scrollBy({left: -270, behavior: 'smooth'})">
                    <i class="bi bi-chevron-left"></i>
                </button>
                <button class="btn btn-outline-secondary rounded-circle btn-sm shadow-sm d-flex justify-content-center align-items-center slider-btn" style="width: 36px; height: 36px;" onclick="document.getElementById('recentSlider').scrollBy({left: 270, behavior: 'smooth'})">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
        
        <!-- Horizontal Scroll Wrapper -->
        <div class="d-flex overflow-auto pb-4 gap-4 hide-scrollbar" id="recentSlider" style="scroll-snap-type: x mandatory; scroll-behavior: smooth;">
            
            <!-- Product Card 1 -->
            <div class="card border-0 shadow-sm rounded-4 flex-shrink-0 product-card" style="width: 250px; scroll-snap-align: start;">
                <a href="#" class="text-decoration-none text-dark">
                    <img src="product1.jpg" alt="Product" class="card-img-top object-fit-cover rounded-top-4" style="height: 180px;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold text-truncate mb-1 hover-primary">Nike Air Max Red</h6>
                        <p class="text-primary fw-bold mb-0">.99</p>
                    </div>
                </a>
            </div>
            
            <!-- Product Card 2 -->
            <div class="card border-0 shadow-sm rounded-4 flex-shrink-0 product-card" style="width: 250px; scroll-snap-align: start;">
                <a href="#" class="text-decoration-none text-dark">
                    <img src="product2.jpg" alt="Product" class="card-img-top object-fit-cover rounded-top-4" style="height: 180px;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold text-truncate mb-1 hover-primary">Smart Watch S7</h6>
                        <p class="text-primary fw-bold mb-0">.00</p>
                    </div>
                </a>
            </div>
            
            <!-- Product Card 3 -->
            <div class="card border-0 shadow-sm rounded-4 flex-shrink-0 product-card" style="width: 250px; scroll-snap-align: start;">
                <a href="#" class="text-decoration-none text-dark">
                    <span class="badge bg-danger position-absolute top-0 start-0 m-2 z-1">SALE</span>
                    <img src="product3.jpg" alt="Product" class="card-img-top object-fit-cover rounded-top-4" style="height: 180px;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold text-truncate mb-1 hover-primary">Running Sneakers Ultra</h6>
                        <div class="d-flex gap-2">
                            <span class="text-danger fw-bold">.99</span>
                            <span class="text-muted text-decoration-line-through small align-self-center">.99</span>
                        </div>
                    </div>
                </a>
            </div>
            
            <!-- Product Card 4 -->
            <div class="card border-0 shadow-sm rounded-4 flex-shrink-0 product-card" style="width: 250px; scroll-snap-align: start;">
                <a href="#" class="text-decoration-none text-dark">
                    <img src="product4.jpg" alt="Product" class="card-img-top object-fit-cover rounded-top-4" style="height: 180px;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold text-truncate mb-1 hover-primary">Premium Headphones</h6>
                        <p class="text-primary fw-bold mb-0">.99</p>
                    </div>
                </a>
            </div>
            
            <!-- Product Card 5 -->
            <div class="card border-0 shadow-sm rounded-4 flex-shrink-0 product-card" style="width: 250px; scroll-snap-align: start;">
                <a href="#" class="text-decoration-none text-dark">
                    <img src="product5.jpg" alt="Product" class="card-img-top object-fit-cover rounded-top-4" style="height: 180px;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold text-truncate mb-1 hover-primary">Classic Denim Jacket</h6>
                        <p class="text-primary fw-bold mb-0">.50</p>
                    </div>
                </a>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }

.product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }

.slider-btn:hover { background-color: var(--bs-secondary); color: white; border-color: var(--bs-secondary); }
</style>

Custom Education Timeline

PREMIUM

A vertical, connected timeline for displaying educational history, institutional milestones, or curriculum pathways.

Preview

Our Journey to Excellence

2023 - Present
Global Campus Expansion

Launched three new international campuses in Europe and Asia, expanding our reach to over 50,000 students worldwide with state-of-the-art virtual learning environments.

2018 - 2022
Digital Curriculum Integration

Completely revamped the curriculum to include advanced AI and machine learning courses, partnering with top tech companies for hands-on student projects.

1995 - 2017
Foundation & Early Years

Founded with a vision to provide accessible, high-quality education. Started with just 100 students in a small building, growing into a recognized institution of excellence.

Code Copy Section
HTML 
<!-- Vertical Timeline Section -->
<section class="py-5 bg-light">
    <div class="container py-4">
        <h6 class="text-primary fw-bold text-uppercase text-center mb-2 tracking-wide">History</h6>
        <h2 class="display-6 fw-bold text-center mb-5">Our Educational Journey</h2>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="position-relative pb-4">
                    
                    <!-- Main Vertical Line -->
                    <div class="position-absolute top-0 bottom-0 start-0 ms-3 ms-md-5 bg-primary opacity-25" style="width: 2px;"></div>
                    
                    <!-- Timeline Item 1 -->
                    <div class="position-relative mb-5 pe-3 ps-5 ps-md-0 d-flex align-items-start">
                        <!-- Icon/Dot -->
                        <div class="d-flex flex-column align-items-center position-absolute start-0 ms-1 ms-md-4 mt-1" style="transform: translateX(-50%);">
                            <div class="bg-primary rounded-circle shadow d-flex align-items-center justify-content-center text-white" style="width: 40px; height: 40px; z-index: 2;">
                                <i class="bi bi-mortarboard-fill fs-5"></i>
                            </div>
                        </div>
                        <!-- Content Card -->
                        <div class="ms-md-5 ps-md-5 w-100">
                            <div class="card border-0 shadow-sm rounded-4 timeline-card hover-lift">
                                <div class="card-body p-4 p-md-5">
                                    <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-bold mb-3 tracking-wide">2023 - Present</span>
                                    <h4 class="fw-bold mb-3">Global Campus Expansion</h4>
                                    <p class="text-muted mb-0 lh-lg">Launched three new international campuses in Europe and Asia, expanding our reach to over 50,000 students worldwide with state-of-the-art virtual learning environments.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Timeline Item 2 -->
                    <div class="position-relative mb-5 pe-3 ps-5 ps-md-0 d-flex align-items-start">
                        <div class="d-flex flex-column align-items-center position-absolute start-0 ms-1 ms-md-4 mt-1" style="transform: translateX(-50%);">
                            <div class="bg-primary rounded-circle shadow d-flex align-items-center justify-content-center text-white" style="width: 40px; height: 40px; z-index: 2;">
                                <i class="bi bi-book-fill fs-5"></i>
                            </div>
                        </div>
                        <div class="ms-md-5 ps-md-5 w-100">
                            <div class="card border-0 shadow-sm rounded-4 timeline-card hover-lift">
                                <div class="card-body p-4 p-md-5">
                                    <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-bold mb-3 tracking-wide">2018 - 2022</span>
                                    <h4 class="fw-bold mb-3">Digital Curriculum Integration</h4>
                                    <p class="text-muted mb-0 lh-lg">Completely revamped the curriculum to include advanced AI and machine learning courses, partnering with top tech companies for hands-on student projects.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Timeline Item 3 -->
                    <div class="position-relative mb-0 pe-3 ps-5 ps-md-0 d-flex align-items-start">
                        <div class="d-flex flex-column align-items-center position-absolute start-0 ms-1 ms-md-4 mt-1" style="transform: translateX(-50%);">
                            <div class="bg-primary rounded-circle shadow d-flex align-items-center justify-content-center text-white" style="width: 40px; height: 40px; z-index: 2;">
                                <i class="bi bi-building-fill fs-5"></i>
                            </div>
                        </div>
                        <div class="ms-md-5 ps-md-5 w-100">
                            <div class="card border-0 shadow-sm rounded-4 timeline-card hover-lift">
                                <div class="card-body p-4 p-md-5">
                                    <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-bold mb-3 tracking-wide">1995 - 2017</span>
                                    <h4 class="fw-bold mb-3">Foundation & Early Years</h4>
                                    <p class="text-muted mb-0 lh-lg">Founded with a vision to provide accessible, high-quality education. Started with just 100 students in a small building, growing into a recognized institution of excellence.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid transparent; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; border-color: var(--bs-primary); }
</style>

Custom Courses Grid Layout

PREMIUM

A rich card grid displaying educational courses, complete with instructor avatars, rating stars, duration badges, and pricing.

Preview
Popular

Featured Courses

View All Courses
Bestseller Course
12 Weeks
Development
4.9 (2k)
Full-Stack Web Development Bootcamp
Instructor David Miller
.00
Hot Course
8 Weeks
Data Science
4.8 (1.5k)
Machine Learning A-Z: Hands-On Python
Instructor Sarah Chen
.00
Course
6 Weeks
Design
4.7 (800)
UI/UX Design Masterclass: From Zero to Hero
Instructor Michael Ross
.00
Code Copy Section
HTML 
<!-- Featured Courses Grid -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div>
                <h6 class="text-primary fw-bold text-uppercase tracking-wide">Popular</h6>
                <h2 class="display-6 fw-bold mb-0">Featured Courses</h2>
            </div>
            <a href="#" class="btn btn-outline-dark rounded-pill fw-bold px-4 d-none d-md-block hover-primary-btn">View All Courses</a>
        </div>
        
        <!-- Grid -->
        <div class="row g-4">
            <!-- Course 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden hover-lift group">
                    <div class="position-relative overflow-hidden">
                        <!-- Badges -->
                        <span class="badge bg-warning text-dark position-absolute top-0 start-0 m-3 z-1 fw-bold px-3 py-2 rounded-pill shadow-sm">Bestseller</span>
                        <!-- Image -->
                        <a href="#">
                            <img src="course1.jpg" alt="Course" class="card-img-top object-fit-cover course-img" style="height: 240px;">
                        </a>
                        <!-- Duration -->
                        <div class="position-absolute bottom-0 end-0 m-3 z-1">
                            <span class="badge bg-white text-dark shadow px-2 py-1 rounded-2"><i class="bi bi-clock me-1 text-primary"></i> 12 Weeks</span>
                        </div>
                    </div>
                    <div class="card-body p-4 p-md-5 d-flex flex-column">
                        <!-- Category & Rating -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted small fw-bold text-uppercase tracking-wide">Development</span>
                            <div class="text-warning small fw-bold"><i class="bi bi-star-fill"></i> 4.9 <span class="text-muted fw-normal">(2k)</span></div>
                        </div>
                        <!-- Title -->
                        <h4 class="fw-bold mb-4"><a href="#" class="text-dark text-decoration-none hover-primary">Full-Stack Web Development Bootcamp</a></h4>
                        
                        <!-- Footer -->
                        <div class="mt-auto pt-4 border-top d-flex justify-content-between align-items-center">
                            <!-- Instructor -->
                            <div class="d-flex align-items-center gap-2">
                                <img src="instructor1.jpg" alt="Instructor" class="rounded-circle object-fit-cover border" style="width: 40px; height: 40px;">
                                <span class="small fw-medium text-muted">David Miller</span>
                            </div>
                            <!-- Price -->
                            <h4 class="text-primary fw-bold mb-0">.00</h4>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Course 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden hover-lift group">
                    <div class="position-relative overflow-hidden">
                        <span class="badge bg-danger text-white position-absolute top-0 start-0 m-3 z-1 fw-bold px-3 py-2 rounded-pill shadow-sm">Hot</span>
                        <a href="#">
                            <img src="course2.jpg" alt="Course" class="card-img-top object-fit-cover course-img" style="height: 240px;">
                        </a>
                        <div class="position-absolute bottom-0 end-0 m-3 z-1">
                            <span class="badge bg-white text-dark shadow px-2 py-1 rounded-2"><i class="bi bi-clock me-1 text-primary"></i> 8 Weeks</span>
                        </div>
                    </div>
                    <div class="card-body p-4 p-md-5 d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted small fw-bold text-uppercase tracking-wide">Data Science</span>
                            <div class="text-warning small fw-bold"><i class="bi bi-star-fill"></i> 4.8 <span class="text-muted fw-normal">(1.5k)</span></div>
                        </div>
                        <h4 class="fw-bold mb-4"><a href="#" class="text-dark text-decoration-none hover-primary">Machine Learning A-Z: Hands-On Python</a></h4>
                        
                        <div class="mt-auto pt-4 border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center gap-2">
                                <img src="instructor2.jpg" alt="Instructor" class="rounded-circle object-fit-cover border" style="width: 40px; height: 40px;">
                                <span class="small fw-medium text-muted">Sarah Chen</span>
                            </div>
                            <h4 class="text-primary fw-bold mb-0">.00</h4>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Course 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden hover-lift group">
                    <div class="position-relative overflow-hidden">
                        <a href="#">
                            <img src="course3.jpg" alt="Course" class="card-img-top object-fit-cover course-img" style="height: 240px;">
                        </a>
                        <div class="position-absolute bottom-0 end-0 m-3 z-1">
                            <span class="badge bg-white text-dark shadow px-2 py-1 rounded-2"><i class="bi bi-clock me-1 text-primary"></i> 6 Weeks</span>
                        </div>
                    </div>
                    <div class="card-body p-4 p-md-5 d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted small fw-bold text-uppercase tracking-wide">Design</span>
                            <div class="text-warning small fw-bold"><i class="bi bi-star-fill"></i> 4.7 <span class="text-muted fw-normal">(800)</span></div>
                        </div>
                        <h4 class="fw-bold mb-4"><a href="#" class="text-dark text-decoration-none hover-primary">UI/UX Design Masterclass: From Zero to Hero</a></h4>
                        
                        <div class="mt-auto pt-4 border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center gap-2">
                                <img src="instructor3.jpg" alt="Instructor" class="rounded-circle object-fit-cover border" style="width: 40px; height: 40px;">
                                <span class="small fw-medium text-muted">Michael Ross</span>
                            </div>
                            <h4 class="text-primary fw-bold mb-0">.00</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Mobile View All Button -->
        <div class="text-center mt-5 d-md-none">
            <a href="#" class="btn btn-outline-dark rounded-pill fw-bold px-5 py-2">View All Courses</a>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }
.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }
.hover-primary-btn:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: white; }

/* Image Zoom effect on card hover */
.course-img { transition: transform 0.5s ease; }
.group:hover .course-img { transform: scale(1.05); }
</style>

Custom Course Details Layout

PREMIUM

A comprehensive course page featuring a video preview area, syllabus accordion, instructor profile, and a sticky enrollment sidebar.

Preview
Development Bestseller

Full-Stack Web Development Bootcamp

Learn front-end and back-end development from scratch. Master HTML, CSS, JavaScript, React, Node.js, and MongoDB by building real-world projects.

4.8 (2,451 ratings)
15,200 students
English, Spanish
Instructor

Created by

David Miller, Senior Software Engineer
Course Video

.00 .00

This course includes:

  • 45 hours on-demand video
  • 25 downloadable resources
  • Access on mobile and TV
  • Certificate of completion

Course Syllabus

  • Setting up your environment 15:00
  • HTML5 Structure and Semantic Tags 22:30
  • Coding Exercise: Your First Webpage Exercise

Content locked. Enroll to access.

Code Copy Section
HTML 
<!-- Course Details Page Layout -->
<section class="py-5">
    <div class="container py-4">
        
        <!-- Hero & Sticky Sidebar Row -->
        <div class="row g-5 mb-5 pb-5 border-bottom">
            <!-- Main Info -->
            <div class="col-lg-8">
                <div class="d-flex gap-2 mb-3">
                    <span class="badge bg-primary rounded-pill px-3 py-2">Development</span>
                    <span class="badge bg-warning text-dark rounded-pill px-3 py-2">Bestseller</span>
                </div>
                <h1 class="display-5 fw-bold mb-3">Full-Stack Web Development Bootcamp</h1>
                <p class="lead text-muted mb-4">Learn front-end and back-end development from scratch. Master HTML, CSS, JavaScript, React, Node.js, and MongoDB by building real-world projects.</p>
                
                <!-- Course Stats -->
                <div class="d-flex flex-wrap gap-4 align-items-center mb-4">
                    <div class="d-flex align-items-center gap-2">
                        <div class="text-warning"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i></div>
                        <span class="fw-bold">4.8</span>
                        <span class="text-muted">(2,451 ratings)</span>
                    </div>
                    <div class="d-flex align-items-center gap-2 text-muted">
                        <i class="bi bi-people-fill"></i> 15,200 students
                    </div>
                    <div class="d-flex align-items-center gap-2 text-muted">
                        <i class="bi bi-globe"></i> English, Spanish
                    </div>
                </div>
                
                <!-- Instructor Brief -->
                <div class="d-flex align-items-center gap-3">
                    <img src="instructor.jpg" alt="Instructor" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 60px; height: 60px;">
                    <div>
                        <p class="mb-0 small text-muted text-uppercase fw-bold tracking-wide">Created by</p>
                        <h6 class="fw-bold mb-0 fs-5">David Miller, Senior Software Engineer</h6>
                    </div>
                </div>
            </div>
            
            <!-- Sticky Enrollment Sidebar -->
            <div class="col-lg-4">
                <div class="card border-0 shadow-lg rounded-4 overflow-hidden position-sticky" style="top: 2rem; z-index: 10;">
                    <!-- Video Preview Thumbnail -->
                    <div class="position-relative bg-dark video-thumbnail cursor-pointer">
                        <img src="course-preview.jpg" alt="Course Video" class="card-img-top opacity-50" style="height: 220px; object-fit: cover;">
                        <button class="btn btn-light rounded-circle position-absolute top-50 start-50 translate-middle shadow-lg play-btn" style="width: 70px; height: 70px;">
                            <i class="bi bi-play-fill fs-2 text-primary ms-1"></i>
                        </button>
                        <div class="position-absolute bottom-0 w-100 text-center pb-2 z-1">
                            <span class="text-white small fw-medium">Preview this course</span>
                        </div>
                    </div>
                    
                    <!-- Pricing & CTA -->
                    <div class="card-body p-4 p-md-5">
                        <h2 class="fw-bold mb-4">.00 <span class="text-muted fs-5 text-decoration-line-through fw-normal ms-2">.00</span></h2>
                        <button class="btn btn-primary w-100 fw-bold py-3 rounded-pill shadow hover-lift mb-3">Enroll Now</button>
                        <button class="btn btn-outline-dark w-100 fw-bold py-3 rounded-pill mb-4">Add to Cart</button>
                        
                        <p class="small text-center text-muted fw-bold text-uppercase mb-3 tracking-wide">This course includes:</p>
                        <ul class="list-unstyled text-muted small d-flex flex-column gap-3 mb-0">
                            <li><i class="bi bi-camera-video me-2 fs-6 text-dark"></i> 45 hours on-demand video</li>
                            <li><i class="bi bi-file-earmark-text me-2 fs-6 text-dark"></i> 25 downloadable resources</li>
                            <li><i class="bi bi-phone me-2 fs-6 text-dark"></i> Access on mobile and TV</li>
                            <li><i class="bi bi-trophy me-2 fs-6 text-dark"></i> Certificate of completion</li>
                            <li><i class="bi bi-infinity me-2 fs-6 text-dark"></i> Full lifetime access</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Syllabus Section -->
        <div class="row">
            <div class="col-lg-8">
                <h3 class="fw-bold mb-4">Course Syllabus</h3>
                
                <div class="accordion custom-accordion" id="courseAccordion">
                    <!-- Module 1 -->
                    <div class="accordion-item border-0 mb-3 shadow-sm rounded-4 overflow-hidden">
                        <h2 class="accordion-header">
                            <button class="accordion-button fw-bold bg-white py-4" type="button" data-bs-toggle="collapse" data-bs-target="#module1">
                                Module 1: Introduction to HTML5 & CSS3
                            </button>
                        </h2>
                        <div id="module1" class="accordion-collapse collapse show" data-bs-parent="#courseAccordion">
                            <div class="accordion-body bg-light p-4">
                                <ul class="list-group list-group-flush rounded-3">
                                    <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-bottom border-muted border-opacity-25 px-0 py-3">
                                        <a href="#" class="text-dark text-decoration-none hover-primary"><i class="bi bi-play-circle-fill text-primary me-3 fs-5"></i> Setting up your environment</a>
                                        <span class="text-muted small">15:00</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-bottom border-muted border-opacity-25 px-0 py-3">
                                        <a href="#" class="text-dark text-decoration-none hover-primary"><i class="bi bi-play-circle-fill text-primary me-3 fs-5"></i> HTML5 Structure and Semantic Tags</a>
                                        <span class="text-muted small">22:30</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-0 px-0 py-3">
                                        <a href="#" class="text-dark text-decoration-none hover-primary"><i class="bi bi-file-earmark-code-fill text-danger me-3 fs-5"></i> Coding Exercise: Your First Webpage</a>
                                        <span class="badge bg-secondary rounded-pill">Exercise</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Module 2 -->
                    <div class="accordion-item border-0 mb-3 shadow-sm rounded-4 overflow-hidden">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed fw-bold bg-white py-4" type="button" data-bs-toggle="collapse" data-bs-target="#module2">
                                Module 2: JavaScript Fundamentals
                            </button>
                        </h2>
                        <div id="module2" class="accordion-collapse collapse" data-bs-parent="#courseAccordion">
                            <div class="accordion-body bg-light p-4 text-center">
                                <i class="bi bi-lock-fill fs-3 text-muted mb-2 d-block"></i>
                                <p class="text-muted fw-medium mb-0">Content locked. Please enroll to access this module.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.cursor-pointer { cursor: pointer; }
.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }

/* Custom Accordion Chevron */
.custom-accordion .accordion-button:not(.collapsed) { background-color: var(--bs-white); color: var(--bs-primary); box-shadow: inset 0 -1px 0 rgba(0,0,0,.125); }
.custom-accordion .accordion-button:focus { border-color: transparent; box-shadow: none; }

/* Video Thumbnail Hover */
.video-thumbnail .card-img-top { transition: transform 0.5s ease, opacity 0.5s ease; }
.video-thumbnail .play-btn { transition: transform 0.3s ease; }
.video-thumbnail:hover .card-img-top { transform: scale(1.05); opacity: 0.7 !important; }
.video-thumbnail:hover .play-btn { transform: translate(-50%, -50%) scale(1.1) !important; }
</style>

Custom Admissions Form

PREMIUM

A beautiful multi-section application form for school or university admissions, featuring a split layout with contact information.

Preview

Admissions Fall 2024

Join our community of innovators and leaders. Start your application today.

  • admissions@university.edu
  • +1 (800) 123-4567
  • Deadline: Dec 15, 2023
Personal Information
Academic Information
Code Copy Section
HTML 
<!-- Split Admissions Form -->
<section class="py-5 bg-light">
    <div class="container py-4">
        
        <div class="row g-0 rounded-4 shadow-sm overflow-hidden bg-white">
            <!-- Left: Information Sidebar -->
            <div class="col-lg-4 bg-dark text-white p-5 d-flex flex-column justify-content-between">
                <div>
                    <span class="badge bg-primary text-white rounded-pill px-3 py-2 mb-4 tracking-wide">APPLY NOW</span>
                    <h2 class="fw-bold mb-4">Admissions Fall 2024</h2>
                    <p class="opacity-75 mb-5 lh-lg">Join our community of innovators and leaders. Start your application today to secure your future.</p>
                    
                    <ul class="list-unstyled d-flex flex-column gap-4 opacity-75">
                        <li class="d-flex align-items-center gap-3">
                            <i class="bi bi-envelope fs-4 text-primary"></i>
                            <span>admissions@university.edu</span>
                        </li>
                        <li class="d-flex align-items-center gap-3">
                            <i class="bi bi-telephone fs-4 text-primary"></i>
                            <span>+1 (800) 123-4567</span>
                        </li>
                        <li class="d-flex align-items-center gap-3">
                            <i class="bi bi-clock fs-4 text-primary"></i>
                            <span>Deadline: Dec 15, 2023</span>
                        </li>
                    </ul>
                </div>
                <!-- Decorative Image Background -->
                <div class="mt-5 pt-5 opacity-25" style="background: url('campus-bg.jpg') center/cover no-repeat; height: 150px; border-radius: 1rem;"></div>
            </div>
            
            <!-- Right: Multi-section Form -->
            <div class="col-lg-8 p-4 p-md-5">
                <form class="row g-4 needs-validation" novalidate>
                    
                    <!-- Section 1 -->
                    <h5 class="fw-bold mb-2 text-primary border-bottom pb-2">1. Personal Information</h5>
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-muted">First Name</label>
                        <input type="text" class="form-control bg-light border-0 px-3 py-2" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-muted">Last Name</label>
                        <input type="text" class="form-control bg-light border-0 px-3 py-2" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-muted">Email Address</label>
                        <input type="email" class="form-control bg-light border-0 px-3 py-2" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-muted">Date of Birth</label>
                        <input type="date" class="form-control bg-light border-0 px-3 py-2" required>
                    </div>
                    
                    <!-- Section 2 -->
                    <h5 class="fw-bold mb-2 mt-5 text-primary border-bottom pb-2">2. Academic Information</h5>
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-muted">Program of Interest</label>
                        <select class="form-select bg-light border-0 px-3 py-2" required>
                            <option value="" selected disabled>Select a program...</option>
                            <option>Computer Science (B.S.)</option>
                            <option>Business Administration (B.A.)</option>
                            <option>Graphic Design (B.F.A.)</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-muted">Term</label>
                        <select class="form-select bg-light border-0 px-3 py-2" required>
                            <option value="" selected disabled>Select a term...</option>
                            <option>Fall 2024</option>
                            <option>Spring 2025</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-bold text-muted">Previous High School / College</label>
                        <input type="text" class="form-control bg-light border-0 px-3 py-2" required>
                    </div>
                    
                    <!-- Section 3 -->
                    <h5 class="fw-bold mb-2 mt-5 text-primary border-bottom pb-2">3. Supporting Documents</h5>
                    <div class="col-12">
                        <label class="form-label small fw-bold text-muted">Upload Transcript (PDF only)</label>
                        <input class="form-control bg-light border-0" type="file" accept=".pdf">
                    </div>
                    <div class="col-12">
                        <div class="form-check mt-3">
                            <input class="form-check-input" type="checkbox" value="" id="termsCheck" required>
                            <label class="form-check-label text-muted small" for="termsCheck">
                                I certify that the information provided is accurate and complete to the best of my knowledge.
                            </label>
                        </div>
                    </div>
                    
                    <!-- Submit -->
                    <div class="col-12 mt-5">
                        <button type="submit" class="btn btn-primary px-5 py-3 fw-bold rounded-pill w-100 shadow hover-lift tracking-wide">SUBMIT APPLICATION</button>
                    </div>
                </form>
            </div>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
</style>

Custom Campus Life Gallery

PREMIUM

A beautiful masonry-style masonry or asymmetric grid gallery to showcase campus facilities, student life, and events.

Preview

Life at Campus

Campus
Students
Library
Graduation

Follow Our Story

@university_life

Code Copy Section
HTML 
<!-- Asymmetric Campus Gallery -->
<section class="py-5 bg-dark">
    <div class="container py-4">
        
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide">Gallery</h6>
            <h2 class="display-6 fw-bold text-white mb-0">Life at Campus</h2>
            <p class="text-white opacity-50 mt-3 mx-auto" style="max-width: 600px;">Experience the vibrant culture, world-class facilities, and diverse community that makes our campus truly special.</p>
        </div>
        
        <!-- Asymmetric Grid -->
        <div class="row g-3 g-md-4">
            
            <!-- Row 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="rounded-4 overflow-hidden position-relative h-100 gallery-item">
                    <img src="campus1.jpg" alt="Campus Building" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 280px;">
                    <div class="gallery-overlay position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center">
                        <i class="bi bi-search text-white fs-2"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-8">
                <div class="rounded-4 overflow-hidden position-relative h-100 gallery-item">
                    <img src="campus2.jpg" alt="Students" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 280px;">
                    <div class="gallery-overlay position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center">
                        <i class="bi bi-search text-white fs-2"></i>
                    </div>
                </div>
            </div>
            
            <!-- Row 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="rounded-4 overflow-hidden position-relative h-100 gallery-item">
                    <img src="campus3.jpg" alt="Library" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 280px;">
                    <div class="gallery-overlay position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center">
                        <i class="bi bi-search text-white fs-2"></i>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="rounded-4 overflow-hidden position-relative h-100 gallery-item">
                    <img src="campus4.jpg" alt="Graduation" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 280px;">
                    <div class="gallery-overlay position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center">
                        <i class="bi bi-search text-white fs-2"></i>
                    </div>
                </div>
            </div>
            
            <!-- CTA Block -->
            <div class="col-md-12 col-lg-4">
                <div class="rounded-4 overflow-hidden position-relative h-100 bg-primary d-flex flex-column justify-content-center align-items-center p-5 text-white shadow" style="min-height: 280px;">
                    <i class="bi bi-instagram fs-1 mb-3"></i>
                    <h4 class="fw-bold">Follow Our Story</h4>
                    <p class="opacity-75 mb-4">@university_life</p>
                    <a href="#" class="btn btn-light rounded-pill fw-bold px-4 hover-lift text-primary">Follow Us</a>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }

/* Gallery Hover Effects */
.gallery-item { cursor: pointer; }
.gallery-item img { transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay { background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s ease; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
</style>

Custom School History Section

PREMIUM

A split layout detailing the rich history and heritage of an educational institution with an embedded video or image showcase.

Preview
Our Heritage

A Legacy of Excellence Since 1925

For nearly a century, our institution has been at the forefront of educational innovation, nurturing minds and shaping the leaders of tomorrow.

What started as a small local academy has grown into a globally recognized university. Our commitment to academic rigor, diverse perspectives, and community engagement remains stronger than ever.

98+

Years of History

150k+

Global Alumni

Historic Building

Established

1925

Code Copy Section
HTML 
<!-- School History Section -->
<section class="py-5">
    <div class="container py-4 py-md-5">
        <div class="row g-5 align-items-center">
            
            <!-- Text Content -->
            <div class="col-lg-6">
                <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Our Heritage</h6>
                <h2 class="display-5 fw-bold mb-4">A Legacy of Excellence Since 1925</h2>
                <p class="lead text-muted mb-4">For nearly a century, our institution has been at the forefront of educational innovation, nurturing minds and shaping the leaders of tomorrow.</p>
                <p class="text-muted mb-4 lh-lg">What started as a small local academy has grown into a globally recognized university. Our commitment to academic rigor, diverse perspectives, and community engagement remains stronger than ever.</p>
                
                <!-- Stats Grid -->
                <div class="row g-4 mt-2 border-top pt-4">
                    <div class="col-6">
                        <h3 class="fw-bold text-primary display-6 mb-1">98<span class="fs-4 text-dark">+</span></h3>
                        <p class="text-muted fw-medium text-uppercase small tracking-wide mb-0">Years of History</p>
                    </div>
                    <div class="col-6">
                        <h3 class="fw-bold text-primary display-6 mb-1">150<span class="fs-4 text-dark">k+</span></h3>
                        <p class="text-muted fw-medium text-uppercase small tracking-wide mb-0">Global Alumni</p>
                    </div>
                </div>
            </div>
            
            <!-- Image Showcase -->
            <div class="col-lg-6">
                <div class="position-relative p-3 p-md-4 mt-4 mt-lg-0">
                    <!-- Background Shape -->
                    <div class="position-absolute top-0 end-0 bg-primary opacity-10 rounded-circle" style="width: 80%; height: 80%; z-index: 0;"></div>
                    
                    <!-- Main Image -->
                    <img src="historic-building.jpg" alt="Historic Building" class="img-fluid rounded-4 shadow-lg position-relative z-1" style="border: 10px solid white;">
                    
                    <!-- Floating Badge (Hidden on very small screens) -->
                    <div class="position-absolute bottom-0 start-0 translate-middle-y z-2 ms-n4 d-none d-md-block">
                        <div class="bg-white p-4 rounded-4 shadow-lg text-center border-bottom border-primary border-4 hover-lift">
                            <h5 class="fw-bold mb-0 text-uppercase tracking-wide small text-muted">Established</h5>
                            <p class="text-primary fs-2 fw-bold mb-0">1925</p>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }
</style>

Custom Academic & Teacher Section

PREMIUM

A beautiful grid layout showcasing faculty members with hover effects revealing their social links and academic departments.

Preview
Our Faculty

Meet Our Expert Teachers

Teacher
Dr. Sarah Chen

Computer Science

Teacher
Prof. James Wilson

Mathematics

Teacher
Dr. Elena Rodriguez

Literature

Teacher
Prof. Michael Chang

Physics

Code Copy Section
HTML 
<!-- Faculty Team Section -->
<section class="py-5 bg-light">
    <div class="container py-4">
        
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Our Faculty</h6>
            <h2 class="display-6 fw-bold mb-0">Meet Our Expert Teachers</h2>
        </div>
        
        <div class="row g-4 justify-content-center">
            
            <!-- Teacher 1 -->
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden teacher-card h-100">
                    <div class="position-relative overflow-hidden">
                        <img src="teacher1.jpg" alt="Dr. Sarah Chen" class="card-img-top object-fit-cover" style="height: 320px;">
                        <!-- Dark overlay on hover -->
                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 teacher-overlay z-0"></div>
                        
                        <!-- Social Links -->
                        <div class="teacher-social-overlay position-absolute bottom-0 w-100 p-4 d-flex justify-content-center gap-2 z-1">
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-linkedin text-primary"></i></a>
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-twitter text-primary"></i></a>
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-envelope text-primary"></i></a>
                        </div>
                    </div>
                    <div class="card-body p-4 bg-white z-2 position-relative text-center">
                        <h5 class="fw-bold mb-1">Dr. Sarah Chen</h5>
                        <p class="text-primary small fw-bold text-uppercase mb-0 tracking-wide">Computer Science</p>
                    </div>
                </div>
            </div>
            
            <!-- Teacher 2 -->
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden teacher-card h-100">
                    <div class="position-relative overflow-hidden">
                        <img src="teacher2.jpg" alt="Prof. James Wilson" class="card-img-top object-fit-cover" style="height: 320px;">
                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 teacher-overlay z-0"></div>
                        <div class="teacher-social-overlay position-absolute bottom-0 w-100 p-4 d-flex justify-content-center gap-2 z-1">
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-linkedin text-primary"></i></a>
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-envelope text-primary"></i></a>
                        </div>
                    </div>
                    <div class="card-body p-4 bg-white z-2 position-relative text-center">
                        <h5 class="fw-bold mb-1">Prof. James Wilson</h5>
                        <p class="text-primary small fw-bold text-uppercase mb-0 tracking-wide">Mathematics</p>
                    </div>
                </div>
            </div>
            
            <!-- Teacher 3 -->
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden teacher-card h-100">
                    <div class="position-relative overflow-hidden">
                        <img src="teacher3.jpg" alt="Dr. Elena Rodriguez" class="card-img-top object-fit-cover" style="height: 320px;">
                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 teacher-overlay z-0"></div>
                        <div class="teacher-social-overlay position-absolute bottom-0 w-100 p-4 d-flex justify-content-center gap-2 z-1">
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-linkedin text-primary"></i></a>
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-twitter text-primary"></i></a>
                        </div>
                    </div>
                    <div class="card-body p-4 bg-white z-2 position-relative text-center">
                        <h5 class="fw-bold mb-1">Dr. Elena Rodriguez</h5>
                        <p class="text-primary small fw-bold text-uppercase mb-0 tracking-wide">Literature</p>
                    </div>
                </div>
            </div>
            
            <!-- Teacher 4 -->
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden teacher-card h-100">
                    <div class="position-relative overflow-hidden">
                        <img src="teacher4.jpg" alt="Prof. Michael Chang" class="card-img-top object-fit-cover" style="height: 320px;">
                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 teacher-overlay z-0"></div>
                        <div class="teacher-social-overlay position-absolute bottom-0 w-100 p-4 d-flex justify-content-center gap-2 z-1">
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-linkedin text-primary"></i></a>
                            <a href="#" class="btn btn-light rounded-circle shadow btn-sm social-btn"><i class="bi bi-envelope text-primary"></i></a>
                        </div>
                    </div>
                    <div class="card-body p-4 bg-white z-2 position-relative text-center">
                        <h5 class="fw-bold mb-1">Prof. Michael Chang</h5>
                        <p class="text-primary small fw-bold text-uppercase mb-0 tracking-wide">Physics</p>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }

/* Teacher Card Hover Effects */
.teacher-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.teacher-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }

.teacher-card img { transition: transform 0.5s ease; }
.teacher-card:hover img { transform: scale(1.05); }

.teacher-overlay { transition: opacity 0.3s ease; }
.teacher-card:hover .teacher-overlay { opacity: 0.2; }

/* Social Icons Slide Up */
.teacher-social-overlay { transform: translateY(100%); transition: transform 0.3s ease; }
.teacher-card:hover .teacher-social-overlay { transform: translateY(0); }

/* Individual Icon Hover */
.social-btn { width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; }
.social-btn:hover { background-color: var(--bs-primary); }
.social-btn:hover i { color: white !important; }
</style>

Custom Notice Board Layout

PREMIUM

A clean, organized table layout for displaying important announcements, events, and academic notices with download links.

Preview
Announcements

Important Notices

View Archive
Date Notice Title Department Action
Oct 25, 2023 Revised Exam Schedule for Fall Semester 2023 NEW Academic PDF
Oct 20, 2023 Call for Papers: Annual Science Symposium Research Link
Oct 15, 2023 Campus Library Holiday Hours Announcement Administration View Only
Oct 10, 2023 Scholarship Application Guidelines 2024-2025 Financial Aid PDF
Code Copy Section
HTML 
<!-- Notice Board Table Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-end mb-4">
            <div>
                <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Announcements</h6>
                <h3 class="fw-bold mb-0">Important Notices</h3>
            </div>
            <a href="#" class="btn btn-outline-primary rounded-pill fw-bold px-4 hover-lift d-none d-sm-block">View Archive</a>
        </div>
        
        <!-- Table -->
        <div class="table-responsive bg-white shadow-sm rounded-4 border">
            <table class="table table-hover align-middle mb-0">
                <!-- Table Header -->
                <thead class="table-light">
                    <tr>
                        <th scope="col" class="py-3 px-4 text-muted small text-uppercase tracking-wide border-bottom-0" style="width: 15%;">Date</th>
                        <th scope="col" class="py-3 text-muted small text-uppercase tracking-wide border-bottom-0" style="width: 55%;">Notice Title</th>
                        <th scope="col" class="py-3 text-muted small text-uppercase tracking-wide border-bottom-0" style="width: 15%;">Department</th>
                        <th scope="col" class="py-3 px-4 text-muted small text-uppercase tracking-wide border-bottom-0 text-end" style="width: 15%;">Action</th>
                    </tr>
                </thead>
                
                <!-- Table Body -->
                <tbody class="border-top-0">
                    <!-- Row 1 (Urgent/New) -->
                    <tr>
                        <td class="px-4 py-3">
                            <span class="badge bg-danger-subtle text-danger rounded-pill fw-bold py-2 px-3">Oct 25, 2023</span>
                        </td>
                        <td class="py-3">
                            <a href="#" class="text-dark text-decoration-none fw-bold hover-primary">Revised Exam Schedule for Fall Semester 2023</a>
                            <span class="badge bg-danger ms-2 align-text-top" style="font-size: 0.65em;">NEW</span>
                        </td>
                        <td class="py-3">
                            <span class="text-muted small fw-medium">Academic</span>
                        </td>
                        <td class="px-4 py-3 text-end">
                            <a href="#" class="btn btn-sm btn-light border shadow-sm px-3 hover-primary-btn"><i class="bi bi-download me-1 text-primary"></i> PDF</a>
                        </td>
                    </tr>
                    
                    <!-- Row 2 -->
                    <tr>
                        <td class="px-4 py-3">
                            <span class="badge bg-light text-dark rounded-pill fw-bold border py-2 px-3">Oct 20, 2023</span>
                        </td>
                        <td class="py-3">
                            <a href="#" class="text-dark text-decoration-none fw-bold hover-primary">Call for Papers: Annual Science Symposium</a>
                        </td>
                        <td class="py-3">
                            <span class="text-muted small fw-medium">Research</span>
                        </td>
                        <td class="px-4 py-3 text-end">
                            <a href="#" class="btn btn-sm btn-light border shadow-sm px-3 hover-primary-btn"><i class="bi bi-link-45deg me-1 text-primary"></i> Link</a>
                        </td>
                    </tr>
                    
                    <!-- Row 3 -->
                    <tr>
                        <td class="px-4 py-3">
                            <span class="badge bg-light text-dark rounded-pill fw-bold border py-2 px-3">Oct 15, 2023</span>
                        </td>
                        <td class="py-3">
                            <a href="#" class="text-dark text-decoration-none fw-bold hover-primary">Campus Library Holiday Hours Announcement</a>
                        </td>
                        <td class="py-3">
                            <span class="text-muted small fw-medium">Administration</span>
                        </td>
                        <td class="px-4 py-3 text-end">
                            <span class="text-muted small fst-italic">View Only</span>
                        </td>
                    </tr>
                    
                    <!-- Row 4 -->
                    <tr>
                        <td class="px-4 py-3">
                            <span class="badge bg-light text-dark rounded-pill fw-bold border py-2 px-3">Oct 10, 2023</span>
                        </td>
                        <td class="py-3">
                            <a href="#" class="text-dark text-decoration-none fw-bold hover-primary">Scholarship Application Guidelines 2024-2025</a>
                        </td>
                        <td class="py-3">
                            <span class="text-muted small fw-medium">Financial Aid</span>
                        </td>
                        <td class="px-4 py-3 text-end">
                            <a href="#" class="btn btn-sm btn-light border shadow-sm px-3 hover-primary-btn"><i class="bi bi-download me-1 text-primary"></i> PDF</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- Mobile View All Button -->
        <div class="text-center mt-4 d-sm-none">
            <a href="#" class="btn btn-outline-primary rounded-pill fw-bold px-4 w-100">View Archive</a>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }
.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }

.hover-primary-btn i { transition: color 0.2s ease; }
.hover-primary-btn:hover { background-color: var(--bs-primary); border-color: var(--bs-primary) !important; color: white !important; }
.hover-primary-btn:hover i { color: white !important; }

/* Custom Table Styles */
.table>:not(caption)>*>* { padding: 1rem 0.5rem; }
</style>

Custom Principal/Headmaster Message

PREMIUM

A distinguished quote and message layout featuring a large portrait and signature, ideal for leadership introductions.

Preview
Headmaster

Dr. Robert Sterling

Principal & Chief Administrator

Message from Leadership

Empowering the Next Generation of Thinkers and Leaders

"Education is not just about the accumulation of facts; it is the awakening of curiosity, the nurturing of character, and the development of a lifelong passion for discovery. We strive to create an environment where every student can find their unique voice."

At our institution, we believe in a holistic approach to learning. Our dedicated faculty works tirelessly to ensure that our curriculum not only meets rigorous academic standards but also instills critical thinking, empathy, and resilience. We invite you to join our vibrant community and embark on a transformative educational journey.

Signature
Code Copy Section
HTML 
<!-- Principal Message Section -->
<section class="py-5 bg-light">
    <div class="container py-4">
        
        <div class="row g-0 rounded-4 shadow-sm overflow-hidden bg-white">
            <!-- Portrait -->
            <div class="col-lg-5 position-relative">
                <img src="principal.jpg" alt="Dr. Robert Sterling" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 450px;">
                
                <!-- Gradient Overlay with Name -->
                <div class="position-absolute bottom-0 start-0 w-100 p-4 text-white" style="background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);">
                    <h4 class="fw-bold mb-1">Dr. Robert Sterling</h4>
                    <p class="mb-0 opacity-75 small text-uppercase tracking-wide">Principal & Chief Administrator</p>
                </div>
            </div>
            
            <!-- Message Content -->
            <div class="col-lg-7 p-4 p-md-5 p-xl-6 d-flex flex-column justify-content-center position-relative">
                <!-- Large Decorative Quote Icon -->
                <i class="bi bi-quote position-absolute top-0 end-0 m-4 text-primary opacity-10" style="font-size: 8rem; line-height: 1; z-index: 0;"></i>
                
                <div class="position-relative z-1">
                    <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-3">Message from Leadership</h6>
                    <h3 class="fw-bold mb-4">Empowering the Next Generation of Thinkers and Leaders</h3>
                    
                    <!-- Blockquote -->
                    <div class="fst-italic text-muted mb-4 lead" style="border-left: 4px solid var(--bs-primary); padding-left: 1.5rem;">
                        "Education is not just about the accumulation of facts; it is the awakening of curiosity, the nurturing of character, and the development of a lifelong passion for discovery. We strive to create an environment where every student can find their unique voice."
                    </div>
                    
                    <p class="text-muted mb-5 lh-lg">At our institution, we believe in a holistic approach to learning. Our dedicated faculty works tirelessly to ensure that our curriculum not only meets rigorous academic standards but also instills critical thinking, empathy, and resilience. We invite you to join our vibrant community and embark on a transformative educational journey.</p>
                    
                    <!-- Signature Image -->
                    <div class="mt-auto">
                        <img src="signature.png" alt="Signature" class="opacity-50" style="max-height: 60px; filter: grayscale(100%);">
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
@media (min-width: 1200px) { .p-xl-6 { padding: 4rem!important; } }
</style>

Custom Administrative Staff

PREMIUM

A clean horizontal card layout specifically designed to list administrative staff, heads of departments, or coordinators.

Preview
Administration

Meet Our Staff

Staff
Amanda Clarke

Head of Admissions

Staff
Thomas Weber

Financial Aid Director

Staff
Rachel Green

Student Counselor

Staff
Kevin Martinez

Registrar

Code Copy Section
HTML 
<!-- Administrative Staff Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <!-- Header -->
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Administration</h6>
            <h2 class="display-6 fw-bold mb-0">Meet Our Staff</h2>
        </div>
        
        <!-- Staff Grid -->
        <div class="row g-4 justify-content-center">
            
            <!-- Staff Member 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift bg-light bg-opacity-50">
                    <div class="card-body p-4 d-flex align-items-center gap-4">
                        <img src="staff1.jpg" alt="Amanda Clarke" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 90px; height: 90px;">
                        <div>
                            <h5 class="fw-bold mb-1">Amanda Clarke</h5>
                            <p class="text-primary small fw-bold mb-2">Head of Admissions</p>
                            <div class="d-flex gap-3 mt-2">
                                <a href="mailto:amanda@example.com" class="text-muted hover-primary" aria-label="Email"><i class="bi bi-envelope fs-5"></i></a>
                                <a href="tel:+1234567890" class="text-muted hover-primary" aria-label="Phone"><i class="bi bi-telephone fs-5"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Staff Member 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift bg-light bg-opacity-50">
                    <div class="card-body p-4 d-flex align-items-center gap-4">
                        <img src="staff2.jpg" alt="Thomas Weber" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 90px; height: 90px;">
                        <div>
                            <h5 class="fw-bold mb-1">Thomas Weber</h5>
                            <p class="text-primary small fw-bold mb-2">Financial Aid Director</p>
                            <div class="d-flex gap-3 mt-2">
                                <a href="mailto:thomas@example.com" class="text-muted hover-primary" aria-label="Email"><i class="bi bi-envelope fs-5"></i></a>
                                <a href="tel:+1234567890" class="text-muted hover-primary" aria-label="Phone"><i class="bi bi-telephone fs-5"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Staff Member 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift bg-light bg-opacity-50">
                    <div class="card-body p-4 d-flex align-items-center gap-4">
                        <img src="staff3.jpg" alt="Rachel Green" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 90px; height: 90px;">
                        <div>
                            <h5 class="fw-bold mb-1">Rachel Green</h5>
                            <p class="text-primary small fw-bold mb-2">Student Counselor</p>
                            <div class="d-flex gap-3 mt-2">
                                <a href="mailto:rachel@example.com" class="text-muted hover-primary" aria-label="Email"><i class="bi bi-envelope fs-5"></i></a>
                                <a href="tel:+1234567890" class="text-muted hover-primary" aria-label="Phone"><i class="bi bi-telephone fs-5"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Staff Member 4 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift bg-light bg-opacity-50">
                    <div class="card-body p-4 d-flex align-items-center gap-4">
                        <img src="staff4.jpg" alt="Kevin Martinez" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 90px; height: 90px;">
                        <div>
                            <h5 class="fw-bold mb-1">Kevin Martinez</h5>
                            <p class="text-primary small fw-bold mb-2">Registrar</p>
                            <div class="d-flex gap-3 mt-2">
                                <a href="mailto:kevin@example.com" class="text-muted hover-primary" aria-label="Email"><i class="bi bi-envelope fs-5"></i></a>
                                <a href="tel:+1234567890" class="text-muted hover-primary" aria-label="Phone"><i class="bi bi-telephone fs-5"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }
</style>

Custom Student Feedback Carousel

PREMIUM

A stylish, wide carousel displaying student reviews, success stories, or alumni feedback.

Preview
Student Voices

What Our Students Say

Code Copy Section
HTML 
<!-- Student Feedback Carousel Section -->
<section class="py-5 bg-light">
    <div class="container py-4 position-relative">
        
        <!-- Header -->
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Student Voices</h6>
            <h2 class="display-6 fw-bold mb-0">What Our Students Say</h2>
        </div>
        
        <!-- Bootstrap Carousel -->
        <div id="studentFeedbackCarousel" class="carousel slide" data-bs-ride="carousel">
            
            <!-- Indicators -->
            <div class="carousel-indicators custom-indicators mb-n4">
                <button type="button" data-bs-target="#studentFeedbackCarousel" data-bs-slide-to="0" class="active bg-primary" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#studentFeedbackCarousel" data-bs-slide-to="1" class="bg-primary" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#studentFeedbackCarousel" data-bs-slide-to="2" class="bg-primary" aria-label="Slide 3"></button>
            </div>
            
            <!-- Inner Content -->
            <div class="carousel-inner pb-5">
                
                <!-- Slide 1 -->
                <div class="carousel-item active">
                    <div class="row justify-content-center">
                        <div class="col-lg-8 text-center">
                            <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 mx-2">
                                <!-- Stars -->
                                <div class="text-warning mb-4">
                                    <i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i>
                                </div>
                                <!-- Quote -->
                                <h4 class="fw-bold mb-4">"The best decision I've ever made for my career."</h4>
                                <p class="lead text-muted mb-5 fst-italic">"The hands-on curriculum and incredibly supportive faculty gave me the skills and confidence I needed to transition into tech. Within a month of graduating, I landed my dream job."</p>
                                <!-- User Info -->
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <img src="student1.jpg" alt="Maria Gonzalez" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 70px; height: 70px;">
                                    <div class="text-start">
                                        <h6 class="fw-bold mb-0">Maria Gonzalez</h6>
                                        <span class="small text-muted">Class of 2023, Software Engineering</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 2 -->
                <div class="carousel-item">
                    <div class="row justify-content-center">
                        <div class="col-lg-8 text-center">
                            <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 mx-2">
                                <div class="text-warning mb-4">
                                    <i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-half fs-4"></i>
                                </div>
                                <h4 class="fw-bold mb-4">"A truly transformative experience."</h4>
                                <p class="lead text-muted mb-5 fst-italic">"I came here expecting to just get a degree, but I left with a newfound passion for learning, lifelong friends, and a global network of mentors. The campus life is unbeatable."</p>
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <img src="student2.jpg" alt="David Kim" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 70px; height: 70px;">
                                    <div class="text-start">
                                        <h6 class="fw-bold mb-0">David Kim</h6>
                                        <span class="small text-muted">Class of 2022, Business Administration</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 3 -->
                <div class="carousel-item">
                    <div class="row justify-content-center">
                        <div class="col-lg-8 text-center">
                            <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 mx-2">
                                <div class="text-warning mb-4">
                                    <i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i><i class="bi bi-star-fill fs-4"></i>
                                </div>
                                <h4 class="fw-bold mb-4">"World-class facilities and support."</h4>
                                <p class="lead text-muted mb-5 fst-italic">"The resources available to students here are incredible. From the 24/7 library access to the dedicated career counseling center, I felt supported every step of the way."</p>
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <img src="student3.jpg" alt="Emily Chen" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 70px; height: 70px;">
                                    <div class="text-start">
                                        <h6 class="fw-bold mb-0">Emily Chen</h6>
                                        <span class="small text-muted">Class of 2024, Architecture</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
            <!-- Controls (Hidden on small screens for cleaner look) -->
            <button class="carousel-control-prev d-none d-lg-flex ms-md-4" type="button" data-bs-target="#studentFeedbackCarousel" data-bs-slide="prev" style="width: auto;">
                <span class="btn btn-primary rounded-circle shadow d-flex justify-content-center align-items-center" style="width: 45px; height: 45px;" aria-hidden="true">
                    <i class="bi bi-chevron-left fs-5"></i>
                </span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next d-none d-lg-flex me-md-4" type="button" data-bs-target="#studentFeedbackCarousel" data-bs-slide="next" style="width: auto;">
                <span class="btn btn-primary rounded-circle shadow d-flex justify-content-center align-items-center" style="width: 45px; height: 45px;" aria-hidden="true">
                    <i class="bi bi-chevron-right fs-5"></i>
                </span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        
    </div>
</section>

<!-- Include Bootstrap JS for Carousel if not already included -->
<!--  -->

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }

/* Customizing Carousel Indicators */
.custom-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}
.custom-indicators .active {
    opacity: 1;
}

/* Hover effects for controls */
.carousel-control-prev .btn, .carousel-control-next .btn {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.carousel-control-prev:hover .btn, .carousel-control-next:hover .btn {
    transform: scale(1.1);
    background-color: var(--bs-primary-dark, #0b5ed7); /* slightly darker primary */
}
</style>

Custom Student Result Search

PREMIUM

A dedicated search interface for students to securely check their academic results using Student ID and Department.

Preview

Check Exam Results

Fall Semester 2023

Forgot Student ID?
Code Copy Section
HTML 
<!-- Result Search Section -->
<section class="py-5 bg-primary bg-opacity-10">
    <div class="container py-4 py-md-5">
        
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                
                <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                    <!-- Header -->
                    <div class="bg-primary p-4 p-md-5 text-center text-white position-relative overflow-hidden">
                        <!-- Decorative bg icon -->
                        <i class="bi bi-award-fill position-absolute top-50 start-50 translate-middle text-white opacity-10" style="font-size: 15rem; z-index: 0;"></i>
                        
                        <div class="position-relative z-1">
                            <i class="bi bi-award fs-1 mb-2 d-block"></i>
                            <h2 class="fw-bold mb-1">Check Exam Results</h2>
                            <p class="mb-0 opacity-75 tracking-wide text-uppercase small fw-bold">Fall Semester 2023</p>
                        </div>
                    </div>
                    
                    <!-- Form -->
                    <div class="card-body p-4 p-md-5 bg-white">
                        <form class="row g-4 needs-validation" novalidate>
                            
                            <div class="col-12">
                                <label class="form-label small fw-bold text-muted text-uppercase tracking-wide">Student ID / Registration No.</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-person-badge"></i></span>
                                    <input type="text" class="form-control bg-light border-start-0 ps-0" placeholder="e.g. STU-2023-456" required>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase tracking-wide">Department</label>
                                <select class="form-select form-select-lg bg-light" required>
                                    <option value="" selected disabled>Select...</option>
                                    <option>Computer Science</option>
                                    <option>Business Admin</option>
                                    <option>Engineering</option>
                                    <option>Arts & Humanities</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase tracking-wide">Year / Semester</label>
                                <select class="form-select form-select-lg bg-light" required>
                                    <option value="" selected disabled>Select...</option>
                                    <option>1st Year - Sem 1</option>
                                    <option>1st Year - Sem 2</option>
                                    <option>2nd Year - Sem 1</option>
                                    <option>2nd Year - Sem 2</option>
                                </select>
                            </div>
                            
                            <div class="col-12 mt-5">
                                <button type="submit" class="btn btn-primary w-100 py-3 fw-bold rounded-pill shadow hover-lift fs-5 tracking-wide">SEARCH RESULT</button>
                            </div>
                            
                            <div class="col-12 text-center mt-3">
                                <a href="#" class="text-muted small text-decoration-none hover-primary"><i class="bi bi-question-circle me-1"></i> Forgot Student ID? Contact Admin</a>
                            </div>
                            
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }

/* Focus styles for input group */
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
    border-color: var(--bs-primary) !important;
    box-shadow: none;
}
.input-group:focus-within .input-group-text i {
    color: var(--bs-primary);
}
</style>

Custom Last Year Result Section

PREMIUM

A statistics and highlight board showcasing the academic achievements and passing rates of the previous graduating class.

Preview
Excellence in Action

Class of 2023 Results

98%

Overall Pass Rate

45%

Distinctions (A+)

92%

Employed within 6mo

15

National Awards

View Full Result Breakdown

Download the complete academic performance report for 2022-2023.

Download PDF
Code Copy Section
HTML 
<!-- Result Statistics Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <!-- Header -->
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Excellence in Action</h6>
            <h2 class="display-6 fw-bold mb-0">Class of 2023 Results</h2>
        </div>
        
        <!-- Stat Cards -->
        <div class="row g-4 justify-content-center mb-5">
            <!-- Stat 1 -->
            <div class="col-sm-6 col-md-3">
                <div class="p-4 p-md-5 bg-light rounded-4 shadow-sm border border-light h-100 text-center hover-lift">
                    <i class="bi bi-graph-up-arrow fs-1 text-success mb-3 d-block"></i>
                    <h2 class="display-4 fw-bold text-dark mb-0">98%</h2>
                    <p class="text-muted fw-bold text-uppercase small tracking-wide mb-0 mt-3">Overall Pass Rate</p>
                </div>
            </div>
            
            <!-- Stat 2 -->
            <div class="col-sm-6 col-md-3">
                <div class="p-4 p-md-5 bg-light rounded-4 shadow-sm border border-light h-100 text-center hover-lift">
                    <i class="bi bi-star-fill fs-1 text-warning mb-3 d-block"></i>
                    <h2 class="display-4 fw-bold text-dark mb-0">45%</h2>
                    <p class="text-muted fw-bold text-uppercase small tracking-wide mb-0 mt-3">Distinctions (A+)</p>
                </div>
            </div>
            
            <!-- Stat 3 -->
            <div class="col-sm-6 col-md-3">
                <div class="p-4 p-md-5 bg-light rounded-4 shadow-sm border border-light h-100 text-center hover-lift">
                    <i class="bi bi-briefcase-fill fs-1 text-primary mb-3 d-block"></i>
                    <h2 class="display-4 fw-bold text-dark mb-0">92%</h2>
                    <p class="text-muted fw-bold text-uppercase small tracking-wide mb-0 mt-3">Employed within 6mo</p>
                </div>
            </div>
            
            <!-- Stat 4 -->
            <div class="col-sm-6 col-md-3">
                <div class="p-4 p-md-5 bg-light rounded-4 shadow-sm border border-light h-100 text-center hover-lift">
                    <i class="bi bi-trophy-fill fs-1 text-danger mb-3 d-block"></i>
                    <h2 class="display-4 fw-bold text-dark mb-0">15</h2>
                    <p class="text-muted fw-bold text-uppercase small tracking-wide mb-0 mt-3">National Awards</p>
                </div>
            </div>
        </div>
        
        <!-- Download CTA -->
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="card border-0 bg-primary text-white rounded-4 shadow-sm p-4 p-md-5 position-relative overflow-hidden">
                    <!-- Bg decorative element -->
                    <div class="position-absolute top-0 end-0 h-100 bg-white opacity-10" style="width: 30%; transform: skewX(-15deg) translateX(50%);"></div>
                    
                    <div class="d-flex flex-column flex-md-row align-items-center justify-content-between text-center text-md-start gap-4 position-relative z-1">
                        <div>
                            <h3 class="fw-bold mb-2">View Full Result Breakdown</h3>
                            <p class="mb-0 opacity-75 lead">Download the complete academic performance report for the 2022-2023 academic year.</p>
                        </div>
                        <a href="#" class="btn btn-light text-primary fw-bold rounded-pill px-5 py-3 flex-shrink-0 shadow hover-lift"><i class="bi bi-download me-2"></i> Download PDF</a>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }
</style>

Custom Academic Calendar Layout

PREMIUM

A clear, structured list or grid view for important academic dates, holidays, and semester schedules.

Preview
Schedule

Academic Calendar 2024

SEP 05
Orientation
Fall Semester Begins

Classes commence for all undergraduate and graduate programs.

OCT 15
Exams
Mid-Term Examinations

Mid-term exam week starts. Check department notice board for schedule.

NOV 23
Holiday
Thanksgiving Break

Campus closed. No classes held. Library operates on holiday hours.

DEC 10
Exams
Final Examinations

Fall semester final exams begin. Mandatory attendance.

DEC 20
Event
Winter Commencement

Graduation ceremony for Fall graduates at the main stadium.

DEC 22
Holiday
Winter Break Begins

Campus closes for winter holidays. Dormitories must be vacated.

Code Copy Section
HTML 
<!-- Academic Calendar Grid -->
<section class="py-5 bg-light">
    <div class="container py-4">
        
        <!-- Header & Filters -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end mb-5 gap-3">
            <div>
                <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Schedule</h6>
                <h2 class="display-6 fw-bold mb-0">Academic Calendar 2024</h2>
            </div>
            
            <!-- Term Filters -->
            <div class="d-flex gap-2 overflow-auto pb-2 pb-md-0">
                <button class="btn btn-primary rounded-pill fw-bold px-4 flex-shrink-0 shadow-sm">Fall Semester</button>
                <button class="btn btn-outline-dark rounded-pill fw-bold px-4 flex-shrink-0 bg-white">Spring Semester</button>
                <button class="btn btn-outline-dark rounded-pill fw-bold px-4 flex-shrink-0 bg-white">Summer Term</button>
            </div>
        </div>
        
        <!-- Calendar Grid -->
        <div class="row g-4">
            
            <!-- Event Card 1 (Academic) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden">
                    <div class="d-flex h-100">
                        <!-- Date Block -->
                        <div class="bg-primary text-white d-flex flex-column justify-content-center align-items-center p-3 text-center flex-shrink-0" style="width: 90px;">
                            <span class="fs-5 fw-bold mb-n1 tracking-wide">SEP</span>
                            <span class="display-5 fw-bold">05</span>
                        </div>
                        <!-- Content -->
                        <div class="card-body p-4">
                            <span class="badge bg-success-subtle text-success mb-2 px-2 py-1 rounded-1">Orientation</span>
                            <h5 class="fw-bold mb-2"><a href="#" class="text-dark text-decoration-none hover-primary">Fall Semester Begins</a></h5>
                            <p class="text-muted small mb-0 lh-base">Classes commence for all undergraduate and graduate programs.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Event Card 2 (Exams) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden">
                    <div class="d-flex h-100">
                        <div class="bg-primary text-white d-flex flex-column justify-content-center align-items-center p-3 text-center flex-shrink-0" style="width: 90px;">
                            <span class="fs-5 fw-bold mb-n1 tracking-wide">OCT</span>
                            <span class="display-5 fw-bold">15</span>
                        </div>
                        <div class="card-body p-4">
                            <span class="badge bg-danger-subtle text-danger mb-2 px-2 py-1 rounded-1">Examinations</span>
                            <h5 class="fw-bold mb-2"><a href="#" class="text-dark text-decoration-none hover-primary">Mid-Term Exams</a></h5>
                            <p class="text-muted small mb-0 lh-base">Mid-term exam week starts. Check department notice board for schedule.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Event Card 3 (Holiday) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden">
                    <div class="d-flex h-100">
                        <!-- Grey color for holidays -->
                        <div class="bg-secondary text-white d-flex flex-column justify-content-center align-items-center p-3 text-center flex-shrink-0" style="width: 90px;">
                            <span class="fs-5 fw-bold mb-n1 tracking-wide">NOV</span>
                            <span class="display-5 fw-bold">23</span>
                        </div>
                        <div class="card-body p-4">
                            <span class="badge bg-warning-subtle text-warning mb-2 px-2 py-1 rounded-1">Holiday</span>
                            <h5 class="fw-bold mb-2"><a href="#" class="text-dark text-decoration-none hover-primary">Thanksgiving Break</a></h5>
                            <p class="text-muted small mb-0 lh-base">Campus closed. No classes held. Library operates on holiday hours.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Event Card 4 (Exams) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden">
                    <div class="d-flex h-100">
                        <div class="bg-primary text-white d-flex flex-column justify-content-center align-items-center p-3 text-center flex-shrink-0" style="width: 90px;">
                            <span class="fs-5 fw-bold mb-n1 tracking-wide">DEC</span>
                            <span class="display-5 fw-bold">10</span>
                        </div>
                        <div class="card-body p-4">
                            <span class="badge bg-danger-subtle text-danger mb-2 px-2 py-1 rounded-1">Examinations</span>
                            <h5 class="fw-bold mb-2"><a href="#" class="text-dark text-decoration-none hover-primary">Final Examinations</a></h5>
                            <p class="text-muted small mb-0 lh-base">Fall semester final exams begin. Mandatory attendance required.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Event Card 5 (Event) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden">
                    <div class="d-flex h-100">
                        <!-- Info color for events -->
                        <div class="bg-info text-white d-flex flex-column justify-content-center align-items-center p-3 text-center flex-shrink-0" style="width: 90px;">
                            <span class="fs-5 fw-bold mb-n1 tracking-wide">DEC</span>
                            <span class="display-5 fw-bold">20</span>
                        </div>
                        <div class="card-body p-4">
                            <span class="badge bg-info-subtle text-info mb-2 px-2 py-1 rounded-1">Event</span>
                            <h5 class="fw-bold mb-2"><a href="#" class="text-dark text-decoration-none hover-primary">Winter Commencement</a></h5>
                            <p class="text-muted small mb-0 lh-base">Graduation ceremony for Fall graduates at the main campus stadium.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Event Card 6 (Holiday) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden">
                    <div class="d-flex h-100">
                        <div class="bg-secondary text-white d-flex flex-column justify-content-center align-items-center p-3 text-center flex-shrink-0" style="width: 90px;">
                            <span class="fs-5 fw-bold mb-n1 tracking-wide">DEC</span>
                            <span class="display-5 fw-bold">22</span>
                        </div>
                        <div class="card-body p-4">
                            <span class="badge bg-warning-subtle text-warning mb-2 px-2 py-1 rounded-1">Holiday</span>
                            <h5 class="fw-bold mb-2"><a href="#" class="text-dark text-decoration-none hover-primary">Winter Break Begins</a></h5>
                            <p class="text-muted small mb-0 lh-base">Campus closes for winter holidays. Dormitories must be vacated by noon.</p>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="text-center mt-5">
            <a href="#" class="btn btn-outline-dark rounded-pill fw-bold px-5 py-2 hover-primary-btn"><i class="bi bi-download me-2"></i> Download Full Calendar PDF</a>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }
.hover-primary-btn { transition: all 0.3s ease; }
.hover-primary-btn:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: white; }
</style>

Custom Brief Intro & Objective

PREMIUM

A sleek, personal introductory section perfect for the top of a portfolio or digital resume, featuring a bio, quick stats, and primary actions.

Preview
AVAILABLE FOR HIRE

Hi, I'm Alex Chen.

Senior Full-Stack Developer

I build pixel-perfect, engaging, and accessible digital experiences. With over 8 years of expertise in creating scalable web applications, I help businesses turn complex problems into elegant solutions.

View Projects Download Resume

8+

Years Exp.

50+

Projects

20+

Clients

Alex Chen
Code Copy Section
HTML 
<!-- Portfolio Intro Section -->
<section class="py-5 overflow-hidden">
    <div class="container py-4 py-md-5">
        <div class="row g-5 align-items-center">
            
            <!-- Text Content -->
            <div class="col-lg-5 order-2 order-lg-1">
                <div class="d-inline-block px-3 py-1 bg-primary bg-opacity-10 text-primary rounded-pill fw-bold small tracking-wide mb-3">
                    AVAILABLE FOR HIRE
                </div>
                <h1 class="display-4 fw-bold mb-3">Hi, I'm <span class="text-primary">Alex Chen</span>.</h1>
                <h3 class="fw-medium text-muted mb-4 h4">Senior Full-Stack Developer</h3>
                <p class="lead text-muted mb-4 fs-6 lh-lg">I build pixel-perfect, engaging, and accessible digital experiences. With over 8 years of expertise in creating scalable web applications, I help businesses turn complex problems into elegant solutions.</p>
                
                <!-- CTA Buttons -->
                <div class="d-flex flex-wrap gap-3 mb-5">
                    <a href="#projects" class="btn btn-primary rounded-pill px-4 py-2 fw-bold shadow hover-lift">View Projects</a>
                    <a href="#resume" class="btn btn-outline-dark rounded-pill px-4 py-2 fw-bold hover-lift">Download Resume</a>
                </div>
                
                <!-- Stats -->
                <div class="row g-4 pt-4 border-top">
                    <div class="col-4">
                        <h3 class="fw-bold mb-0">8<span class="text-primary">+</span></h3>
                        <p class="text-muted fw-bold text-uppercase mb-0 tracking-wide" style="font-size: 0.65rem;">Years Exp.</p>
                    </div>
                    <div class="col-4">
                        <h3 class="fw-bold mb-0">50<span class="text-primary">+</span></h3>
                        <p class="text-muted fw-bold text-uppercase mb-0 tracking-wide" style="font-size: 0.65rem;">Projects</p>
                    </div>
                    <div class="col-4">
                        <h3 class="fw-bold mb-0">20<span class="text-primary">+</span></h3>
                        <p class="text-muted fw-bold text-uppercase mb-0 tracking-wide" style="font-size: 0.65rem;">Clients</p>
                    </div>
                </div>
            </div>
            
            <!-- Image/Visual -->
            <div class="col-lg-6 offset-lg-1 order-1 order-lg-2">
                <div class="position-relative p-3 p-md-4">
                    <!-- Decorative Background Blob -->
                    <div class="position-absolute top-50 start-50 translate-middle bg-primary rounded-circle opacity-25 z-0" style="width: 110%; height: 110%; filter: blur(50px);"></div>
                    
                    <!-- Profile Image Container -->
                    <div class="position-relative z-1 rounded-4 overflow-hidden border border-4 border-white shadow-lg profile-img-wrapper">
                        <img src="profile.jpg" alt="Alex Chen" class="img-fluid w-100 object-fit-cover" style="aspect-ratio: 4/5;">
                    </div>
                    
                    <!-- Floating Badge (Hidden on very small screens) -->
                    <div class="position-absolute top-0 end-0 mt-5 me-n2 z-2 bg-white rounded-circle shadow p-3 hover-lift d-none d-md-block">
                        <i class="bi bi-code-slash fs-2 text-primary"></i>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }

.profile-img-wrapper {
    transform: rotate(3deg);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.profile-img-wrapper:hover {
    transform: rotate(0deg) scale(1.02);
}
</style>

Custom Tech Stack & Skills

PREMIUM

A structured grid displaying technical skills categorized by domain, using stylish tags and icons instead of generic progress bars.

Preview
My Toolbox

Technologies & Skills

Frontend

React.js Vue.js TypeScript Tailwind CSS Bootstrap Next.js Framer Motion

Backend

Node.js Python / Django PostgreSQL MongoDB GraphQL REST APIs Redis

Tools & Deploy

Git & GitHub Docker AWS Vercel Figma Jest CI/CD
Code Copy Section
HTML 
<!-- Skills Section -->
<section class="py-5 bg-light">
    <div class="container py-4">
        
        <!-- Section Header -->
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">My Toolbox</h6>
            <h2 class="display-6 fw-bold mb-0">Technologies & Skills</h2>
        </div>
        
        <div class="row g-4 text-start">
            
            <!-- Category 1: Frontend -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift">
                    <div class="card-body p-4 p-md-5">
                        <!-- Icon & Title -->
                        <div class="d-flex align-items-center gap-3 mb-4">
                            <div class="bg-primary bg-opacity-10 text-primary rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                <i class="bi bi-window-sidebar fs-4"></i>
                            </div>
                            <h4 class="fw-bold mb-0">Frontend</h4>
                        </div>
                        <!-- Tags -->
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">React.js</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Vue.js</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">TypeScript</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Tailwind CSS</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Bootstrap</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Next.js</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Category 2: Backend -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift">
                    <div class="card-body p-4 p-md-5">
                        <div class="d-flex align-items-center gap-3 mb-4">
                            <div class="bg-success bg-opacity-10 text-success rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                <i class="bi bi-server fs-4"></i>
                            </div>
                            <h4 class="fw-bold mb-0">Backend</h4>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Node.js</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Python / Django</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">PostgreSQL</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">MongoDB</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">GraphQL</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">REST APIs</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Category 3: Tools & Deploy -->
            <div class="col-md-6 col-lg-4 offset-md-3 offset-lg-0">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift">
                    <div class="card-body p-4 p-md-5">
                        <div class="d-flex align-items-center gap-3 mb-4">
                            <div class="bg-danger bg-opacity-10 text-danger rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                <i class="bi bi-tools fs-4"></i>
                            </div>
                            <h4 class="fw-bold mb-0">Tools & Deploy</h4>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Git & GitHub</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Docker</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">AWS</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Vercel</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">Figma</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium skill-tag">CI/CD</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }

.skill-tag { transition: all 0.2s ease; cursor: default; }
.skill-tag:hover { background-color: var(--bs-primary) !important; color: white !important; border-color: var(--bs-primary) !important; transform: scale(1.05); }
</style>

Custom Experience Timeline

PREMIUM

A sleek vertical timeline displaying work history, roles, companies, and achievements, perfect for a resume.

Preview
My Journey

Work Experience

Senior Software Engineer

2021 - Present
TechNova Solutions · San Francisco, CA
  • Led the front-end transition from Vue 2 to Vue 3, improving overall application performance by 35%.
  • Mentored a team of 4 junior developers, establishing code review guidelines and best practices.
  • Architected a scalable micro-frontend solution for the company's flagship enterprise dashboard.

Full-Stack Developer

2018 - 2021
Creative Digital Agency · New York, NY
  • Developed and maintained multiple e-commerce platforms using React and Node.js, processing + annually.
  • Integrated third-party payment gateways (Stripe, PayPal) and built custom inventory management systems.

Junior Web Developer

2016 - 2018
Startup Incubator · Boston, MA
  • Built responsive landing pages and marketing websites using HTML, CSS, JavaScript, and Bootstrap.
  • Assisted in database design and wrote RESTful API endpoints for internal tools.
Code Copy Section
HTML 
<!-- Work Experience Timeline -->
<section class="py-5 bg-white">
    <div class="container py-4" style="max-width: 900px;">
        
        <!-- Header -->
        <div class="mb-5 text-center text-md-start">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">My Journey</h6>
            <h2 class="display-6 fw-bold mb-0">Work Experience</h2>
        </div>
        
        <!-- Timeline Container -->
        <div class="position-relative ms-3 ms-md-4">
            
            <!-- Continuous Vertical Line -->
            <div class="position-absolute top-0 bottom-0 border-start border-2 border-primary opacity-25" style="left: 0; transform: translateX(-1px); z-index: 0; margin-left: 11px;"></div>
            
            <!-- Job Item 1 (Current) -->
            <div class="position-relative mb-5 ps-4 ps-md-5 hover-timeline-item">
                <!-- Timeline Dot (Filled) -->
                <div class="position-absolute top-0 start-0 translate-middle-x bg-primary border border-4 border-white rounded-circle z-1 timeline-dot" style="width: 24px; height: 24px; left: 11px !important;"></div>
                
                <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 timeline-card">
                    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center mb-3 gap-2">
                        <h4 class="fw-bold mb-0">Senior Software Engineer</h4>
                        <span class="badge bg-primary text-white px-3 py-2 fw-medium rounded-pill align-self-start align-self-lg-center">2021 - Present</span>
                    </div>
                    <h6 class="text-primary fw-bold mb-4"><i class="bi bi-building me-2"></i>TechNova Solutions · San Francisco, CA</h6>
                    <ul class="text-muted lh-lg mb-0 ps-3">
                        <li class="mb-2">Led the front-end transition from Vue 2 to Vue 3, improving overall application performance by 35%.</li>
                        <li class="mb-2">Mentored a team of 4 junior developers, establishing code review guidelines and best practices.</li>
                        <li>Architected a scalable micro-frontend solution for the company's flagship enterprise dashboard.</li>
                    </ul>
                </div>
            </div>
            
            <!-- Job Item 2 -->
            <div class="position-relative mb-5 ps-4 ps-md-5 hover-timeline-item">
                <!-- Timeline Dot (Outline) -->
                <div class="position-absolute top-0 start-0 translate-middle-x bg-white border border-4 border-primary rounded-circle z-1 timeline-dot" style="width: 24px; height: 24px; left: 11px !important;"></div>
                
                <div class="card border border-light shadow-none rounded-4 p-4 p-md-5 timeline-card bg-light bg-opacity-50">
                    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center mb-3 gap-2">
                        <h4 class="fw-bold mb-0">Full-Stack Developer</h4>
                        <span class="badge bg-white border text-dark px-3 py-2 fw-medium rounded-pill align-self-start align-self-lg-center">2018 - 2021</span>
                    </div>
                    <h6 class="text-primary fw-bold mb-4"><i class="bi bi-building me-2"></i>Creative Digital Agency · New York, NY</h6>
                    <ul class="text-muted lh-lg mb-0 ps-3">
                        <li class="mb-2">Developed and maintained multiple e-commerce platforms using React and Node.js, processing + annually.</li>
                        <li>Integrated third-party payment gateways (Stripe, PayPal) and built custom inventory management systems.</li>
                    </ul>
                </div>
            </div>
            
            <!-- Job Item 3 -->
            <div class="position-relative ps-4 ps-md-5 hover-timeline-item">
                <!-- Timeline Dot (Outline) -->
                <div class="position-absolute top-0 start-0 translate-middle-x bg-white border border-4 border-primary rounded-circle z-1 timeline-dot" style="width: 24px; height: 24px; left: 11px !important;"></div>
                
                <div class="card border border-light shadow-none rounded-4 p-4 p-md-5 timeline-card bg-light bg-opacity-50">
                    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center mb-3 gap-2">
                        <h4 class="fw-bold mb-0">Junior Web Developer</h4>
                        <span class="badge bg-white border text-dark px-3 py-2 fw-medium rounded-pill align-self-start align-self-lg-center">2016 - 2018</span>
                    </div>
                    <h6 class="text-primary fw-bold mb-4"><i class="bi bi-building me-2"></i>Startup Incubator · Boston, MA</h6>
                    <ul class="text-muted lh-lg mb-0 ps-3">
                        <li class="mb-2">Built responsive landing pages and marketing websites using HTML, CSS, JavaScript, and Bootstrap.</li>
                        <li>Assisted in database design and wrote RESTful API endpoints for internal tools.</li>
                    </ul>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }

.timeline-dot { transition: background-color 0.3s ease, transform 0.3s ease; }
.timeline-card { transition: box-shadow 0.3s ease, transform 0.3s ease; }

.hover-timeline-item:hover .timeline-dot {
    background-color: var(--bs-primary) !important;
    transform: translateX(-50%) scale(1.2) !important;
}
.hover-timeline-item:hover .timeline-card {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1)!important;
    transform: translateY(-3px);
}
</style>

Custom Project Grid View

PREMIUM

A stunning portfolio grid with beautiful hover effects revealing project details and action buttons.

Preview
Portfolio

Selected Works

Project
Web App

Fintech Dashboard

Project
E-Commerce

Aura Fashion Store

Project
Mobile App

Fitness Tracker OS

Project
SaaS Platform

Cloud Storage API

Project
Corporate

Global Logistics Rebrand

View All 50+ Projects

Code Copy Section
HTML 
<!-- Portfolio Grid Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <!-- Header -->
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Portfolio</h6>
            <h2 class="display-6 fw-bold mb-0">Selected Works</h2>
        </div>
        
        <!-- Filters -->
        <div class="d-flex justify-content-center gap-2 mb-5 flex-wrap">
            <button class="btn btn-dark rounded-pill px-4 fw-medium shadow-sm">All</button>
            <button class="btn btn-outline-secondary rounded-pill px-4 fw-medium border-light text-dark bg-light hover-primary-btn">Web Design</button>
            <button class="btn btn-outline-secondary rounded-pill px-4 fw-medium border-light text-dark bg-light hover-primary-btn">App Dev</button>
            <button class="btn btn-outline-secondary rounded-pill px-4 fw-medium border-light text-dark bg-light hover-primary-btn">Branding</button>
        </div>
        
        <!-- Grid -->
        <div class="row g-4">
            
            <!-- Item 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 rounded-4 overflow-hidden shadow-sm portfolio-card position-relative">
                    <img src="project1.jpg" alt="Fintech Dashboard" class="img-fluid w-100 object-fit-cover portfolio-img" style="height: 320px;">
                    
                    <!-- Hover Overlay -->
                    <div class="portfolio-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center p-4 text-center">
                        <div class="portfolio-content">
                            <span class="badge bg-primary mb-3 px-3 py-2 rounded-pill tracking-wide">Web App</span>
                            <h4 class="text-white fw-bold mb-4">Fintech Dashboard</h4>
                            <div class="d-flex gap-3 justify-content-center">
                                <a href="#" class="btn btn-light rounded-circle shadow-sm hover-lift d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;" aria-label="Live Link"><i class="bi bi-link-45deg fs-4 text-primary"></i></a>
                                <a href="#" class="btn btn-light rounded-circle shadow-sm hover-lift d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;" aria-label="GitHub"><i class="bi bi-github fs-4 text-dark"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Item 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 rounded-4 overflow-hidden shadow-sm portfolio-card position-relative">
                    <img src="project2.jpg" alt="Aura Fashion Store" class="img-fluid w-100 object-fit-cover portfolio-img" style="height: 320px;">
                    <div class="portfolio-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center p-4 text-center">
                        <div class="portfolio-content">
                            <span class="badge bg-success mb-3 px-3 py-2 rounded-pill tracking-wide">E-Commerce</span>
                            <h4 class="text-white fw-bold mb-4">Aura Fashion Store</h4>
                            <div class="d-flex gap-3 justify-content-center">
                                <a href="#" class="btn btn-light rounded-circle shadow-sm hover-lift d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;" aria-label="Live Link"><i class="bi bi-link-45deg fs-4 text-success"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Item 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 rounded-4 overflow-hidden shadow-sm portfolio-card position-relative">
                    <img src="project3.jpg" alt="Fitness Tracker OS" class="img-fluid w-100 object-fit-cover portfolio-img" style="height: 320px;">
                    <div class="portfolio-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center p-4 text-center">
                        <div class="portfolio-content">
                            <span class="badge bg-warning text-dark mb-3 px-3 py-2 rounded-pill tracking-wide">Mobile App</span>
                            <h4 class="text-white fw-bold mb-4">Fitness Tracker OS</h4>
                            <div class="d-flex gap-3 justify-content-center">
                                <a href="#" class="btn btn-light rounded-circle shadow-sm hover-lift d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;" aria-label="Live Link"><i class="bi bi-link-45deg fs-4 text-warning"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- View All Card -->
            <div class="col-md-6 col-lg-4 d-none d-md-block">
                <div class="card border-0 rounded-4 overflow-hidden shadow-sm portfolio-card position-relative bg-primary d-flex align-items-center justify-content-center hover-lift" style="height: 320px; cursor: pointer;">
                    <div class="text-white text-center">
                        <div class="bg-white bg-opacity-25 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-arrow-right fs-1"></i>
                        </div>
                        <h4 class="fw-bold mb-0">View All Projects</h4>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }

.hover-primary-btn { transition: all 0.3s ease; }
.hover-primary-btn:hover { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: white !important; }

/* Portfolio Card Hover Effects */
.portfolio-card { cursor: pointer; }
.portfolio-img { transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
.portfolio-card:hover .portfolio-img { transform: scale(1.1); }

.portfolio-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }

.portfolio-content {
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.portfolio-card:hover .portfolio-content {
    transform: translateY(0);
    opacity: 1;
}
</style>

Custom Pricing & Packages Tables

PREMIUM

A clear, comparative pricing table highlighting a recommended tier, ideal for freelance service offerings or SaaS.

Preview
Services

Freelance Packages

Starter

Perfect for small businesses needing a simple online presence.

  • Custom 5-page Website
  • Responsive Design
  • Basic SEO Setup
  • E-Commerce Integration
  • Priority Support
Choose Starter
MOST POPULAR
Professional

Comprehensive solution for growing brands and stores.

  • Custom 10-page Website
  • Advanced Animations
  • Full SEO Optimization
  • E-Commerce Setup (10 prods)
  • 1 Month Free Support
Choose Professional
Enterprise

+

Custom built web applications tailored to your business needs.

  • Unlimited Pages
  • Custom Backend Database
  • User Authentication
  • Unlimited E-Commerce
  • 24/7 Priority Support
Contact For Quote
Code Copy Section
HTML 
<!-- Pricing Packages Section -->
<section class="py-5 bg-light">
    <div class="container py-4 py-md-5">
        
        <!-- Header -->
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Services</h6>
            <h2 class="display-6 fw-bold mb-0">Freelance Packages</h2>
        </div>
        
        <!-- Pricing Grid -->
        <div class="row g-4 justify-content-center align-items-lg-center">
            
            <!-- Basic Tier -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift bg-white">
                    <div class="card-body p-4 p-md-5 d-flex flex-column text-start">
                        <h5 class="fw-bold text-muted mb-2 text-uppercase tracking-wide small">Starter</h5>
                        <h2 class="display-4 fw-bold text-dark mb-4"></h2>
                        <p class="text-muted mb-4 pb-3 border-bottom">Perfect for small businesses needing a simple online presence.</p>
                        
                        <ul class="list-unstyled mb-5 flex-grow-1">
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">Custom 5-page Website</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">Responsive Design</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">Basic SEO Setup</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2 text-muted opacity-50"><i class="bi bi-dash-circle mt-1"></i> <span>E-Commerce Integration</span></li>
                            <li class="d-flex align-items-start gap-2 text-muted opacity-50"><i class="bi bi-dash-circle mt-1"></i> <span>Priority Support</span></li>
                        </ul>
                        
                        <a href="#" class="btn btn-outline-dark rounded-pill py-3 fw-bold w-100">Choose Starter</a>
                    </div>
                </div>
            </div>
            
            <!-- Pro Tier (Highlighted) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-lg rounded-4 h-100 hover-lift bg-primary text-white position-relative pricing-featured" style="z-index: 1;">
                    <!-- Badge -->
                    <div class="position-absolute top-0 start-50 translate-middle-x bg-warning text-dark px-4 py-1 rounded-bottom-3 fw-bold small tracking-wide shadow-sm">MOST POPULAR</div>
                    
                    <div class="card-body p-4 p-md-5 d-flex flex-column text-start mt-3">
                        <h5 class="fw-bold text-white-50 mb-2 text-uppercase tracking-wide small">Professional</h5>
                        <h2 class="display-4 fw-bold text-white mb-4"></h2>
                        <p class="text-white-50 mb-4 pb-3 border-bottom border-light border-opacity-25">Comprehensive solution for growing brands and stores.</p>
                        
                        <ul class="list-unstyled mb-5 flex-grow-1">
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-warning mt-1"></i> <span class="fw-medium">Custom 10-page Website</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-warning mt-1"></i> <span class="fw-medium">Advanced Animations</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-warning mt-1"></i> <span class="fw-medium">Full SEO Optimization</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-warning mt-1"></i> <span class="fw-medium">E-Commerce Setup (10 prods)</span></li>
                            <li class="d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-warning mt-1"></i> <span class="fw-medium">1 Month Free Support</span></li>
                        </ul>
                        
                        <a href="#" class="btn btn-light text-primary rounded-pill py-3 fw-bold w-100 shadow">Choose Professional</a>
                    </div>
                </div>
            </div>
            
            <!-- Enterprise Tier -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift bg-white">
                    <div class="card-body p-4 p-md-5 d-flex flex-column text-start">
                        <h5 class="fw-bold text-muted mb-2 text-uppercase tracking-wide small">Enterprise</h5>
                        <h2 class="display-4 fw-bold text-dark mb-4"><span class="fs-4 text-muted">+</span></h2>
                        <p class="text-muted mb-4 pb-3 border-bottom">Custom built web applications tailored to your business needs.</p>
                        
                        <ul class="list-unstyled mb-5 flex-grow-1">
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">Unlimited Pages</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">Custom Backend Database</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">User Authentication</span></li>
                            <li class="mb-3 d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">Unlimited E-Commerce</span></li>
                            <li class="d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i> <span class="fw-medium">24/7 Priority Support</span></li>
                        </ul>
                        
                        <a href="#" class="btn btn-outline-dark rounded-pill py-3 fw-bold w-100">Contact For Quote</a>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }

/* Desktop scale for featured card */
@media (min-width: 992px) {
    .pricing-featured { transform: scale(1.05); }
    .pricing-featured:hover { transform: scale(1.08) translateY(-5px); }
}
</style>

Custom Freelance Availability Status

PREMIUM

A clear call-to-action banner indicating current availability for taking on new projects.

Preview
Available for Work

Let's Build Something Amazing Together

I'm currently taking on new projects for Q4 2023. If you have an exciting idea or need help scaling your platform, let's talk!

hello@example.com Schedule a Call
Code Copy Section
HTML 
<!-- Availability CTA Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-lg-9 col-xl-8 text-center">
                
                <div class="card border-0 bg-primary bg-opacity-10 rounded-4 shadow-sm p-4 p-md-5 p-xl-6 position-relative overflow-hidden">
                    <!-- Background decorative icon -->
                    <i class="bi bi-chat-quote-fill position-absolute top-50 start-50 translate-middle text-primary opacity-10" style="font-size: 15rem; z-index: 0;"></i>
                    
                    <div class="position-relative z-1">
                        <!-- Pulsing Status Badge -->
                        <div class="d-inline-flex align-items-center gap-2 bg-white px-4 py-2 rounded-pill shadow-sm mx-auto mb-4">
                            <div class="spinner-grow text-success" style="width: 0.8rem; height: 0.8rem;" role="status">
                                <span class="visually-hidden">Available</span>
                            </div>
                            <span class="fw-bold text-dark small tracking-wide text-uppercase">Available for Work</span>
                        </div>
                        
                        <h2 class="display-5 fw-bold text-dark mb-4">Let's Build Something Amazing Together</h2>
                        <p class="lead text-muted mb-5 lh-base px-md-4">I'm currently taking on new projects. If you have an exciting idea or need help scaling your platform, I'd love to hear about it!</p>
                        
                        <div class="d-flex justify-content-center gap-3 flex-column flex-sm-row">
                            <a href="mailto:hello@example.com" class="btn btn-primary rounded-pill py-3 px-5 fw-bold shadow hover-lift">
                                <i class="bi bi-envelope me-2"></i> hello@example.com
                            </a>
                            <a href="#" class="btn btn-outline-dark rounded-pill py-3 px-5 fw-bold hover-lift bg-white">
                                Schedule a Call
                            </a>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
</style>

Custom What I Do Section

PREMIUM

A beautiful icon-box layout to showcase core competencies and service offerings.

Preview
Services

What I Do

UI/UX Design

Creating intuitive, user-centric interfaces that not only look beautiful but also provide seamless and engaging user experiences.

Web Development

Building responsive, fast, and accessible web applications using modern frameworks like React, Next.js, and Tailwind CSS.

Mobile App Dev

Developing cross-platform mobile applications with React Native, ensuring high performance across iOS and Android devices.

Code Copy Section
HTML 
<!-- Services / What I Do Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Services</h6>
            <h2 class="display-6 fw-bold mb-0">What I Do</h2>
        </div>
        
        <div class="row g-4">
            <!-- Service 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 p-4 p-md-5 text-start hover-lift bg-light bg-opacity-50">
                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-4 shadow-sm" style="width: 60px; height: 60px;">
                        <i class="bi bi-window-sidebar fs-3"></i>
                    </div>
                    <h4 class="fw-bold mb-3">UI/UX Design</h4>
                    <p class="text-muted mb-0 lh-lg">Creating intuitive, user-centric interfaces that not only look beautiful but also provide seamless and engaging user experiences.</p>
                </div>
            </div>
            
            <!-- Service 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 p-4 p-md-5 text-start hover-lift bg-light bg-opacity-50">
                    <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center mb-4 shadow-sm" style="width: 60px; height: 60px;">
                        <i class="bi bi-code-slash fs-3"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Web Development</h4>
                    <p class="text-muted mb-0 lh-lg">Building responsive, fast, and accessible web applications using modern frameworks like React, Next.js, and Tailwind CSS.</p>
                </div>
            </div>
            
            <!-- Service 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 p-4 p-md-5 text-start hover-lift bg-light bg-opacity-50">
                    <div class="bg-warning text-dark rounded-circle d-flex align-items-center justify-content-center mb-4 shadow-sm" style="width: 60px; height: 60px;">
                        <i class="bi bi-phone fs-3"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Mobile App Dev</h4>
                    <p class="text-muted mb-0 lh-lg">Developing cross-platform mobile applications with React Native, ensuring high performance across iOS and Android devices.</p>
                </div>
            </div>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }
</style>

Custom Featured Project Case Study

PREMIUM

A large, split-layout highlight section detailing a flagship project's context, role, and results.

Preview
Featured Work

Case Study

Project Mockup
SaaS App 2023

Streamline CRM Dashboard

A comprehensive customer relationship management tool designed for enterprise sales teams. Built from scratch to handle millions of records with real-time syncing and advanced analytics.

Role

Lead Frontend Engineer

Tech Stack

React, Redux, Tailwind, Node

Read Full Case Study
Code Copy Section
HTML 
<!-- Featured Project / Case Study Section -->
<section class="py-5 bg-light">
    <div class="container py-4 py-md-5">
        
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Featured Work</h6>
            <h2 class="display-6 fw-bold mb-0">Case Study</h2>
        </div>
        
        <!-- Split Layout Card -->
        <div class="row g-0 rounded-4 shadow-lg overflow-hidden bg-white hover-lift">
            
            <!-- Visual / Image -->
            <div class="col-lg-6 position-relative">
                <img src="project-showcase.jpg" alt="Streamline CRM" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 400px;">
                <!-- Overlay -->
                <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25 z-0"></div>
                
                <!-- Video Play Button (Optional) -->
                <div class="position-absolute top-50 start-50 translate-middle z-1">
                    <a href="#" class="btn btn-light rounded-circle shadow-lg d-flex align-items-center justify-content-center hover-lift" style="width: 80px; height: 80px;" aria-label="Play Demo">
                        <i class="bi bi-play-fill fs-1 text-primary ms-1"></i>
                    </a>
                </div>
            </div>
            
            <!-- Text Content -->
            <div class="col-lg-6 p-4 p-md-5 p-xl-6 d-flex flex-column justify-content-center">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <span class="badge bg-primary px-3 py-2 rounded-pill tracking-wide">SaaS App</span>
                    <span class="text-muted small fw-medium">2023</span>
                </div>
                
                <h3 class="display-6 fw-bold mb-4">Streamline CRM Dashboard</h3>
                <p class="text-muted mb-4 lh-lg fs-5">A comprehensive customer relationship management tool designed for enterprise sales teams. Built from scratch to handle millions of records with real-time syncing and advanced analytics.</p>
                
                <!-- Details Grid -->
                <div class="row g-4 mb-5 border-start border-4 border-primary ps-3">
                    <div class="col-sm-6">
                        <h6 class="fw-bold text-dark text-uppercase tracking-wide small mb-2">Role</h6>
                        <p class="text-muted mb-0">Lead Frontend Engineer</p>
                    </div>
                    <div class="col-sm-6">
                        <h6 class="fw-bold text-dark text-uppercase tracking-wide small mb-2">Tech Stack</h6>
                        <p class="text-muted mb-0">React, Redux, Tailwind, Node</p>
                    </div>
                </div>
                
                <!-- Action -->
                <div class="mt-auto">
                    <a href="#" class="btn btn-outline-dark rounded-pill px-4 py-3 fw-bold hover-primary-btn w-100 w-sm-auto">Read Full Case Study <i class="bi bi-arrow-right ms-2"></i></a>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.15)!important; }

.hover-primary-btn { transition: all 0.3s ease; }
.hover-primary-btn:hover { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: white !important; }

@media (min-width: 1200px) { .p-xl-6 { padding: 4rem!important; } }
</style>

Custom Latest Posts / Blog Grid

PREMIUM

A stylish blog post grid featuring image thumbnails, tags, and reading time, suitable for a developer's tech blog.

Preview
Insights

Latest Articles

Blog Post
Web Dev
Oct 24, 2023 5 min read

The Future of React Server Components

An in-depth look at how React Server Components are changing the way we build and render web applications...

Read Article
Blog Post
Design
Oct 18, 2023 4 min read

Mastering Color Theory in UI

Learn how to select the perfect color palette for your next project and understand the psychology behind color choices...

Read Article
Blog Post
Career
Oct 12, 2023 7 min read

How to Ace the Technical Interview

A comprehensive guide covering common algorithms, system design questions, and behavioral preparation tips...

Read Article
Code Copy Section
HTML 
<!-- Blog / Insights Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <!-- Header -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end mb-5 gap-4">
            <div class="text-center text-md-start">
                <h6 class="text-primary fw-bold text-uppercase tracking-wide mb-2">Insights</h6>
                <h2 class="display-6 fw-bold mb-0">Latest Articles</h2>
            </div>
            <div class="text-center">
                <a href="#" class="btn btn-outline-dark rounded-pill px-4 py-2 fw-bold hover-primary-btn">View All Posts</a>
            </div>
        </div>
        
        <!-- Blog Grid -->
        <div class="row g-4">
            
            <!-- Post 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift overflow-hidden bg-light bg-opacity-50 blog-card">
                    <!-- Thumbnail -->
                    <div class="position-relative overflow-hidden" style="height: 220px;">
                        <img src="blog1.jpg" alt="Blog Image" class="img-fluid w-100 h-100 object-fit-cover blog-img">
                        <div class="position-absolute top-0 start-0 m-3 badge bg-primary px-3 py-2 rounded-pill tracking-wide shadow-sm">Web Dev</div>
                    </div>
                    
                    <!-- Content -->
                    <div class="card-body p-4 d-flex flex-column">
                        <!-- Meta -->
                        <div class="d-flex align-items-center text-muted small fw-medium mb-3 gap-3">
                            <span><i class="bi bi-calendar3 me-1"></i> Oct 24, 2023</span>
                            <span><i class="bi bi-clock me-1"></i> 5 min read</span>
                        </div>
                        
                        <!-- Title -->
                        <h4 class="fw-bold mb-3"><a href="#" class="text-dark text-decoration-none hover-primary stretched-link">The Future of React Server Components</a></h4>
                        
                        <!-- Excerpt -->
                        <p class="text-muted mb-4 line-clamp-2">An in-depth look at how React Server Components are changing the way we build and render web applications, improving performance and developer experience.</p>
                        
                        <!-- Read More link (styled, but functionality handled by stretched-link) -->
                        <span class="fw-bold text-primary mt-auto align-self-start position-relative" style="z-index: 2;">Read Article <i class="bi bi-arrow-right ms-1"></i></span>
                    </div>
                </div>
            </div>
            
            <!-- Post 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift overflow-hidden bg-light bg-opacity-50 blog-card">
                    <div class="position-relative overflow-hidden" style="height: 220px;">
                        <img src="blog2.jpg" alt="Blog Image" class="img-fluid w-100 h-100 object-fit-cover blog-img">
                        <div class="position-absolute top-0 start-0 m-3 badge bg-success px-3 py-2 rounded-pill tracking-wide shadow-sm">Design</div>
                    </div>
                    <div class="card-body p-4 d-flex flex-column">
                        <div class="d-flex align-items-center text-muted small fw-medium mb-3 gap-3">
                            <span><i class="bi bi-calendar3 me-1"></i> Oct 18, 2023</span>
                            <span><i class="bi bi-clock me-1"></i> 4 min read</span>
                        </div>
                        <h4 class="fw-bold mb-3"><a href="#" class="text-dark text-decoration-none hover-primary stretched-link">Mastering Color Theory in UI</a></h4>
                        <p class="text-muted mb-4 line-clamp-2">Learn how to select the perfect color palette for your next project and understand the psychology behind color choices to drive user engagement.</p>
                        <span class="fw-bold text-primary mt-auto align-self-start position-relative" style="z-index: 2;">Read Article <i class="bi bi-arrow-right ms-1"></i></span>
                    </div>
                </div>
            </div>
            
            <!-- Post 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border border-light shadow-sm rounded-4 h-100 hover-lift overflow-hidden bg-light bg-opacity-50 blog-card">
                    <div class="position-relative overflow-hidden" style="height: 220px;">
                        <img src="blog3.jpg" alt="Blog Image" class="img-fluid w-100 h-100 object-fit-cover blog-img">
                        <div class="position-absolute top-0 start-0 m-3 badge bg-warning text-dark px-3 py-2 rounded-pill tracking-wide shadow-sm">Career</div>
                    </div>
                    <div class="card-body p-4 d-flex flex-column">
                        <div class="d-flex align-items-center text-muted small fw-medium mb-3 gap-3">
                            <span><i class="bi bi-calendar3 me-1"></i> Oct 12, 2023</span>
                            <span><i class="bi bi-clock me-1"></i> 7 min read</span>
                        </div>
                        <h4 class="fw-bold mb-3"><a href="#" class="text-dark text-decoration-none hover-primary stretched-link">How to Ace the Technical Interview</a></h4>
                        <p class="text-muted mb-4 line-clamp-2">A comprehensive guide covering common algorithms, system design questions, and behavioral preparation tips to land your dream job.</p>
                        <span class="fw-bold text-primary mt-auto align-self-start position-relative" style="z-index: 2;">Read Article <i class="bi bi-arrow-right ms-1"></i></span>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }

.hover-primary { transition: color 0.2s ease; }
.hover-primary:hover { color: var(--bs-primary) !important; }

.hover-primary-btn { transition: all 0.3s ease; }
.hover-primary-btn:hover { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: white !important; }

/* Image zoom effect on hover */
.blog-card:hover .blog-img { transform: scale(1.08); }
.blog-img { transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }

/* Limit lines for excerpt */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
</style>

Custom Download CV Button

NEW

A highly stylized floating or hero-placed download button with hover animations.

Preview
Download Resume
Code Copy Section
HTML 
<!-- Download CV Button -->
<a href="resume.pdf" download class="btn btn-primary btn-lg rounded-pill px-5 py-3 fw-bold shadow hover-lift d-inline-flex align-items-center gap-2 group-hover-animate">
    <i class="bi bi-cloud-arrow-down fs-4 animate-bounce-down"></i>
    Download Resume
</a>

<!-- CSS -->
<style>
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }

/* Icon bounce animation on button hover */
.group-hover-animate:hover .animate-bounce-down {
    animation: bounceDown 1s infinite;
}
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}
</style>

Custom Certifications & Awards

NEW

A grid to showcase certificates and awards with badge styling.

Preview

Certifications & Awards

AWS Certified Developer

Amazon Web Services (2024)

Best UI/UX Design

CSS Design Awards (2023)

Code Copy Section
HTML 
<!-- Certifications Grid -->
<section class="py-5 bg-dark text-white">
    <div class="container py-4 text-center">
        <h3 class="fw-bold mb-5 font-serif">Certifications & Awards</h3>
        
        <div class="row justify-content-center g-4 text-start">
            <!-- Award 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card bg-white text-dark border-0 shadow-sm rounded-4 h-100 hover-lift">
                    <div class="card-body p-4 d-flex align-items-center gap-3">
                        <div class="bg-primary bg-opacity-10 text-primary rounded-circle p-3">
                            <i class="bi bi-award-fill fs-3"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1">AWS Certified Developer</h6>
                            <p class="text-muted small mb-0">Amazon Web Services (2024)</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Award 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="card bg-white text-dark border-0 shadow-sm rounded-4 h-100 hover-lift">
                    <div class="card-body p-4 d-flex align-items-center gap-3">
                        <div class="bg-warning bg-opacity-10 text-warning rounded-circle p-3">
                            <i class="bi bi-trophy-fill fs-3"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1">Best UI/UX Design</h6>
                            <p class="text-muted small mb-0">CSS Design Awards (2023)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.font-serif { font-family: "Playfair Display", Georgia, serif; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }
</style>

Custom Project Details Modal Popup

NEW

A beautifully designed Bootstrap modal specifically tailored for showcasing portfolio project case studies.

Preview
Code Copy Section
HTML 
<!-- Project Details Modal Trigger -->
<button type="button" class="btn btn-dark rounded-pill px-4 py-2 fw-bold hover-lift" data-bs-toggle="modal" data-bs-target="#projectModal">
    View Case Study
</button>

<!-- Project Details Modal -->
<div class="modal fade" id="projectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
        <div class="modal-content border-0 rounded-4 overflow-hidden">
            
            <!-- Modal Header (Hero) -->
            <div class="position-relative bg-dark text-white p-5 text-center overflow-hidden flex-shrink-0">
                <!-- Background Image with Overlay -->
                <div class="position-absolute top-0 start-0 w-100 h-100 opacity-25" style="background-image: url('hero-bg.jpg'); background-size: cover; background-position: center;"></div>
                
                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-4 z-3" data-bs-dismiss="modal" aria-label="Close"></button>
                
                <div class="position-relative z-1 py-4 py-md-5">
                    <span class="badge bg-primary mb-3 px-3 py-2">E-Commerce</span>
                    <h2 class="fw-bold font-serif display-5 mb-0">NexStore Redesign</h2>
                </div>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body p-4 p-md-5">
                <div class="row g-5">
                    
                    <!-- Left Column: Content -->
                    <div class="col-lg-8">
                        <h4 class="fw-bold mb-3">Project Overview</h4>
                        <p class="text-muted lh-lg mb-4">A complete ground-up redesign of the NexStore e-commerce platform. The goal was to modernize the user interface, optimize the checkout flow, and improve overall conversion rates across mobile and desktop devices.</p>
                        
                        <!-- Image Grid -->
                        <div class="row g-4 mt-2">
                            <div class="col-sm-6">
                                <img src="mockup1.jpg" alt="Mockup" class="img-fluid rounded-3 shadow-sm hover-lift">
                            </div>
                            <div class="col-sm-6">
                                <img src="mockup2.jpg" alt="Mockup" class="img-fluid rounded-3 shadow-sm hover-lift">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Right Column: Meta Info -->
                    <div class="col-lg-4">
                        <div class="bg-light rounded-4 p-4 sticky-top" style="top: 20px;">
                            <h5 class="fw-bold mb-4 border-bottom pb-2">Project Info</h5>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-3">
                                    <span class="d-block text-muted small fw-bold text-uppercase">Client</span>
                                    <span class="fw-medium">NexStore Inc.</span>
                                </li>
                                <li class="mb-3">
                                    <span class="d-block text-muted small fw-bold text-uppercase">Date</span>
                                    <span class="fw-medium">October 2023</span>
                                </li>
                                <li class="mb-0">
                                    <span class="d-block text-muted small fw-bold text-uppercase">Role</span>
                                    <span class="fw-medium">Lead UI/UX Designer</span>
                                </li>
                            </ul>
                            
                            <h5 class="fw-bold mb-3 border-bottom pb-2">Technologies</h5>
                            <div class="d-flex flex-wrap gap-2 mb-4">
                                <span class="badge bg-secondary">Figma</span>
                                <span class="badge bg-secondary">React</span>
                                <span class="badge bg-secondary">Bootstrap 5</span>
                            </div>
                            
                            <a href="#" class="btn btn-primary w-100 rounded-pill py-2 fw-bold hover-lift">View Live Site <i class="bi bi-box-arrow-up-right ms-1"></i></a>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
    </div>
</div>

<!-- CSS -->
<style>
.font-serif { font-family: "Playfair Display", Georgia, serif; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
</style>

Custom Special Dishes Section

PREMIUM

A vibrant grid layout to highlight popular menu items with price tags and order buttons.

Preview
Our Signature

Special Dishes

.99
Dish
(120)

Smoked BBQ Ribs

Slow-cooked tender pork ribs glazed in our house-made hickory smoke barbecue sauce, served with coleslaw.

Order Now
.50
Chef's Choice
Dish
(340)

Power Veggie Bowl

Quinoa, roasted sweet potatoes, avocado, kale, and toasted chickpeas with a lemon-tahini dressing.

Order Now
.99
Dish
(85)

Classic Margherita

Wood-fired pizza topped with San Marzano tomato sauce, fresh mozzarella, basil, and extra virgin olive oil.

Order Now
Code Copy Section
HTML 
<!-- Special Dishes Section -->
<section class="py-5 bg-white">
    <div class="container py-4">
        
        <div class="text-center mb-5">
            <h6 class="text-danger fw-bold text-uppercase tracking-wide mb-2">Our Signature</h6>
            <h2 class="display-6 fw-bold mb-0 font-serif">Special Dishes</h2>
        </div>
        
        <div class="row g-4">
            <!-- Dish 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden position-relative">
                    <!-- Price Badge -->
                    <div class="position-absolute top-0 end-0 m-3 z-1">
                        <span class="badge bg-danger rounded-pill px-3 py-2 fs-6 shadow">.99</span>
                    </div>
                    
                    <!-- Image -->
                    <div class="overflow-hidden" style="height: 240px;">
                        <img src="dish1.jpg" alt="Smoked BBQ Ribs" class="img-fluid w-100 h-100 object-fit-cover dish-img">
                    </div>
                    
                    <!-- Content -->
                    <div class="card-body p-4 p-xl-5 d-flex flex-column">
                        <!-- Stars -->
                        <div class="d-flex align-items-center mb-3 gap-1 text-warning small">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                            <span class="text-muted ms-2">(120)</span>
                        </div>
                        
                        <h4 class="fw-bold mb-3 font-serif">Smoked BBQ Ribs</h4>
                        <p class="text-muted mb-4 pb-2">Slow-cooked tender pork ribs glazed in our house-made hickory smoke barbecue sauce, served with coleslaw.</p>
                        
                        <a href="#" class="btn btn-outline-danger rounded-pill fw-bold w-100 mt-auto py-2 hover-danger-fill">Order Now</a>
                    </div>
                </div>
            </div>
            
            <!-- Dish 2 (Featured) -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden position-relative">
                    <!-- Price Badge -->
                    <div class="position-absolute top-0 end-0 m-3 z-1">
                        <span class="badge bg-danger rounded-pill px-3 py-2 fs-6 shadow">.50</span>
                    </div>
                    <!-- Featured Badge -->
                    <div class="position-absolute top-0 start-0 m-3 z-1">
                        <span class="badge bg-warning text-dark rounded-pill px-3 py-2 fw-bold shadow">Chef's Choice</span>
                    </div>
                    
                    <div class="overflow-hidden" style="height: 240px;">
                        <img src="dish2.jpg" alt="Power Veggie Bowl" class="img-fluid w-100 h-100 object-fit-cover dish-img">
                    </div>
                    
                    <div class="card-body p-4 p-xl-5 d-flex flex-column">
                        <div class="d-flex align-items-center mb-3 gap-1 text-warning small">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                            <span class="text-muted ms-2">(340)</span>
                        </div>
                        
                        <h4 class="fw-bold mb-3 font-serif">Power Veggie Bowl</h4>
                        <p class="text-muted mb-4 pb-2">Quinoa, roasted sweet potatoes, avocado, kale, and toasted chickpeas with a lemon-tahini dressing.</p>
                        
                        <a href="#" class="btn btn-danger rounded-pill fw-bold w-100 mt-auto py-2 shadow-sm hover-lift">Order Now</a>
                    </div>
                </div>
            </div>
            
            <!-- Dish 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift overflow-hidden position-relative">
                    <div class="position-absolute top-0 end-0 m-3 z-1">
                        <span class="badge bg-danger rounded-pill px-3 py-2 fs-6 shadow">.99</span>
                    </div>
                    
                    <div class="overflow-hidden" style="height: 240px;">
                        <img src="dish3.jpg" alt="Classic Margherita" class="img-fluid w-100 h-100 object-fit-cover dish-img">
                    </div>
                    
                    <div class="card-body p-4 p-xl-5 d-flex flex-column">
                        <div class="d-flex align-items-center mb-3 gap-1 text-warning small">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i>
                            <span class="text-muted ms-2">(85)</span>
                        </div>
                        
                        <h4 class="fw-bold mb-3 font-serif">Classic Margherita</h4>
                        <p class="text-muted mb-4 pb-2">Wood-fired pizza topped with San Marzano tomato sauce, fresh mozzarella, basil, and extra virgin olive oil.</p>
                        
                        <a href="#" class="btn btn-outline-danger rounded-pill fw-bold w-100 mt-auto py-2 hover-danger-fill">Order Now</a>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.font-serif { font-family: "Playfair Display", Georgia, serif; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }

.dish-img { transition: transform 0.5s ease; }
.card:hover .dish-img { transform: scale(1.1); }

.hover-danger-fill { transition: all 0.3s ease; }
.hover-danger-fill:hover { background-color: var(--bs-danger); color: white; }
</style>

Custom Restaurant Menu Layout

PREMIUM

A full-page menu structure with category sidebar navigation and detailed menu item rows.

Preview
Discover

Our Menu

Categories

Starters

Item
Crispy Calamari New
.50

Lightly breaded and fried calamari rings served with house-made marinara sauce and a lemon wedge.

Item
Bruschetta
.99

Toasted artisanal bread topped with diced tomatoes, garlic, fresh basil, and a balsamic glaze.

Code Copy Section
HTML 
<!-- Full Menu Section -->
<section class="py-5 bg-light">
    <div class="container py-4">
        
        <div class="text-center mb-5">
            <h6 class="text-danger fw-bold text-uppercase tracking-wide mb-2">Discover</h6>
            <h2 class="display-6 fw-bold mb-0 font-serif">Our Menu</h2>
        </div>
        
        <div class="row g-4 g-xl-5">
            
            <!-- Sidebar Menu Categories -->
            <div class="col-lg-4 col-xl-3">
                <div class="card border-0 shadow-sm rounded-4 sticky-lg-top" style="top: 100px; z-index: 10;">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4 border-bottom pb-3 font-serif">Categories</h5>
                        <div class="d-flex flex-column gap-2">
                            <button class="btn btn-danger text-start fw-bold rounded-3 py-3 px-4 transition-all">Starters <span class="badge bg-white text-danger float-end mt-1">4</span></button>
                            <button class="btn btn-light text-start fw-medium rounded-3 py-3 px-4 border-0 hover-primary-light transition-all">Main Courses <span class="badge bg-secondary float-end mt-1">8</span></button>
                            <button class="btn btn-light text-start fw-medium rounded-3 py-3 px-4 border-0 hover-primary-light transition-all">Pizzas <span class="badge bg-secondary float-end mt-1">6</span></button>
                            <button class="btn btn-light text-start fw-medium rounded-3 py-3 px-4 border-0 hover-primary-light transition-all">Desserts <span class="badge bg-secondary float-end mt-1">5</span></button>
                            <button class="btn btn-light text-start fw-medium rounded-3 py-3 px-4 border-0 hover-primary-light transition-all">Drinks <span class="badge bg-secondary float-end mt-1">12</span></button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Menu Items List -->
            <div class="col-lg-8 col-xl-9">
                <h3 class="fw-bold mb-4 font-serif text-danger border-bottom pb-2 d-inline-block">Starters</h3>
                
                <div class="d-flex flex-column gap-4 mt-3">
                    
                    <!-- Item 1 -->
                    <div class="card border border-light shadow-sm rounded-4 hover-lift bg-white menu-item-card">
                        <div class="row g-0 align-items-center p-3 p-md-4">
                            <!-- Image -->
                            <div class="col-sm-3 col-md-2 text-center text-sm-start mb-3 mb-sm-0">
                                <img src="menu1.jpg" alt="Crispy Calamari" class="img-fluid rounded-circle object-fit-cover shadow-sm mx-auto d-block menu-img" style="width: 100px; height: 100px;">
                            </div>
                            <!-- Content -->
                            <div class="col-sm-9 col-md-10">
                                <div class="card-body py-0 pe-0">
                                    <div class="d-flex justify-content-between align-items-center mb-1 flex-wrap gap-2">
                                        <h5 class="fw-bold mb-0 font-serif fs-4">Crispy Calamari <span class="badge bg-success ms-2 fs-6 px-2 align-middle">New</span></h5>
                                        <h4 class="fw-bold text-danger mb-0">.50</h4>
                                    </div>
                                    <!-- Dotted separator -->
                                    <div class="w-100 border-bottom border-dashed border-secondary border-opacity-25 my-3"></div>
                                    
                                    <p class="text-muted mb-0 lh-lg">Lightly breaded and fried calamari rings served with house-made marinara sauce and a lemon wedge.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Item 2 -->
                    <div class="card border border-light shadow-sm rounded-4 hover-lift bg-white menu-item-card">
                        <div class="row g-0 align-items-center p-3 p-md-4">
                            <div class="col-sm-3 col-md-2 text-center text-sm-start mb-3 mb-sm-0">
                                <img src="menu2.jpg" alt="Bruschetta" class="img-fluid rounded-circle object-fit-cover shadow-sm mx-auto d-block menu-img" style="width: 100px; height: 100px;">
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <div class="card-body py-0 pe-0">
                                    <div class="d-flex justify-content-between align-items-center mb-1 flex-wrap gap-2">
                                        <h5 class="fw-bold mb-0 font-serif fs-4">Bruschetta <i class="bi bi-tree-fill text-success ms-2 fs-5" title="Vegan" data-bs-toggle="tooltip"></i></h5>
                                        <h4 class="fw-bold text-danger mb-0">.99</h4>
                                    </div>
                                    <div class="w-100 border-bottom border-dashed border-secondary border-opacity-25 my-3"></div>
                                    <p class="text-muted mb-0 lh-lg">Toasted artisanal bread topped with diced tomatoes, garlic, fresh basil, and a balsamic glaze.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                
                <!-- Load More -->
                <div class="text-center mt-5">
                    <button class="btn btn-outline-danger rounded-pill px-5 py-2 fw-bold">Load More Items</button>
                </div>
                
            </div>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.font-serif { font-family: "Playfair Display", Georgia, serif; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1)!important; }

.hover-primary-light { transition: all 0.2s ease; }
.hover-primary-light:hover { background-color: rgba(220, 53, 69, 0.1) !important; color: var(--bs-danger) !important; }

.border-dashed { border-style: dashed !important; }

.menu-item-card { cursor: pointer; }
.menu-img { transition: transform 0.4s ease; }
.menu-item-card:hover .menu-img { transform: scale(1.1) rotate(5deg); }
</style>

Custom Chef's Recommendation (Carousel)

PREMIUM

A full-width carousel featuring large, appetizing food imagery, chef details, and call-to-actions.

Preview
Code Copy Section
HTML 
<!-- Chef's Recommendation Carousel Section -->
<section class="bg-dark py-5 overflow-hidden position-relative">
    <!-- Optional background pattern -->
    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10" style="background-image: url('pattern.png'); background-size: cover;"></div>

    <div id="chefCarousel" class="carousel slide carousel-fade position-relative z-1" data-bs-ride="carousel">
        
        <!-- Indicators -->
        <div class="carousel-indicators mb-0 pb-3">
            <button type="button" data-bs-target="#chefCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#chefCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#chefCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        
        <div class="carousel-inner">
            <!-- Slide 1 -->
            <div class="carousel-item active" data-bs-interval="6000">
                <div class="container py-4 py-md-5">
                    <div class="row g-5 align-items-center">
                        
                        <!-- Text Content -->
                        <div class="col-lg-5 offset-lg-1 order-2 order-lg-1 text-center text-lg-start z-1">
                            <h6 class="text-warning fw-bold text-uppercase tracking-wide mb-3">Chef's Pick of the Week</h6>
                            <h1 class="display-4 fw-bold text-white mb-4 font-serif">Truffle Mushroom Risotto</h1>
                            <p class="lead text-light opacity-75 mb-4 pb-2 fs-6 lh-lg">Arborio rice slowly cooked in wild mushroom broth, finished with aged Parmigiano-Reggiano, fresh herbs, and a drizzle of white truffle oil.</p>
                            
                            <!-- Chef Info & Price -->
                            <div class="d-flex align-items-center justify-content-center justify-content-lg-start gap-4 mb-5">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="chef.jpg" alt="Chef Mario" class="rounded-circle border border-2 border-warning" style="width: 50px; height: 50px; object-fit: cover;">
                                    <div class="text-start">
                                        <h6 class="text-white mb-0 fw-bold font-serif">Chef Mario</h6>
                                        <small class="text-warning">Head Chef</small>
                                    </div>
                                </div>
                                <div class="vr bg-light opacity-25" style="height: 40px;"></div>
                                <h3 class="text-white mb-0 fw-bold"><span class="fs-6 text-white-50">.00</span></h3>
                            </div>
                            
                            <!-- Buttons -->
                            <div class="d-flex gap-3 justify-content-center justify-content-lg-start">
                                <a href="#order" class="btn btn-warning rounded-pill px-4 py-2 fw-bold text-dark hover-lift">Order Now</a>
                                <a href="#menu" class="btn btn-outline-light rounded-pill px-4 py-2 fw-bold hover-lift">View Details</a>
                            </div>
                        </div>
                        
                        <!-- Image Visual -->
                        <div class="col-lg-6 order-1 order-lg-2 position-relative text-center">
                            <!-- Glow Effect -->
                            <div class="position-absolute top-50 start-50 translate-middle bg-warning rounded-circle opacity-25 d-none d-lg-block" style="width: 70%; height: 70%; filter: blur(60px); z-index: 0;"></div>
                            
                            <!-- Dish Image (Rotating) -->
                            <img src="risotto.jpg" alt="Risotto" class="img-fluid rounded-circle shadow-lg position-relative z-1 spinning-plate" style="width: 80%; max-width: 450px; aspect-ratio: 1/1; object-fit: cover; border: 15px solid rgba(255,255,255,0.1);">
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- Repeat .carousel-item for Slide 2, 3... -->
        </div>
        
        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#chefCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#chefCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.font-serif { font-family: "Playfair Display", Georgia, serif; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.3)!important; }

/* Infinite rotation animation for the dish plate */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spinning-plate {
    animation: spinSlow 60s linear infinite;
}
.spinning-plate:hover {
    animation-play-state: paused;
}
</style>

Custom Dish Details Modal (Image Zoom)

PREMIUM

A click-to-view interaction showing a detailed dish breakdown using Bootstrap's Modal system.

Preview
Code Copy Section
HTML 
<!-- Trigger Button (e.g., inside a menu card) -->
<button type="button" class="btn btn-danger rounded-pill fw-bold shadow-sm px-4" data-bs-toggle="modal" data-bs-target="#dishModal">
    View Details
</button>

<!-- Dish Details Modal -->
<div class="modal fade" id="dishModal" tabindex="-1" aria-labelledby="dishModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content border-0 rounded-4 shadow-lg overflow-hidden">
            
            <!-- Close Button -->
            <button type="button" class="btn-close position-absolute top-0 end-0 m-3 z-3 bg-white p-2 rounded-circle shadow-sm" data-bs-dismiss="modal" aria-label="Close"></button>
            
            <div class="row g-0">
                <!-- Left: Image Side -->
                <div class="col-lg-6 position-relative text-start overflow-hidden dish-modal-img-container">
                    <!-- Image -->
                    <img src="dish-detailed.jpg" alt="Dish Name" class="img-fluid w-100 h-100 object-fit-cover modal-zoom-img" style="min-height: 400px;">
                    
                    <!-- Dietary Badges Overlay -->
                    <div class="position-absolute bottom-0 start-0 m-4 d-flex gap-2 z-1">
                        <span class="badge bg-white text-dark shadow px-3 py-2 rounded-pill"><i class="bi bi-fire text-danger me-1"></i> Spicy</span>
                        <span class="badge bg-white text-dark shadow px-3 py-2 rounded-pill"><i class="bi bi-egg text-warning me-1"></i> Contains Egg</span>
                    </div>
                </div>
                
                <!-- Right: Content Side -->
                <div class="col-lg-6 text-start p-4 p-md-5 d-flex flex-column bg-white">
                    
                    <!-- Category & Price -->
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="text-danger fw-bold text-uppercase tracking-wide mb-0">Main Course</h6>
                        <h3 class="text-danger fw-bold mb-0">.00</h3>
                    </div>
                    
                    <!-- Title -->
                    <h2 class="fw-bold mb-4 font-serif" id="dishModalLabel">Spicy Garlic Shrimp Pasta</h2>
                    
                    <!-- Ratings -->
                    <div class="d-flex align-items-center mb-4 gap-1 text-warning small">
                        <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                        <span class="text-muted ms-2 fw-medium text-decoration-underline cursor-pointer">4.8 (215 Reviews)</span>
                    </div>
                    
                    <!-- Description -->
                    <p class="text-muted lh-lg mb-4 pb-3 border-bottom border-secondary border-opacity-10">Linguine pasta tossed with jumbo shrimp, fresh garlic, red chili flakes, white wine, and a touch of lemon juice, garnished with fresh parsley.</p>
                    
                    <!-- Ingredients List -->
                    <div class="mb-5">
                        <h6 class="fw-bold mb-3 font-serif">Main Ingredients</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium">Jumbo Shrimp</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium">Linguine</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium">Garlic</span>
                            <span class="badge bg-light text-dark border px-3 py-2 fw-medium">White Wine</span>
                        </div>
                    </div>
                    
                    <!-- Add to Cart Action -->
                    <div class="mt-auto pt-3 row g-3">
                        <!-- Quantity Selector -->
                        <div class="col-sm-5">
                            <div class="input-group">
                                <button class="btn btn-outline-secondary px-3 fw-bold" type="button">-</button>
                                <input type="text" class="form-control text-center fw-bold" value="1" aria-label="Quantity">
                                <button class="btn btn-outline-secondary px-3 fw-bold" type="button">+</button>
                            </div>
                        </div>
                        <!-- Submit -->
                        <div class="col-sm-7">
                            <button class="btn btn-danger w-100 rounded-pill py-2 fw-bold shadow-sm hover-lift"><i class="bi bi-cart-plus me-2"></i>Add to Order</button>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.font-serif { font-family: "Playfair Display", Georgia, serif; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }

.cursor-pointer { cursor: pointer; }

/* Modal image zoom effect on hover over the container */
.modal-zoom-img { transition: transform 0.6s ease; }
.dish-modal-img-container:hover .modal-zoom-img { transform: scale(1.1); }
</style>

Custom Table Reservation Form

PREMIUM

A stylish booking form designed specifically for restaurants, featuring date/time pickers and a confirmation modal.

Preview

Book a Table

Reserve your spot and enjoy a wonderful dining experience.

Code Copy Section
HTML 
<!-- Reservation Section -->
<section class="py-5 position-relative overflow-hidden" style="background-image: url('restaurant-bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">
    <!-- Dark Overlay -->
    <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-75"></div>
    
    <div class="container position-relative z-1 py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                
                <!-- Booking Card -->
                <div class="card border-0 rounded-4 shadow-lg overflow-hidden">
                    <div class="card-header bg-danger text-white text-center p-4 border-0">
                        <h3 class="fw-bold mb-0 font-serif">Book a Table</h3>
                        <p class="text-white-50 small mb-0 mt-2">Reserve your spot and enjoy a wonderful dining experience.</p>
                    </div>
                    <div class="card-body p-4 p-md-5">
                        <form id="reservationForm">
                            <div class="row g-4">
                                
                                <!-- Name -->
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-dark small text-uppercase tracking-wide">Full Name</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-person text-muted"></i></span>
                                        <input type="text" class="form-control bg-light border-start-0 ps-0 focus-ring focus-ring-danger" placeholder="John Doe" required>
                                    </div>
                                </div>
                                
                                <!-- Phone -->
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-dark small text-uppercase tracking-wide">Phone Number</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-telephone text-muted"></i></span>
                                        <input type="tel" class="form-control bg-light border-start-0 ps-0 focus-ring focus-ring-danger" placeholder="(555) 000-0000" required>
                                    </div>
                                </div>
                                
                                <!-- Guests -->
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-dark small text-uppercase tracking-wide">Guests</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-people text-muted"></i></span>
                                        <select class="form-select bg-light border-start-0 ps-0 focus-ring focus-ring-danger">
                                            <option value="1">1 Person</option>
                                            <option value="2" selected>2 People</option>
                                            <option value="3">3 People</option>
                                            <option value="4">4 People</option>
                                            <option value="5">5+ People</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Date -->
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-dark small text-uppercase tracking-wide">Date</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-calendar-event text-muted"></i></span>
                                        <input type="date" class="form-control bg-light border-start-0 ps-0 focus-ring focus-ring-danger" required>
                                    </div>
                                </div>
                                
                                <!-- Time -->
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-dark small text-uppercase tracking-wide">Time</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-clock text-muted"></i></span>
                                        <select class="form-select bg-light border-start-0 ps-0 focus-ring focus-ring-danger">
                                            <option value="18:00">6:00 PM</option>
                                            <option value="18:30">6:30 PM</option>
                                            <option value="19:00" selected>7:00 PM</option>
                                            <option value="19:30">7:30 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Special Requests -->
                                <div class="col-12">
                                    <label class="form-label fw-bold text-dark small text-uppercase tracking-wide">Special Requests</label>
                                    <textarea class="form-control bg-light focus-ring focus-ring-danger" rows="3" placeholder="Any allergies or special occasions?"></textarea>
                                </div>
                                
                                <!-- Submit Button -->
                                <div class="col-12 mt-4">
                                    <button type="button" class="btn btn-danger w-100 rounded-pill py-3 fw-bold fs-5 shadow hover-lift" data-bs-toggle="modal" data-bs-target="#reservationModal">Book Table</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section>

<!-- Confirmation Modal -->
<div class="modal fade" id="reservationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4 shadow-lg text-center p-4 p-md-5">
            <div class="mb-4">
                <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mx-auto" style="width: 80px; height: 80px;">
                    <i class="bi bi-check-lg fs-1"></i>
                </div>
            </div>
            <h3 class="fw-bold mb-3 font-serif">Reservation Confirmed!</h3>
            <p class="text-muted mb-4">Thank you for choosing us. Your table has been successfully booked. We've sent a confirmation email to you.</p>
            <button type="button" class="btn btn-dark rounded-pill px-5 py-2 fw-bold" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
</div>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1px; }
.font-serif { font-family: "Playfair Display", Georgia, serif; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.2)!important; }

/* Custom input focus styling */
.form-control:focus, .form-select:focus {
    border-color: var(--bs-danger);
    background-color: #fff !important;
}
.input-group:focus-within .input-group-text {
    border-color: var(--bs-danger);
    background-color: #fff !important;
}
.input-group:focus-within .bi {
    color: var(--bs-danger) !important;
}
</style>

Custom Customer Testimonials & Newsletter

PREMIUM

A beautiful review grid and a clean, inline newsletter subscription form perfect for building a mailing list.

Preview
Testimonials

What Our Guests Say

"Absolute Perfection!"

"The Truffle Mushroom Risotto is out of this world. The ambiance was cozy, and the service was top-notch. Highly recommend!"

Avatar
Sarah Jenkins
Local Guide
"A Hidden Gem"

"We stumbled upon this place by accident and what a find! The BBQ ribs fell right off the bone. We will definitely be back."

Avatar
Michael Chen
Food Critic
"Best Date Night Ever"

"Booked a table for our anniversary. They accommodated our special requests and made the night unforgettable. Thanks!"

Avatar
Emily Davis
Regular Customer

Join Our Newsletter

Subscribe to receive exclusive offers, event invites, and seasonal menu updates directly in your inbox.

Code Copy Section
HTML 
<!-- Testimonials Section -->
<section class="py-5 bg-light">
    <div class="container py-4">
        
        <!-- Header -->
        <div class="text-center mb-5">
            <h6 class="text-danger fw-bold text-uppercase tracking-wide mb-2">Testimonials</h6>
            <h2 class="display-6 fw-bold mb-0 font-serif">What Our Guests Say</h2>
        </div>
        
        <!-- Reviews Grid -->
        <div class="row g-4 text-start mb-5 pb-4">
            <!-- Review 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 h-100 p-4 p-md-5 hover-lift bg-white position-relative">
                    <!-- Quote Icon -->
                    <i class="bi bi-quote position-absolute top-0 end-0 m-4 fs-1 text-light"></i>
                    
                    <!-- Stars -->
                    <div class="d-flex align-items-center mb-3 text-warning">
                        <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                    </div>
                    
                    <h5 class="fw-bold font-serif mb-3">"Absolute Perfection!"</h5>
                    <p class="text-muted mb-4 fst-italic">"The Truffle Mushroom Risotto is out of this world. The ambiance was cozy, and the service was top-notch. Highly recommend!"</p>
                    
                    <!-- Author -->
                    <div class="d-flex align-items-center mt-auto gap-3 border-top pt-3">
                        <img src="user1.jpg" alt="Sarah Jenkins" class="rounded-circle object-fit-cover shadow-sm" style="width: 45px; height: 45px;">
                        <div>
                            <h6 class="fw-bold mb-0">Sarah Jenkins</h6>
                            <small class="text-muted">Local Guide</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Repeat for Review 2, 3... -->
        </div>
        
        <!-- Newsletter Subscription -->
        <div class="card border-0 bg-danger text-white rounded-4 shadow-lg overflow-hidden text-center p-4 p-md-5 position-relative">
            <!-- Decorative Background Icon -->
            <i class="bi bi-envelope-paper position-absolute top-50 start-0 translate-middle-y ms-n4 opacity-10" style="font-size: 15rem; transform: rotate(-15deg);"></i>
            
            <div class="position-relative z-1 mx-auto" style="max-width: 600px;">
                <h3 class="fw-bold font-serif mb-3">Join Our Newsletter</h3>
                <p class="text-white-50 mb-4">Subscribe to receive exclusive offers, event invites, and seasonal menu updates directly in your inbox.</p>
                
                <form class="d-flex gap-2 flex-column flex-sm-row mx-auto">
                    <input type="email" class="form-control rounded-pill py-3 px-4 border-0 shadow-none" placeholder="Enter your email address" required>
                    <button type="submit" class="btn btn-dark rounded-pill py-3 px-4 fw-bold hover-lift text-nowrap">Subscribe</button>
                </form>
            </div>
        </div>
        
    </div>
</section>

<!-- CSS -->
<style>
.tracking-wide { letter-spacing: 1.5px; }
.font-serif { font-family: "Playfair Display", Georgia, serif; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 2rem rgba(0,0,0,.15)!important; }
</style>

About-us - Classic Company

PREMIUM

Premium component from About-us.

Preview

1. Classic Company

Image

About Our Company

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae.

  • Professional Team
  • Quality Service
  • 24/7 Support
Read More
HTML 

        <h2 class="mb-4">1. Classic Company</h2>
        <div class="row align-items-center">
          <div class="col-lg-6"><div class="placeholder">Image</div></div>
          <div class="col-lg-6">
            <h3>About Our Company</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Doloribus, vitae.
            </p>
            <ul>
              <li>Professional Team</li>
              <li>Quality Service</li>
              <li>24/7 Support</li>
            </ul>
            <a class="btn btn-primary">Read More</a>
          </div>
        </div>

About-us - Image Right

PREMIUM

Premium component from About-us.

Preview

2. Image Right

Image

Who We Are

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, ipsa.

10+

Years

500+

Clients

99%

Success
HTML 

        <h2 class="mb-4">2. Image Right</h2>
        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="placeholder">Image</div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h3>Who We Are</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Quibusdam, ipsa.
            </p>
            <div class="row text-center">
              <div class="col-4">
                <h4>10+</h4>
                <small>Years</small>
              </div>
              <div class="col-4">
                <h4>500+</h4>
                <small>Clients</small>
              </div>
              <div class="col-4">
                <h4>99%</h4>
                <small>Success</small>
              </div>
            </div>
          </div>
        </div>

About-us - Centered

PREMIUM

Premium component from About-us.

Preview

3. Centered

Image

About Our Company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bootstrap 5 reusable About section.

Learn More
HTML 

        <h2 class="mb-4">3. Centered</h2>
        <div class="text-center">
          <div class="placeholder mb-4">Image</div>
          <h3>About Our Company</h3>
          <p class="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bootstrap 5
            reusable About section.
          </p>
          <a class="btn btn-primary">Learn More</a>
        </div>

About-us - Mission & Vision

PREMIUM

Premium component from About-us.

Preview

4. Mission & Vision

Image

About Our Company

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae.

  • Professional Team
  • Quality Service
  • 24/7 Support
Read More
HTML 

        <h2 class="mb-4">4. Mission &amp; Vision</h2>
        <div class="row align-items-center">
          <div class="col-lg-6"><div class="placeholder">Image</div></div>
          <div class="col-lg-6">
            <h3>About Our Company</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Doloribus, vitae.
            </p>
            <ul>
              <li>Professional Team</li>
              <li>Quality Service</li>
              <li>24/7 Support</li>
            </ul>
            <a class="btn btn-primary">Read More</a>
          </div>
        </div>

About-us - Statistics

PREMIUM

Premium component from About-us.

Preview

5. Statistics

Image

Who We Are

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, ipsa.

10+

Years

500+

Clients

99%

Success
HTML 

        <h2 class="mb-4">5. Statistics</h2>
        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="placeholder">Image</div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h3>Who We Are</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Quibusdam, ipsa.
            </p>
            <div class="row text-center">
              <div class="col-4">
                <h4>10+</h4>
                <small>Years</small>
              </div>
              <div class="col-4">
                <h4>500+</h4>
                <small>Clients</small>
              </div>
              <div class="col-4">
                <h4>99%</h4>
                <small>Success</small>
              </div>
            </div>
          </div>
        </div>

About-us - CEO Message

PREMIUM

Premium component from About-us.

Preview

6. CEO Message

Image

About Our Company

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae.

  • Professional Team
  • Quality Service
  • 24/7 Support
Read More
HTML 

        <h2 class="mb-4">6. CEO Message</h2>
        <div class="row align-items-center">
          <div class="col-lg-6"><div class="placeholder">Image</div></div>
          <div class="col-lg-6">
            <h3>About Our Company</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Doloribus, vitae.
            </p>
            <ul>
              <li>Professional Team</li>
              <li>Quality Service</li>
              <li>24/7 Support</li>
            </ul>
            <a class="btn btn-primary">Read More</a>
          </div>
        </div>

About-us - Timeline

PREMIUM

Premium component from About-us.

Preview

7. Timeline

Image

About Our Company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bootstrap 5 reusable About section.

Learn More
HTML 

        <h2 class="mb-4">7. Timeline</h2>
        <div class="text-center">
          <div class="placeholder mb-4">Image</div>
          <h3>About Our Company</h3>
          <p class="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bootstrap 5
            reusable About section.
          </p>
          <a class="btn btn-primary">Learn More</a>
        </div>

About-us - Features

PREMIUM

Premium component from About-us.

Preview

8. Features

Image

Who We Are

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, ipsa.

10+

Years

500+

Clients

99%

Success
HTML 

        <h2 class="mb-4">8. Features</h2>
        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="placeholder">Image</div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h3>Who We Are</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Quibusdam, ipsa.
            </p>
            <div class="row text-center">
              <div class="col-4">
                <h4>10+</h4>
                <small>Years</small>
              </div>
              <div class="col-4">
                <h4>500+</h4>
                <small>Clients</small>
              </div>
              <div class="col-4">
                <h4>99%</h4>
                <small>Success</small>
              </div>
            </div>
          </div>
        </div>

About-us - Why Choose Us

PREMIUM

Premium component from About-us.

Preview

9. Why Choose Us

Image

About Our Company

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae.

  • Professional Team
  • Quality Service
  • 24/7 Support
Read More
HTML 

        <h2 class="mb-4">9. Why Choose Us</h2>
        <div class="row align-items-center">
          <div class="col-lg-6"><div class="placeholder">Image</div></div>
          <div class="col-lg-6">
            <h3>About Our Company</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Doloribus, vitae.
            </p>
            <ul>
              <li>Professional Team</li>
              <li>Quality Service</li>
              <li>24/7 Support</li>
            </ul>
            <a class="btn btn-primary">Read More</a>
          </div>
        </div>

About-us - Minimal

PREMIUM

Premium component from About-us.

Preview

10. Minimal

Image

About Our Company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bootstrap 5 reusable About section.

Learn More
HTML 

        <h2 class="mb-4">10. Minimal</h2>
        <div class="text-center">
          <div class="placeholder mb-4">Image</div>
          <h3>About Our Company</h3>
          <p class="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bootstrap 5
            reusable About section.
          </p>
          <a class="btn btn-primary">Learn More</a>
        </div>

Academic Calendar - Section 1

PREMIUM

Premium component from Academic Calendar.

Preview

1. Semester Timeline

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-primary text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">1. Semester Timeline</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-primary">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-primary">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-primary">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-primary">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 2

PREMIUM

Premium component from Academic Calendar.

Preview

2. Monthly Calendar

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-success text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">2. Monthly Calendar</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-success">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-success">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-success">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-success">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 3

PREMIUM

Premium component from Academic Calendar.

Preview

3. Academic Events

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-danger text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">3. Academic Events</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-danger">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-danger">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-danger">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-danger">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 4

PREMIUM

Premium component from Academic Calendar.

Preview

4. Exam Schedule

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-warning text-dark">
<div class="d-flex justify-content-between">
<h3 class="mb-0">4. Exam Schedule</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-warning">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-warning">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-warning">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-warning">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 5

PREMIUM

Premium component from Academic Calendar.

Preview

5. Admission Timeline

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-info text-dark">
<div class="d-flex justify-content-between">
<h3 class="mb-0">5. Admission Timeline</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-info">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-info">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-info">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-info">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 6

PREMIUM

Premium component from Academic Calendar.

Preview

6. Workshop Calendar

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-secondary text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">6. Workshop Calendar</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-secondary">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-secondary">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-secondary">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-secondary">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 7

PREMIUM

Premium component from Academic Calendar.

Preview

7. University Planner

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-dark text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">7. University Planner</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-dark">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-dark">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-dark">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-dark">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 8

PREMIUM

Premium component from Academic Calendar.

Preview

8. School Year Plan

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-primary text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">8. School Year Plan</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-primary">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-primary">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-primary">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-primary">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 9

PREMIUM

Premium component from Academic Calendar.

Preview

9. Department Calendar

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-success text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">9. Department Calendar</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-success">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-success">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-success">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-success">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic Calendar - Section 10

PREMIUM

Premium component from Academic Calendar.

Preview

10. Dashboard Calendar

2026
Jan

Week 1

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Mar

Week 2

  • Orientation
  • Classes Begin
  • Assessment
  • Result
May

Week 3

  • Orientation
  • Classes Begin
  • Assessment
  • Result
Jul

Week 4

  • Orientation
  • Classes Begin
  • Assessment
  • Result
HTML 

<div class="card shadow-sm border-0">
<div class="card-header bg-danger text-white">
<div class="d-flex justify-content-between">
<h3 class="mb-0">10. Dashboard Calendar</h3>
<span class="badge bg-light text-dark">2026</span>
</div>
</div>
<div class="card-body">
<div class="row g-3">

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jan</h5>
<p class="mb-2"><span class="badge bg-danger">Week 1</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Mar</h5>
<p class="mb-2"><span class="badge bg-danger">Week 2</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>May</h5>
<p class="mb-2"><span class="badge bg-danger">Week 3</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h5>Jul</h5>
<p class="mb-2"><span class="badge bg-danger">Week 4</span></p>
<ul class="list-group list-group-flush small">
<li class="list-group-item"><i class="bi bi-calendar-event me-2"></i>Orientation</li>
<li class="list-group-item"><i class="bi bi-book me-2"></i>Classes Begin</li>
<li class="list-group-item"><i class="bi bi-pencil-square me-2"></i>Assessment</li>
<li class="list-group-item"><i class="bi bi-award me-2"></i>Result</li>
</ul>
</div>
</div>
</div>
</div></div></div>

Academic section - Academic Programs

PREMIUM

Premium component from Academic section.

Preview

Academic Programs

Computer Science

Sample description for Computer Science. Replace with your own content.

Learn More
Business

Sample description for Business. Replace with your own content.

Learn More
Engineering

Sample description for Engineering. Replace with your own content.

Learn More
HTML 

        <h2 class="text-center mb-4">Academic Programs</h2>
        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <img src="https://picsum.photos/400/240?random=A1" class="card-img-top" alt="">
              <div class="card-body">
                <h5 class="card-title">Computer Science</h5>
                <p class="card-text">
                  Sample description for Computer Science. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <img src="https://picsum.photos/400/240?random=A2" class="card-img-top" alt="">
              <div class="card-body">
                <h5 class="card-title">Business</h5>
                <p class="card-text">
                  Sample description for Business. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <img src="https://picsum.photos/400/240?random=A3" class="card-img-top" alt="">
              <div class="card-body">
                <h5 class="card-title">Engineering</h5>
                <p class="card-text">
                  Sample description for Engineering. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
        </div>

Academic section - Departments

PREMIUM

Premium component from Academic section.

Preview

Departments

Science

Sample description for Science. Replace with your own content.

Learn More
Commerce

Sample description for Commerce. Replace with your own content.

Learn More
Arts

Sample description for Arts. Replace with your own content.

Learn More
HTML 

        <h2 class="text-center mb-4">Departments</h2>
        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <div class="card-body">
                <h5 class="card-title">Science</h5>
                <p class="card-text">
                  Sample description for Science. Replace with your own content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <div class="card-body">
                <h5 class="card-title">Commerce</h5>
                <p class="card-text">
                  Sample description for Commerce. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <div class="card-body">
                <h5 class="card-title">Arts</h5>
                <p class="card-text">
                  Sample description for Arts. Replace with your own content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
        </div>

Academic section - Faculty Members

PREMIUM

Premium component from Academic section.

Preview

Faculty Members

John Smith

Sample description for John Smith. Replace with your own content.

Learn More
Sarah Lee

Sample description for Sarah Lee. Replace with your own content.

Learn More
David Brown

Sample description for David Brown. Replace with your own content.

Learn More
HTML 

        <h2 class="text-center mb-4">Faculty Members</h2>
        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <img src="https://picsum.photos/400/240?random=F1" class="card-img-top" alt="">
              <div class="card-body">
                <h5 class="card-title">John Smith</h5>
                <p class="card-text">
                  Sample description for John Smith. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <img src="https://picsum.photos/400/240?random=F2" class="card-img-top" alt="">
              <div class="card-body">
                <h5 class="card-title">Sarah Lee</h5>
                <p class="card-text">
                  Sample description for Sarah Lee. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <img src="https://picsum.photos/400/240?random=F3" class="card-img-top" alt="">
              <div class="card-body">
                <h5 class="card-title">David Brown</h5>
                <p class="card-text">
                  Sample description for David Brown. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
        </div>

Academic section - Academic Facilities

PREMIUM

Premium component from Academic section.

Preview

Academic Facilities

Library

Sample description for Library. Replace with your own content.

Learn More
Computer Lab

Sample description for Computer Lab. Replace with your own content.

Learn More
Science Lab

Sample description for Science Lab. Replace with your own content.

Learn More
HTML 

        <h2 class="text-center mb-4">Academic Facilities</h2>
        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <div class="card-body">
                <h5 class="card-title">Library</h5>
                <p class="card-text">
                  Sample description for Library. Replace with your own content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <div class="card-body">
                <h5 class="card-title">Computer Lab</h5>
                <p class="card-text">
                  Sample description for Computer Lab. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 shadow-sm">
              <div class="card-body">
                <h5 class="card-title">Science Lab</h5>
                <p class="card-text">
                  Sample description for Science Lab. Replace with your own
                  content.
                </p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
        </div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

1. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>1. Administrative Staff</h2><a href="#" class="btn btn-primary">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=11" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=12" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=13" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=14" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

2. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>2. Administrative Staff</h2><a href="#" class="btn btn-success">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=21" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=22" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=23" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=24" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

3. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>3. Administrative Staff</h2><a href="#" class="btn btn-danger">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=31" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-danger btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-danger btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=32" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-danger btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-danger btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=33" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-danger btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-danger btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=34" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-danger btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-danger btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

4. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>4. Administrative Staff</h2><a href="#" class="btn btn-warning">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=41" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-warning btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-warning btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=42" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-warning btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-warning btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=43" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-warning btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-warning btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=44" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-warning btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-warning btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

5. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>5. Administrative Staff</h2><a href="#" class="btn btn-info">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=51" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-info btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-info btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=52" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-info btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-info btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=53" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-info btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-info btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=54" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-info btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-info btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

6. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>6. Administrative Staff</h2><a href="#" class="btn btn-secondary">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=61" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-secondary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-secondary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=62" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-secondary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-secondary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=63" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-secondary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-secondary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=64" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-secondary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-secondary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

7. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>7. Administrative Staff</h2><a href="#" class="btn btn-dark">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=71" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=72" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=73" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=74" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

8. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>8. Administrative Staff</h2><a href="#" class="btn btn-primary">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=81" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=82" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=83" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=84" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

9. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>9. Administrative Staff</h2><a href="#" class="btn btn-success">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=91" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=92" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=93" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=94" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-success btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-success btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Administrative Staff Section - Administrative Staff

PREMIUM

Premium component from Administrative Staff Section.

Preview

10. Administrative Staff

View All
Staff
Administration
Staff Member 1

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 2

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 3

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
Staff
Administration
Staff Member 4

Administrative Officer

Experienced in office management, student services, records, and administration.

Profile Contact
HTML 
<div class="d-flex justify-content-between align-items-center mb-4"><h2>10. Administrative Staff</h2><a href="#" class="btn btn-dark">View All</a></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=101" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 1</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=102" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 2</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=103" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 3</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/400/420?random=104" class="card-img-top" alt="Staff">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Administration</span>
<h5 class="card-title">Staff Member 4</h5>
<p class="text-muted mb-1">Administrative Officer</p>
<p class="small">Experienced in office management, student services, records, and administration.</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-person"></i> Profile</a>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-envelope"></i> Contact</a>
</div>
</div>
<div class="card-footer bg-white text-center">
<i class="bi bi-facebook me-2"></i>
<i class="bi bi-linkedin me-2"></i>
<i class="bi bi-envelope"></i>
</div>
</div>
</div></div>

Agro_intro - Agriculture Knowledge Hub

PREMIUM

Premium component from Agro_intro.

Preview
Welcome

Agriculture Knowledge Hub

Empowering farmers with practical knowledge, sustainable farming techniques, and modern agricultural solutions.

Introduction
Introduction

Helping Farmers Grow Better

Our platform is dedicated to empowering farmers, agronomists, and agricultural professionals with reliable and up-to-date information. Whether you are just starting or have years of experience, we provide practical guides, crop information, and expert advice to help improve productivity.

100+

Farming Guides

50+

Crop Details

Farming Guides

Learn modern farming methods, crop cultivation, irrigation, soil preparation, and harvesting techniques.

Crop Details

Explore detailed information about crops, cultivation methods, fertilizer use, harvesting, and storage.

Pest Control

Discover eco-friendly pest management, disease prevention, and sustainable agricultural practices.

HTML 


    <div class="container">

        <!-- Section Title -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-8 text-center">

                <span class="badge bg-success px-3 py-2 mb-3">
                    Welcome
                </span>

                <h2 class="display-5 fw-bold">
                    Agriculture Knowledge Hub
                </h2>

                <p class="text-secondary">
                    Empowering farmers with practical knowledge, sustainable farming
                    techniques, and modern agricultural solutions.
                </p>

            </div>

        </div>

        <!-- Introduction -->

        <div class="row align-items-center g-5 mb-5">

            <div class="col-lg-6">

                <img src="assets/img/into.jpg" class="img-fluid rounded-4 shadow-lg" alt="Introduction">

            </div>

            <div class="col-lg-6">

                <span class="badge bg-primary mb-3">
                    Introduction
                </span>

                <h3 class="fw-bold mb-3">
                    Helping Farmers Grow Better
                </h3>

                <p class="text-secondary">

                    Our platform is dedicated to empowering farmers,
                    agronomists, and agricultural professionals with
                    reliable and up-to-date information. Whether you are
                    just starting or have years of experience, we provide
                    practical guides, crop information, and expert advice
                    to help improve productivity.

                </p>

                <div class="row mt-4 g-3">

                    <div class="col-6">

                        <div class="border rounded-3 p-3 text-center">

                            <h3 class="fw-bold text-success">
                                100+
                            </h3>

                            <small class="text-muted">
                                Farming Guides
                            </small>

                        </div>

                    </div>

                    <div class="col-6">

                        <div class="border rounded-3 p-3 text-center">

                            <h3 class="fw-bold text-primary">
                                50+
                            </h3>

                            <small class="text-muted">
                                Crop Details
                            </small>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Feature Cards -->

        <div class="row g-4">

            <div class="col-lg-4 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:80px;height:80px;">

                            <i class="bi bi-book-half fs-1 text-success"></i>

                        </div>

                        <h4 class="fw-bold">
                            Farming Guides
                        </h4>

                        <p class="text-secondary">

                            Learn modern farming methods, crop cultivation,
                            irrigation, soil preparation, and harvesting
                            techniques.

                        </p>

                    </div>

                </div>

            </div>

            <div class="col-lg-4 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:80px;height:80px;">

                            <i class="bi bi-tree-fill fs-1 text-primary"></i>

                        </div>

                        <h4 class="fw-bold">
                            Crop Details
                        </h4>

                        <p class="text-secondary">

                            Explore detailed information about crops,
                            cultivation methods, fertilizer use,
                            harvesting, and storage.

                        </p>

                    </div>

                </div>

            </div>

            <div class="col-lg-4 col-md-6 mx-md-auto">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:80px;height:80px;">

                            <i class="bi bi-bug-fill fs-1 text-danger"></i>

                        </div>

                        <h4 class="fw-bold">
                            Pest Control
                        </h4>

                        <p class="text-secondary">

                            Discover eco-friendly pest management,
                            disease prevention, and sustainable
                            agricultural practices.

                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

Best Result Student List Section - Section 1

PREMIUM

Premium component from Best Result Student List Section.

Preview

1. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-primary text-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">1. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=11" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=12" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=13" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=14" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 2

PREMIUM

Premium component from Best Result Student List Section.

Preview

2. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-success text-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">2. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=21" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=22" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=23" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=24" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 3

PREMIUM

Premium component from Best Result Student List Section.

Preview

3. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-danger text-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">3. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=31" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-danger">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-danger btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=32" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-danger">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-danger btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=33" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-danger">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-danger btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=34" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-danger">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-danger btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 4

PREMIUM

Premium component from Best Result Student List Section.

Preview

4. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-warning text-dark">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">4. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=41" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-warning">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-warning btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=42" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-warning">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-warning btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=43" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-warning">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-warning btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=44" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-warning">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-warning btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 5

PREMIUM

Premium component from Best Result Student List Section.

Preview

5. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-info text-dark">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">5. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=51" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=52" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=53" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=54" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 6

PREMIUM

Premium component from Best Result Student List Section.

Preview

6. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-secondary text-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">6. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=61" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-secondary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=62" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-secondary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=63" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-secondary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=64" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-secondary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 7

PREMIUM

Premium component from Best Result Student List Section.

Preview

7. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-dark text-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">7. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=71" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-dark">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-dark btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=72" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-dark">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-dark btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=73" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-dark">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-dark btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=74" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-dark">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-dark btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 8

PREMIUM

Premium component from Best Result Student List Section.

Preview

8. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-primary text-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">8. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=81" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=82" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=83" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=84" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-primary">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 9

PREMIUM

Premium component from Best Result Student List Section.

Preview

9. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-success text-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">9. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=91" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=92" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=93" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=94" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-success">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-success btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

Best Result Student List Section - Section 10

PREMIUM

Premium component from Best Result Student List Section.

Preview

10. Best Result Students

Top Performers
Student
Student 1

Department: CSE

GPA: 4.1

Batch 2026
Student
Student 2

Department: CSE

GPA: 4.2

Batch 2026
Student
Student 3

Department: CSE

GPA: 4.3

Batch 2026
Student
Student 4

Department: CSE

GPA: 4.4

Batch 2026
HTML 

<div class="card border-0 shadow">
<div class="card-header bg-info text-dark">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">10. Best Result Students</h3>
<span class="badge bg-light text-dark">Top Performers</span>
</div>
</div>
<div class="card-body">
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=101" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 1</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.1</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=102" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 2</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.2</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=103" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 3</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.3</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 text-center">
<img src="https://picsum.photos/250/250?random=104" class="card-img-top" alt="Student">
<div class="card-body">
<h5>Student 4</h5>
<p class="mb-1">Department: CSE</p>
<p class="mb-1">GPA: 4.4</p>
<span class="badge bg-info">Batch 2026</span>
</div>
<div class="card-footer">
<button class="btn btn-outline-info btn-sm">
<i class="bi bi-award"></i> Profile
</button>
</div>
</div>
</div>
</div></div></div>

biodata - Personal Biodata

PREMIUM

Premium component from biodata.

Preview
About Me

Personal Biodata

Get to know more about my background, skills, and professional journey.

Profile

John Doe

Full Stack Web Developer

Full Name
John Doe
Date of Birth
01 January 2000
Nationality
Bangladeshi
Profession
Full Stack Web Developer
Email
john@example.com
Phone
+8801XXXXXXXXX
Address
Dhaka, Bangladesh

Short Introduction

I am a passionate Full Stack Web Developer with experience in HTML5, CSS3, Bootstrap 5, JavaScript, PHP, MySQL and modern web technologies. I enjoy building responsive, user-friendly and high-performance websites that provide excellent user experiences.

HTML 


    <div class="container">

        <!-- Section Heading -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-7 text-center">

                <span class="badge bg-primary px-3 py-2 mb-3">
                    About Me
                </span>

                <h2 class="display-5 fw-bold">
                    Personal Biodata
                </h2>

                <p class="text-secondary">
                    Get to know more about my background, skills, and professional journey.
                </p>

            </div>

        </div>

        <div class="row g-5 align-items-center">

            <!-- Profile -->

            <div class="col-lg-4">

                <div class="card border-0 shadow-lg rounded-4 text-center">

                    <div class="card-body p-4">

                        <img src="https://via.placeholder.com/250" class="img-fluid rounded-circle border border-5 border-primary mb-4" alt="Profile">

                        <h3 class="fw-bold">
                            John Doe
                        </h3>

                        <p class="text-primary fw-semibold">
                            Full Stack Web Developer
                        </p>

                        <div class="d-flex justify-content-center gap-2 mt-3">

                            <a href="#" class="btn btn-outline-primary rounded-circle">
                                <i class="bi bi-facebook"></i>
                            </a>

                            <a href="#" class="btn btn-outline-info rounded-circle">
                                <i class="bi bi-twitter-x"></i>
                            </a>

                            <a href="#" class="btn btn-outline-danger rounded-circle">
                                <i class="bi bi-instagram"></i>
                            </a>

                            <a href="#" class="btn btn-outline-dark rounded-circle">
                                <i class="bi bi-github"></i>
                            </a>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Biodata -->

            <div class="col-lg-8">

                <div class="card border-0 shadow-lg rounded-4">

                    <div class="card-body p-4">

                        <div class="row g-4">

                            <div class="col-md-6">

                                <div class="border rounded-3 p-3">

                                    <small class="text-muted">Full Name</small>

                                    <h6 class="fw-bold mb-0">
                                        John Doe
                                    </h6>

                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="border rounded-3 p-3">

                                    <small class="text-muted">Date of Birth</small>

                                    <h6 class="fw-bold mb-0">
                                        01 January 2000
                                    </h6>

                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="border rounded-3 p-3">

                                    <small class="text-muted">Nationality</small>

                                    <h6 class="fw-bold mb-0">
                                        Bangladeshi
                                    </h6>

                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="border rounded-3 p-3">

                                    <small class="text-muted">Profession</small>

                                    <h6 class="fw-bold mb-0">
                                        Full Stack Web Developer
                                    </h6>

                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="border rounded-3 p-3">

                                    <small class="text-muted">Email</small>

                                    <h6 class="fw-bold mb-0">
                                        john@example.com
                                    </h6>

                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="border rounded-3 p-3">

                                    <small class="text-muted">Phone</small>

                                    <h6 class="fw-bold mb-0">
                                        +8801XXXXXXXXX
                                    </h6>

                                </div>

                            </div>

                            <div class="col-12">

                                <div class="border rounded-3 p-3">

                                    <small class="text-muted">Address</small>

                                    <h6 class="fw-bold mb-0">
                                        Dhaka, Bangladesh
                                    </h6>

                                </div>

                            </div>

                        </div>

                        <hr class="my-4">

                        <h4 class="fw-bold mb-3">
                            Short Introduction
                        </h4>

                        <p class="text-secondary mb-0">

                            I am a passionate Full Stack Web Developer with experience
                            in HTML5, CSS3, Bootstrap 5, JavaScript, PHP, MySQL and
                            modern web technologies. I enjoy building responsive,
                            user-friendly and high-performance websites that provide
                            excellent user experiences.

                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

bootstrap5-starter

PREMIUM

Premium component from bootstrap5-starter.

Preview
HTML 


    <header id="header-section">

    </header>

<!-- bootstrap js link -->

    <!-- custom js here -->
    <script src="script.js"></script>

Breadcrumb - Section 1

PREMIUM

Premium component from Breadcrumb.

Preview

1. Classic

HTML 

        <h3>1. Classic</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 2

PREMIUM

Premium component from Breadcrumb.

Preview

2. Primary

HTML 

        <h3>2. Primary</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 3

PREMIUM

Premium component from Breadcrumb.

Preview

3. Dark

HTML 

        <h3>3. Dark</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 4

PREMIUM

Premium component from Breadcrumb.

Preview

4. Success

HTML 

        <h3>4. Success</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 5

PREMIUM

Premium component from Breadcrumb.

Preview

5. Warning

HTML 

        <h3>5. Warning</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 6

PREMIUM

Premium component from Breadcrumb.

Preview

6. Info

HTML 

        <h3>6. Info</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 7

PREMIUM

Premium component from Breadcrumb.

Preview

7. Danger

HTML 

        <h3>7. Danger</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 8

PREMIUM

Premium component from Breadcrumb.

Preview

8. Centered

HTML 

        <h3>8. Centered</h3>
        <nav>
          <ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 9

PREMIUM

Premium component from Breadcrumb.

Preview

9. Dashboard

HTML 

        <h3>9. Dashboard</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb - Section 10

PREMIUM

Premium component from Breadcrumb.

Preview

10. Ecommerce

HTML 

        <h3>10. Ecommerce</h3>
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active">Current</li>
          </ol>
        </nav>

Breadcrumb-Section - Classic Center

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 1

Classic Center

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-primary text-white rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-light text-dark mb-3">Section 1</span>
<h2 class="fw-bold">Classic Center</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Gradient

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 2

Gradient

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-dark text-white rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-light text-dark mb-3">Section 2</span>
<h2 class="fw-bold">Gradient</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Dark Hero

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 3

Dark Hero

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-secondary text-white rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-light text-dark mb-3">Section 3</span>
<h2 class="fw-bold">Dark Hero</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Light Minimal

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 4

Light Minimal

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-light text-dark rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-dark mb-3">Section 4</span>
<h2 class="fw-bold">Light Minimal</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-dark text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-dark text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-dark" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Primary Banner

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 5

Primary Banner

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-success text-white rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-light text-dark mb-3">Section 5</span>
<h2 class="fw-bold">Primary Banner</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Image Style

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 6

Image Style

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-info text-dark rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-dark mb-3">Section 6</span>
<h2 class="fw-bold">Image Style</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-dark text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-dark text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-dark" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Card Style

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 7

Card Style

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-warning text-dark rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-dark mb-3">Section 7</span>
<h2 class="fw-bold">Card Style</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-dark text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-dark text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-dark" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Split Header

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 8

Split Header

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-danger text-white rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-light text-dark mb-3">Section 8</span>
<h2 class="fw-bold">Split Header</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Glass Style

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 9

Glass Style

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-primary text-white rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-light text-dark mb-3">Section 9</span>
<h2 class="fw-bold">Glass Style</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

Breadcrumb-Section - Corporate

PREMIUM

Premium component from Breadcrumb-Section.

Preview
Section 10

Corporate

Modern centered Bootstrap 5 breadcrumb layout.

HTML 

<div class="bg-dark text-white rounded-4 p-5 text-center shadow-sm">
<span class="badge bg-light text-dark mb-3">Section 10</span>
<h2 class="fw-bold">Corporate</h2>
<p class="mb-4">Modern centered Bootstrap 5 breadcrumb layout.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Pages</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>

check-out

PREMIUM

Premium component from check-out.

Preview
Billing Address
Valid first name is required.
Valid last name is required.
Please enter a valid email address for shipping updates.
Please enter your shipping address.
Please select a valid country.
Please provide a valid state.
Zip code required.
Payment
Full name as displayed on card
Name on card is required
Credit card number is required
Expiration date required
Security code required
Your Cart
  • Product Name 1 $12.00
  • Product Name 2 (Color: Black) $8.00
  • Product Name 3 $5.00
  • Total amount

    (including VAT)
    $25.00
HTML 


    <!-- Simple Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
        <div class="container">
            <a class="navbar-brand" href="#"><i class="fas fa-shopping-bag"></i> MyStore</a>
        </div>
    </nav>

    <!-- 1. Create a html form structure -->
    <div class="container checkout-container">
        <div class="row">
            
            <!-- LEFT COLUMN: Billing & Payment Form -->
            <div class="col-lg-8">
                <form id="checkoutForm" class="needs-validation" novalidate="">
                    
                    <!-- Billing Address Section -->
                    <div class="card mb-4 shadow-sm">
                        <div class="card-header">
                            <i class="fas fa-address-card me-2"></i> Billing Address
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <label for="firstName" class="form-label">First name</label>
                                    <input type="text" class="form-control" id="firstName" placeholder="" value="" required="">
                                    <div class="invalid-feedback">Valid first name is required.</div>
                                </div>

                                <div class="col-sm-6">
                                    <label for="lastName" class="form-label">Last name</label>
                                    <input type="text" class="form-control" id="lastName" placeholder="" value="" required="">
                                    <div class="invalid-feedback">Valid last name is required.</div>
                                </div>

                                <div class="col-12">
                                    <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
                                    <input type="email" class="form-control" id="email" placeholder="you@example.com">
                                    <div class="invalid-feedback">Please enter a valid email address for shipping updates.</div>
                                </div>

                                <div class="col-12">
                                    <label for="address" class="form-label">Address</label>
                                    <input type="text" class="form-control" id="address" placeholder="1234 Main St" required="">
                                    <div class="invalid-feedback">Please enter your shipping address.</div>
                                </div>

                                <div class="col-12">
                                    <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
                                    <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
                                </div>

                                <div class="col-md-5">
                                    <label for="country" class="form-label">Country</label>
                                    <select class="form-select" id="country" required="">
                                        <option value="">Choose...</option>
                                        <option>United States</option>
                                        <option>United Kingdom</option>
                                        <option>Canada</option>
                                        <option>Australia</option>
                                    </select>
                                    <div class="invalid-feedback">Please select a valid country.</div>
                                </div>

                                <div class="col-md-4">
                                    <label for="state" class="form-label">State</label>
                                    <select class="form-select" id="state" required="">
                                        <option value="">Choose...</option>
                                        <option>California</option>
                                        <option>New York</option>
                                        <option>Texas</option>
                                    </select>
                                    <div class="invalid-feedback">Please provide a valid state.</div>
                                </div>

                                <div class="col-md-3">
                                    <label for="zip" class="form-label">Zip</label>
                                    <input type="text" class="form-control" id="zip" placeholder="" required="">
                                    <div class="invalid-feedback">Zip code required.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Section -->
                    <div class="card mb-4 shadow-sm">
                        <div class="card-header">
                            <i class="fas fa-credit-card me-2"></i> Payment
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="cc-name" class="form-label">Name on card</label>
                                    <input type="text" class="form-control" id="cc-name" placeholder="" required="">
                                    <small class="text-muted">Full name as displayed on card</small>
                                    <div class="invalid-feedback">Name on card is required</div>
                                </div>

                                <div class="col-md-6">
                                    <label for="cc-number" class="form-label">Credit card number</label>
                                    <input type="text" class="form-control" id="cc-number" placeholder="0000 0000 0000 0000" maxlength="19" required="">
                                    <div class="invalid-feedback">Credit card number is required</div>
                                </div>

                                <div class="col-md-3">
                                    <label for="cc-expiration" class="form-label">Expiration</label>
                                    <input type="text" class="form-control" id="cc-expiration" placeholder="MM/YY" maxlength="5" required="">
                                    <div class="invalid-feedback">Expiration date required</div>
                                </div>

                                <div class="col-md-3">
                                    <label for="cc-cvv" class="form-label">CVV</label>
                                    <input type="text" class="form-control" id="cc-cvv" placeholder="123" maxlength="3" required="">
                                    <div class="invalid-feedback">Security code required</div>
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="same-address">
                                <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="save-info">
                                <label class="form-check-label" for="save-info">Save this information for next time</label>
                            </div>
                        </div>
                    </div>

                    <button class="w-100 btn btn-primary btn-lg mb-5" type="submit">Continue to checkout</button>
                </form>
            </div>

            <!-- RIGHT COLUMN: Order Summary -->
            <div class="col-lg-4">
                <div class="card summary-card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">Your Cart</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush mb-3">
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
                                Product Name 1
                                <span>$12.00</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0 pb-0">
                                Product Name 2 (Color: Black)
                                <span>$8.00</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                Product Name 3
                                <span>$5.00</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
                                <div>
                                    <strong>Total amount</strong>
                                    <strong>
                                        <p class="mb-0">(including VAT)</p>
                                    </strong>
                                </div>
                                <span><strong>$25.00</strong></span>
                            </li>
                        </ul>

                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Promo code">
                            <button type="button" class="btn btn-secondary">Redeem</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 3. Add necessary js and jquery lib -->
    <!-- jQuery (Requested) -->

    <!-- Bootstrap Bundle (JS) -->

<!-- 4. Add the Validation -->
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict'

            // Fetch the form we want to apply custom Bootstrap validation styles to
            var form = document.getElementById('checkoutForm')

            // Listen for Submit event
            form.addEventListener('submit', function (event) {
                // Check if form is valid
                if (form.checkValidity() === false) {
                    event.preventDefault()
                    event.stopPropagation()
                } else {
                    // If valid, prevent actual submission for this demo and show success
                    event.preventDefault();
                    alert("Checkout Successful! This is a demo.");
                    form.reset();
                    form.classList.remove('was-validated');
                }

                form.classList.add('was-validated')
            }, false)
        })()

        // jQuery Example (as requested)
        $(document).ready(function(){
            // Simple example: Format credit card number with spaces
            $('#cc-number').on('input', function() {
                var val = $(this).val().replace(/\D/g, '').substring(0,16);
                var formatted = val.match(/.{1,4}/g)?.join(' ') || val;
                $(this).val(formatted);
            });
        });
    </script>

Clients-Feedback - What My Clients Say

PREMIUM

Premium component from Clients-Feedback.

Preview
Testimonials

What My Clients Say

Trusted by clients for delivering responsive, high-quality and professional web solutions.

HTML 


    <div class="container">

        <!-- Section Title -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-7 text-center">

                <span class="badge bg-primary px-3 py-2 mb-3">
                    Testimonials
                </span>

                <h2 class="fw-bold display-5">
                    What My Clients Say
                </h2>

                <p class="text-secondary">
                    Trusted by clients for delivering responsive, high-quality
                    and professional web solutions.
                </p>

            </div>

        </div>

        <!-- Carousel -->

        <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">

            <div class="carousel-inner">

                <!-- Item 1 -->

                <div class="carousel-item active">

                    <div class="row justify-content-center">

                        <div class="col-lg-8">

                            <div class="card border-0 shadow-lg rounded-4">

                                <div class="card-body text-center p-5">

                                    <img src="https://i.pravatar.cc/120?img=1" class="rounded-circle border border-4 border-primary mb-4" width="100" height="100" alt="Client">

                                    <h4 class="fw-bold">
                                        John Smith
                                    </h4>

                                    <p class="text-muted">
                                        CEO, ABC Company
                                    </p>

                                    <div class="text-warning fs-5 mb-3">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>

                                    <p class="lead text-secondary">
                                        "Excellent work! The project was
                                        completed on time with outstanding
                                        quality. Highly recommended."
                                    </p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Item 2 -->

                <div class="carousel-item">

                    <div class="row justify-content-center">

                        <div class="col-lg-8">

                            <div class="card border-0 shadow-lg rounded-4">

                                <div class="card-body text-center p-5">

                                    <img src="https://i.pravatar.cc/120?img=12" class="rounded-circle border border-4 border-success mb-4" width="100" height="100" alt="Client">

                                    <h4 class="fw-bold">
                                        Sarah Johnson
                                    </h4>

                                    <p class="text-muted">
                                        Project Manager
                                    </p>

                                    <div class="text-warning fs-5 mb-3">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>

                                    <p class="lead text-secondary">
                                        "Very professional, excellent
                                        communication and delivered exactly
                                        what we needed."
                                    </p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Item 3 -->

                <div class="carousel-item">

                    <div class="row justify-content-center">

                        <div class="col-lg-8">

                            <div class="card border-0 shadow-lg rounded-4">

                                <div class="card-body text-center p-5">

                                    <img src="https://i.pravatar.cc/120?img=20" class="rounded-circle border border-4 border-danger mb-4" width="100" height="100" alt="Client">

                                    <h4 class="fw-bold">
                                        Michael Brown
                                    </h4>

                                    <p class="text-muted">
                                        Business Owner
                                    </p>

                                    <div class="text-warning fs-5 mb-3">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>

                                    <p class="lead text-secondary">
                                        "Fast delivery, modern design and
                                        excellent support. Looking forward to
                                        working together again."
                                    </p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Controls -->

            <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">

                <span class="carousel-control-prev-icon bg-dark rounded-circle p-3"></span>

            </button>

            <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">

                <span class="carousel-control-next-icon bg-dark rounded-circle p-3"></span>

            </button>

            <!-- Indicators -->

            <div class="carousel-indicators position-static mt-4">

                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active"></button>

                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>

                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>

            </div>

        </div>

    </div>

Contact-us - Let's Work Together

PREMIUM

Premium component from Contact-us.

Preview
Contact Me

Let's Work Together

Feel free to contact me for your next project or any questions. I'm always happy to discuss new opportunities.

Address

Dhaka, Bangladesh

Email

yourmail@example.com

Phone

+8801XXXXXXXXX

Send Message

My Location

Follow Me

Facebook X LinkedIn GitHub
HTML 


    <div class="container">

        <!-- Section Heading -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-7 text-center">

                <span class="badge bg-primary px-3 py-2 mb-3">
                    Contact Me
                </span>

                <h2 class="display-5 fw-bold">
                    Let's Work Together
                </h2>

                <p class="text-secondary">
                    Feel free to contact me for your next project or any questions.
                    I'm always happy to discuss new opportunities.
                </p>

            </div>

        </div>

        <!-- Contact Info -->

        <div class="row g-4 mb-5">

            <div class="col-lg-4 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:80px;height:80px;">

                            <i class="bi bi-geo-alt-fill fs-1 text-primary"></i>

                        </div>

                        <h4 class="fw-bold">
                            Address
                        </h4>

                        <p class="text-secondary mb-0">
                            Dhaka, Bangladesh
                        </p>

                    </div>

                </div>

            </div>

            <div class="col-lg-4 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:80px;height:80px;">

                            <i class="bi bi-envelope-fill fs-1 text-success"></i>

                        </div>

                        <h4 class="fw-bold">
                            Email
                        </h4>

                        <p class="text-secondary mb-0">
                            yourmail@example.com
                        </p>

                    </div>

                </div>

            </div>

            <div class="col-lg-4 col-md-6 mx-md-auto">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:80px;height:80px;">

                            <i class="bi bi-telephone-fill fs-1 text-danger"></i>

                        </div>

                        <h4 class="fw-bold">
                            Phone
                        </h4>

                        <p class="text-secondary mb-0">
                            +8801XXXXXXXXX
                        </p>

                    </div>

                </div>

            </div>

        </div>

        <!-- Contact Form + Map -->

        <div class="row g-4">

            <div class="col-lg-6">

                <div class="card border-0 shadow-lg rounded-4">

                    <div class="card-body p-4">

                        <h3 class="fw-bold mb-4">
                            Send Message
                        </h3>

                        <form>

                            <div class="row">

                                <div class="col-md-6 mb-3">

                                    <input type="text" class="form-control form-control-lg" placeholder="Full Name">

                                </div>

                                <div class="col-md-6 mb-3">

                                    <input type="email" class="form-control form-control-lg" placeholder="Email Address">

                                </div>

                            </div>

                            <div class="mb-3">

                                <input type="text" class="form-control form-control-lg" placeholder="Subject">

                            </div>

                            <div class="mb-4">

                                <textarea class="form-control" rows="6" placeholder="Your Message"></textarea>

                            </div>

                            <button class="btn btn-primary btn-lg w-100 rounded-pill">
                                <i class="bi bi-send-fill me-2"></i>
                                Send Message
                            </button>

                        </form>

                    </div>

                </div>

            </div>

            <!-- Google Map -->

            <div class="col-lg-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body p-3">

                        <h3 class="fw-bold text-center mb-3">
                            My Location
                        </h3>

                        <div class="ratio ratio-4x3 rounded overflow-hidden">

                            <iframe src="https://www.google.com/maps?q=Dhaka,Bangladesh&amp;output=embed" loading="lazy" allowfullscreen="">
                            </iframe>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Social Media -->

        <div class="row justify-content-center mt-5">

            <div class="col-lg-8">

                <div class="card border-0 shadow-lg rounded-4">

                    <div class="card-body text-center p-5">

                        <h3 class="fw-bold mb-4">
                            Follow Me
                        </h3>

                        <div class="d-flex justify-content-center flex-wrap gap-3">

                            <a href="#" class="btn btn-outline-primary btn-lg rounded-pill">
                                <i class="bi bi-facebook me-2"></i>Facebook
                            </a>

                            <a href="#" class="btn btn-outline-dark btn-lg rounded-pill">
                                <i class="bi bi-twitter-x me-2"></i>X
                            </a>

                            <a href="#" class="btn btn-outline-info btn-lg rounded-pill">
                                <i class="bi bi-linkedin me-2"></i>LinkedIn
                            </a>

                            <a href="#" class="btn btn-outline-secondary btn-lg rounded-pill">
                                <i class="bi bi-github me-2"></i>GitHub
                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

Contact_Us - Contact Us

PREMIUM

Premium component from Contact_Us.

Preview

Contact Us

Lorem ipsum dolor sit amet, consectetur adipisicing.

Contact us.
We'll never share your email with anyone else.
Address

XXXX Mirpur

75008 Dhaka

Bangladesh

Email : email@example.com

Tel. +880 1XXX XXXXXX

HTML 

        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <hr class="my-2 text-warning">
                    <h2>Contact Us</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                    <hr class="my-2 text-warning">
                </div>
                <div class="col-12 col-sm-8">
                    <div class="card">
                        <div class="card-header text-white" style="background: #16C47F;"><i class="fa fa-envelope"></i> Contact us.
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Enter name" required="">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email address</label>
                                    <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" required="">
                                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                                </div>
                                <div class="form-group">
                                    <label for="message">Message</label>
                                    <textarea class="form-control" id="message" rows="6" required=""></textarea>
                                </div>
                                <div class="mx-auto mt-2">
                                <button type="submit" class="btn btn-success text-right px-3">Send Message</button></div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <div class="card bg-light mb-3">
                        <div class="card-header bg-success text-white text-uppercase"><i class="fa fa-home"></i> Address</div>
                        <div class="card-body">
                            <p>XXXX Mirpur</p>
                            <p>75008 Dhaka</p>
                            <p>Bangladesh</p>
                            <p>Email : email@example.com</p>
                            <p>Tel. +880 1XXX XXXXXX</p>
        
                        </div>
        
                    </div>
                </div>
            </div>
        </div>

existing-clients - Existing Clients

PREMIUM

Premium component from existing-clients.

Preview
Trusted By

Existing Clients

Proud to collaborate with businesses, startups and organizations by delivering modern and reliable web solutions.

ABC Company

Software Company

20+ Projects
XYZ IT

IT Solutions

15+ Projects
Digital Agency

Marketing Agency

25+ Projects
Creative Studio

Design Agency

18+ Projects

50+

Happy Clients

120+

Projects Completed

5+

Years Experience

99%

Client Satisfaction

HTML 


    <div class="container">

        <!-- Section Heading -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-7 text-center">

                <span class="badge bg-primary px-3 py-2 mb-3">
                    Trusted By
                </span>

                <h2 class="display-5 fw-bold">
                    Existing Clients
                </h2>

                <p class="text-secondary">
                    Proud to collaborate with businesses, startups and organizations
                    by delivering modern and reliable web solutions.
                </p>

            </div>

        </div>

        <!-- Client Cards -->

        <div class="row g-4">

            <!-- Client 1 -->

            <div class="col-lg-3 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-building fs-1 text-primary"></i>

                        </div>

                        <h5 class="fw-bold">
                            ABC Company
                        </h5>

                        <p class="text-muted small">
                            Software Company
                        </p>

                        <div class="text-warning mb-3">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>

                        <span class="badge bg-primary">
                            20+ Projects
                        </span>

                    </div>

                </div>

            </div>

            <!-- Client 2 -->

            <div class="col-lg-3 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-laptop fs-1 text-success"></i>

                        </div>

                        <h5 class="fw-bold">
                            XYZ IT
                        </h5>

                        <p class="text-muted small">
                            IT Solutions
                        </p>

                        <div class="text-warning mb-3">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>

                        <span class="badge bg-success">
                            15+ Projects
                        </span>

                    </div>

                </div>

            </div>

            <!-- Client 3 -->

            <div class="col-lg-3 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-globe2 fs-1 text-danger"></i>

                        </div>

                        <h5 class="fw-bold">
                            Digital Agency
                        </h5>

                        <p class="text-muted small">
                            Marketing Agency
                        </p>

                        <div class="text-warning mb-3">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>

                        <span class="badge bg-danger">
                            25+ Projects
                        </span>

                    </div>

                </div>

            </div>

            <!-- Client 4 -->

            <div class="col-lg-3 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-4">

                        <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-palette fs-1 text-warning"></i>

                        </div>

                        <h5 class="fw-bold">
                            Creative Studio
                        </h5>

                        <p class="text-muted small">
                            Design Agency
                        </p>

                        <div class="text-warning mb-3">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>

                        <span class="badge bg-warning text-dark">
                            18+ Projects
                        </span>

                    </div>

                </div>

            </div>

        </div>

        <!-- Statistics -->

        <div class="row text-center mt-5 g-4">

            <div class="col-md-3">
                <h2 class="fw-bold text-primary">50+</h2>
                <p class="text-muted">Happy Clients</p>
            </div>

            <div class="col-md-3">
                <h2 class="fw-bold text-success">120+</h2>
                <p class="text-muted">Projects Completed</p>
            </div>

            <div class="col-md-3">
                <h2 class="fw-bold text-danger">5+</h2>
                <p class="text-muted">Years Experience</p>
            </div>

            <div class="col-md-3">
                <h2 class="fw-bold text-warning">99%</h2>
                <p class="text-muted">Client Satisfaction</p>
            </div>

        </div>

    </div>

Farming-Guides - Farming Guide

PREMIUM

Premium component from Farming-Guides.

Preview

Farming Guide

Explore a collection of easy-to-follow farming guides
that cover different aspects of agriculture. Each guide is categorized for easy
navigation based on crop types, seasons, and farming methods.

Planting Techniques

Step-by-step guides on planting various crops.

More Tips
Watering and Irrigation

Efficient watering systems and techniques.

More Tips
Soil Fertility Management

Improve soil quality through natural methods.

More Tips
Harvesting

Get the best tips on when and how to harvest your crops.

More Tips
Planting Techniques

Step-by-step guides on planting various crops.

More Tips
Watering and Irrigation

Efficient watering systems and techniques for different climates.

More Tips
Soil Fertility Management

Improve soil quality through natural methods.

More Tips
Harvesting

Get the best tips on when and how to harvest your crops.

More Tips
Planting Techniques

Step-by-step guides on planting various crops.

More Tips
Watering and Irrigation

Efficient watering systems and techniques for different climates.

More Tips
Soil Fertility Management

Improve soil quality through natural methods.

More Tips
Harvesting

Get the best tips on when and how to harvest your crops.

More Tips
HTML 

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2 class="fs-2 fw-bold text-center">Farming Guide</h2>
                    <p class="text-center fw-semibold">Explore a collection of easy-to-follow farming guides <br> that
                        cover different aspects of agriculture. Each guide is categorized for easy <br> navigation based
                        on crop types, seasons, and farming methods.</p>
                </div>

                <div class="col-12 justify-content-center">
                    <ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">All</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Cereals</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Legume</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-vegetable-tab" data-bs-toggle="pill" data-bs-target="#pills-vegetable" type="button" role="tab" aria-controls="pills-vegetable" aria-selected="false">Vegetable</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-fruit-tab" data-bs-toggle="pill" data-bs-target="#pills-fruit" type="button" role="tab" aria-controls="pills-fruit" aria-selected="false">Fruit</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-monsoon-tab" data-bs-toggle="pill" data-bs-target="#pills-monsoon" type="button" role="tab" aria-controls="pills-monsoon" aria-selected="false">Monsoon</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-winter-tab" data-bs-toggle="pill" data-bs-target="#pills-winter" type="button" role="tab" aria-controls="pills-winter" aria-selected="false">Winter</button>
                        </li>

                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                            <div class="row">
                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/planting.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Planting Techniques</h5>
                                            <p class="card-text">Step-by-step guides on planting various crops.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/watering.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Watering and Irrigation</h5>
                                            <p class="card-text">Efficient watering systems and techniques.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/Soil Fertility.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Soil Fertility Management</h5>
                                            <p class="card-text">Improve soil quality through natural methods.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/Harvesting.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Harvesting</h5>
                                            <p class="card-text">Get the best tips on when and how to harvest your
                                                crops.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                            <div class="row">
                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/planting.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Planting Techniques</h5>
                                            <p class="card-text">Step-by-step guides on planting various crops.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/watering.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Watering and Irrigation</h5>
                                            <p class="card-text">Efficient watering systems and techniques for different
                                                climates.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/Soil Fertility.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Soil Fertility Management</h5>
                                            <p class="card-text">Improve soil quality through natural methods.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/Harvesting.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Harvesting</h5>
                                            <p class="card-text">Get the best tips on when and how to harvest your
                                                crops.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                            <div class="row">
                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/planting.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Planting Techniques</h5>
                                            <p class="card-text">Step-by-step guides on planting various crops.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/watering.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Watering and Irrigation</h5>
                                            <p class="card-text">Efficient watering systems and techniques for different
                                                climates.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/Soil Fertility.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Soil Fertility Management</h5>
                                            <p class="card-text">Improve soil quality through natural methods.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-4 col-lg-3">
                                    <div class="card">
                                        <div class="fg_img">
                                            <img src="assets/img/Harvesting.jpg" alt="" class="card-img-top">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">Harvesting</h5>
                                            <p class="card-text">Get the best tips on when and how to harvest your
                                                crops.</p>
                                            <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- <div class="col-12 col-md-4 col-lg-3">
                    <div class="card">
                        <div class="fg_img">
                            <img src="assets/img/planting.jpg" alt="" class="card-img-top">
                        </div>
                        <div class="card-body text-center">
                          <h5 class="card-title">Planting Techniques</h5>
                          <p class="card-text">Step-by-step guides on planting various crops.</p>
                          <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-4 col-lg-3">
                    <div class="card">
                        <div class="fg_img">
                            <img src="assets/img/watering.jpg" alt="" class="card-img-top">
                        </div>
                        <div class="card-body text-center">
                          <h5 class="card-title">Watering and Irrigation</h5>
                          <p class="card-text">Efficient watering systems and techniques for different climates.</p>
                          <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-4 col-lg-3">
                    <div class="card">
                        <div class="fg_img">
                            <img src="assets/img/Soil Fertility.jpg" alt="" class="card-img-top">
                        </div>
                        <div class="card-body text-center">
                          <h5 class="card-title">Soil Fertility Management</h5>
                          <p class="card-text">Improve soil quality through natural methods.</p>
                          <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-4 col-lg-3">
                    <div class="card">
                        <div class="fg_img">
                            <img src="assets/img/Harvesting.jpg" alt="" class="card-img-top">
                        </div>
                        <div class="card-body text-center">
                          <h5 class="card-title">Harvesting</h5>
                          <p class="card-text">Get the best tips on when and how to harvest your crops.</p>
                          <a href="#" class="btn btn-success fw-semibold">More Tips</a>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>

header-nav

PREMIUM

Premium component from header-nav.

Preview
+880 1712-345678 info@example.com
|
HTML 


<div class="bg-dark text-white py-2 border-bottom">
    <div class="container">

        <div class="row align-items-center">

            <!-- Left -->
            <div class="col-lg-4 text-center text-lg-start mb-2 mb-lg-0">

                <a href="#" class="text-white text-decoration-none me-3">
                    <i class="fas fa-phone"></i> +880 1712-345678
                </a>

                <a href="#" class="text-white text-decoration-none">
                    <i class="fas fa-envelope"></i> info@example.com
                </a>

            </div>

            <!-- Center -->
            <div class="col-lg-4 text-center mb-2 mb-lg-0">

                <i class="fas fa-calendar-alt"></i>

                <span id="date"></span>

                |

                <i class="fas fa-clock"></i>

                <span id="time"></span>

            </div>

            <!-- Right -->
            <div class="col-lg-4 text-center text-lg-end">

                <a href="#" class="text-white me-3">
                    <i class="fab fa-facebook-f"></i>
                </a>

                <a href="#" class="text-white me-3">
                    <i class="fab fa-twitter"></i>
                </a>

                <a href="#" class="text-white me-3">
                    <i class="fab fa-linkedin-in"></i>
                </a>

                <a href="#" class="text-white me-3">
                    <i class="fab fa-instagram"></i>
                </a>

                <a href="#" class="text-white">
                    <i class="fab fa-youtube"></i>
                </a>

            </div>

        </div>

    </div>
</div>

<!-- ===========================
     Navbar
=========================== -->

<nav class="navbar navbar-expand-lg bg-white shadow-sm">

    <div class="container">

        <a class="navbar-brand fw-bold fs-3" href="#">
            LOGO
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar">

            <ul class="navbar-nav mx-auto">

                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>

                <li class="nav-item dropdown">

                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        Pages
                    </a>

                    <ul class="dropdown-menu">

                        <li>
                            <a class="dropdown-item" href="#">
                                Portfolio
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item" href="#">
                                Team
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item" href="#">
                                FAQ
                            </a>
                        </li>

                    </ul>

                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>

            </ul>

            <a href="#" class="btn btn-primary">
                Get Started
            </a>

        </div>

    </div>

</nav>

<!-- Bootstrap JS -->

<!-- Date & Time -->

<script>
function updateDateTime() {

    const now = new Date();

    const dateOptions = {
        weekday: "short",
        year: "numeric",
        month: "short",
        day: "numeric"
    };

    const timeOptions = {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
    };

    document.getElementById("date").innerHTML =
        now.toLocaleDateString("en-US", dateOptions);

    document.getElementById("time").innerHTML =
        now.toLocaleTimeString("en-US", timeOptions);
}

updateDateTime();

setInterval(updateDateTime, 1000);
</script>

hero - Section 1

PREMIUM

Premium component from hero.

Preview

Build Amazing Websites

Create responsive websites using Bootstrap 5.

Get Started Learn More
HTML 

        <div class="text-center">
            <h1 class="display-4 fw-bold">Build Amazing Websites</h1>
            <p class="lead">Create responsive websites using Bootstrap 5.</p>

            <a href="#" class="btn btn-light btn-lg me-2">Get Started</a>
            <a href="#" class="btn btn-outline-light btn-lg">Learn More</a>
        </div>

hero - Section 2

PREMIUM

Premium component from hero.

Preview

Modern UI Design

Build beautiful landing pages quickly using Bootstrap.

HTML 

        <div class="row align-items-center">

            <div class="col-lg-6">
                <h1 class="display-5 fw-bold">Modern UI Design</h1>

                <p class="lead">
                    Build beautiful landing pages quickly using Bootstrap.
                </p>

                <button class="btn btn-warning btn-lg">Explore</button>
            </div>

            <div class="col-lg-6 text-center">
                <img src="https://picsum.photos/500/350" class="img-fluid rounded" alt="">
            </div>

        </div>

hero - Section 3

PREMIUM

Premium component from hero.

Preview
NEW

Grow Your Business

Professional solutions for startups and companies.

Start Today
HTML 

        <div class="text-center">

            <span class="badge bg-success mb-3">
                NEW
            </span>

            <h1 class="display-5">
                Grow Your Business
            </h1>

            <p class="lead">
                Professional solutions for startups and companies.
            </p>

            <a href="#" class="btn btn-success btn-lg">
                Start Today
            </a>

        </div>

hero - Section 4

PREMIUM

Premium component from hero.

Preview

Learn Bootstrap 5

Master responsive web design with practical examples.

Read More
HTML 


        <div class="row">

            <div class="col-lg-7">

                <h1 class="display-4 fw-bold">
                    Learn Bootstrap 5
                </h1>

                <p class="lead">
                    Master responsive web design with practical examples.
                </p>

                <a href="#" class="btn btn-dark">
                    Read More
                </a>

            </div>

        </div>

hero - Section 5

PREMIUM

Premium component from hero.

Preview

Special Offer

Save up to 50% this month.

Shop Now
HTML 


        <div class="text-center">

            <h1 class="display-3 fw-bold">
                Special Offer
            </h1>

            <p class="lead">
                Save up to 50% this month.
            </p>

            <a href="#" class="btn btn-dark btn-lg">
                Shop Now
            </a>

        </div>

hero - Section 6

PREMIUM

Premium component from hero.

Preview

Build Faster

Bootstrap helps you create responsive websites quickly.

Download
HTML 


        <div class="row align-items-center">

            <div class="col-md-8">

                <h1 class="display-5 fw-bold">
                    Build Faster
                </h1>

                <p class="lead">
                    Bootstrap helps you create responsive websites quickly.
                </p>

            </div>

            <div class="col-md-4 text-end">

                <a href="#" class="btn btn-light btn-lg">
                    Download
                </a>

            </div>

        </div>

hero - Section 7

PREMIUM

Premium component from hero.

Preview

Welcome to Our Website

Everything you need in one place.

Login Register
HTML 


        <div class="text-center">

            <h1 class="display-4">
                Welcome to Our Website
            </h1>

            <p class="lead">
                Everything you need in one place.
            </p>

            <div class="mt-4">

                <a href="#" class="btn btn-light me-2">
                    Login
                </a>

                <a href="#" class="btn btn-outline-light">
                    Register
                </a>

            </div>

        </div>

hero - Section 8

PREMIUM

Premium component from hero.

Preview

Creative Agency

We design websites, brands, and digital products.

View Portfolio
HTML 


        <div class="row align-items-center">

            <div class="col-lg-6">

                <h1 class="display-4 fw-bold">
                    Creative Agency
                </h1>

                <p class="lead">
                    We design websites, brands, and digital products.
                </p>

                <a href="#" class="btn btn-light">
                    View Portfolio
                </a>

            </div>

            <div class="col-lg-6 text-center">

                <img src="https://picsum.photos/500/300" class="img-fluid rounded" alt="">

            </div>

        </div>

History-section - History Section 1

PREMIUM

Premium component from History-section.

Preview
Image 1
Since 2011

History Section 1

Lorem ipsum dolor sit amet.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 1
            </div>
          </div>
          <div class="col-lg-6">
            <span class="badge bg-primary">Since 2011</span>
            <h2 class="mt-3">History Section 1</h2>
            <p class="text-muted">Lorem ipsum dolor sit amet.</p>
          </div>
        </div>

History-section - History Section 2

PREMIUM

Premium component from History-section.

Preview
Image 2

History Section 2

Our journey of growth and innovation.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 2
            </div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h2>History Section 2</h2>
            <p class="text-muted">Our journey of growth and innovation.</p>
          </div>
        </div>

History-section - History Section 3

PREMIUM

Premium component from History-section.

Preview
Image 3
Since 2013

History Section 3

Lorem ipsum dolor sit amet.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 3
            </div>
          </div>
          <div class="col-lg-6">
            <span class="badge bg-primary">Since 2013</span>
            <h2 class="mt-3">History Section 3</h2>
            <p class="text-muted">Lorem ipsum dolor sit amet.</p>
          </div>
        </div>

History-section - History Section 4

PREMIUM

Premium component from History-section.

Preview
Image 4

History Section 4

Our journey of growth and innovation.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 4
            </div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h2>History Section 4</h2>
            <p class="text-muted">Our journey of growth and innovation.</p>
          </div>
        </div>

History-section - History Section 5

PREMIUM

Premium component from History-section.

Preview
Image 5
Since 2015

History Section 5

Lorem ipsum dolor sit amet.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 5
            </div>
          </div>
          <div class="col-lg-6">
            <span class="badge bg-primary">Since 2015</span>
            <h2 class="mt-3">History Section 5</h2>
            <p class="text-muted">Lorem ipsum dolor sit amet.</p>
          </div>
        </div>

History-section - History Section 6

PREMIUM

Premium component from History-section.

Preview
Image 6

History Section 6

Our journey of growth and innovation.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 6
            </div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h2>History Section 6</h2>
            <p class="text-muted">Our journey of growth and innovation.</p>
          </div>
        </div>

History-section - History Section 7

PREMIUM

Premium component from History-section.

Preview
Image 7
Since 2017

History Section 7

Lorem ipsum dolor sit amet.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 7
            </div>
          </div>
          <div class="col-lg-6">
            <span class="badge bg-primary">Since 2017</span>
            <h2 class="mt-3">History Section 7</h2>
            <p class="text-muted">Lorem ipsum dolor sit amet.</p>
          </div>
        </div>

History-section - History Section 8

PREMIUM

Premium component from History-section.

Preview
Image 8

History Section 8

Our journey of growth and innovation.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 8
            </div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h2>History Section 8</h2>
            <p class="text-muted">Our journey of growth and innovation.</p>
          </div>
        </div>

History-section - History Section 9

PREMIUM

Premium component from History-section.

Preview
Image 9
Since 2019

History Section 9

Lorem ipsum dolor sit amet.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 9
            </div>
          </div>
          <div class="col-lg-6">
            <span class="badge bg-primary">Since 2019</span>
            <h2 class="mt-3">History Section 9</h2>
            <p class="text-muted">Lorem ipsum dolor sit amet.</p>
          </div>
        </div>

History-section - History Section 10

PREMIUM

Premium component from History-section.

Preview
Image 10

History Section 10

Our journey of growth and innovation.

HTML 

        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="bg-secondary-subtle rounded d-flex align-items-center justify-content-center" style="height: 280px">
              Image 10
            </div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <h2>History Section 10</h2>
            <p class="text-muted">Our journey of growth and innovation.</p>
          </div>
        </div>

left(accordion)-Right-Pan - Air Conditioner

PREMIUM

Premium component from left(accordion)-Right-Pan.

Preview

Our Hot Products

...
Mobile

Some quick example text to build on the card title and make up the bulk of the card’s content.

Add to Cart
...
Mobile 2

Some quick example text to build on the card title and make up the bulk of the card’s content.

Add to Cart
...
Mobile 3

Some quick example text to build on the card title and make up the bulk of the card’s content.

Add to Cart
HTML 

      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="accordion accordion-flush" id="accordionFlushExample">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                    Air Conditioner
                  </button>
                </h2>
                <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                  <div class="accordion-body">
                    <ul class="list-unstyled">
                      <li>
                        <a href="" class="text-decoration-none text-dark">Walton</a>
                      </li>
                      <li class="my-3">
                        <a href="" class="text-decoration-none text-dark">LG</a>
                      </li>
                      <li>
                        <a href="" class="text-decoration-none text-dark">Vision</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                    Smartphones
                  </button>
                </h2>
                <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                  <div class="accordion-body">
                    <ul class="list-unstyled">
                      <li>
                        <a href="" class="text-decoration-none text-dark">Walton</a>
                      </li>
                      <li class="my-3">
                        <a href="" class="text-decoration-none text-dark">LG</a>
                      </li>
                      <li>
                        <a href="" class="text-decoration-none text-dark">Nokia</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                    Computers
                  </button>
                </h2>
                <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                  <div class="accordion-body">
                    <ul class="list-unstyled">
                      <li>
                        <a href="" class="text-decoration-none text-dark">Dell</a>
                      </li>
                      <li class="my-3">
                        <a href="" class="text-decoration-none text-dark">Hp</a>
                      </li>
                      <li>
                        <a href="" class="text-decoration-none text-dark">Asuse</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-8">
            <div>
              <h2>Our Hot Products</h2>
            </div>

            <div class="row">
              <div class="col-md-4">
                <div class="card">
                  <img src="assets/images/Smartphone_20.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Mobile</h5>
                    <p class="card-text">
                      Some quick example text to build on the card title and
                      make up the bulk of the card’s content.
                    </p>
                    <div class="text-center">
                        <a href="#" class="btn btn-outline-warning">Add to Cart</a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="card">
                  <img src="assets/images/Smartphone_20.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Mobile 2</h5>
                    <p class="card-text">
                      Some quick example text to build on the card title and
                      make up the bulk of the card’s content.
                    </p>
                    <div class="text-center">
                        <a href="#" class="btn btn-outline-warning">Add to Cart</a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="card">
                  <img src="assets/images/Smartphone_20.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Mobile 3</h5>
                    <p class="card-text">
                      Some quick example text to build on the card title and
                      make up the bulk of the card’s content.
                    </p>
                    <div class="text-center">
                        <a href="#" class="btn btn-outline-warning">Add to Cart</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

left(accordion)-Right-Pan - Section 2

PREMIUM

Premium component from left(accordion)-Right-Pan.

Preview
Or you can use this
HTML 
Or you can use this

left(accordion)-Right-Pan - ❄ Air Conditioner

PREMIUM

Premium component from left(accordion)-Right-Pan.

Preview
📂 Categories

🔥 Hot Products

View All
Sale
Samsung Galaxy

8GB RAM | 128GB Storage

$499

🛒 Add to Cart
New
iPhone 16

256GB Storage

$899

🛒 Add to Cart
Hot
Xiaomi Note

12GB RAM | 256GB

$399

🛒 Add to Cart
HTML 

    <div class="container">

        <div class="row g-4">

            <!-- Left Sidebar -->
            <div class="col-lg-3">

                <div class="card shadow-sm border-0 rounded-4">

                    <div class="card-header bg-warning text-dark fw-bold fs-5">
                        📂 Categories
                    </div>

                    <div class="accordion accordion-flush" id="categoryAccordion">

                        <!-- Air Conditioner -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#ac">
                                    ❄ Air Conditioner
                                </button>
                            </h2>

                            <div id="ac" class="accordion-collapse collapse show" data-bs-parent="#categoryAccordion">

                                <div class="accordion-body">

                                    <ul class="list-group list-group-flush">

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">Walton</a>
                                        </li>

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">LG</a>
                                        </li>

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">Vision</a>
                                        </li>

                                    </ul>

                                </div>

                            </div>
                        </div>

                        <!-- Smartphones -->
                        <div class="accordion-item">

                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#phone">
                                    📱 Smartphones
                                </button>
                            </h2>

                            <div id="phone" class="accordion-collapse collapse" data-bs-parent="#categoryAccordion">

                                <div class="accordion-body">

                                    <ul class="list-group list-group-flush">

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">Samsung</a>
                                        </li>

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">Apple</a>
                                        </li>

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">Xiaomi</a>
                                        </li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                        <!-- Computers -->
                        <div class="accordion-item">

                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#computer">
                                    💻 Computers
                                </button>
                            </h2>

                            <div id="computer" class="accordion-collapse collapse" data-bs-parent="#categoryAccordion">

                                <div class="accordion-body">

                                    <ul class="list-group list-group-flush">

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">Dell</a>
                                        </li>

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">HP</a>
                                        </li>

                                        <li class="list-group-item">
                                            <a href="#" class="text-decoration-none text-dark">Asus</a>
                                        </li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Product Section -->
            <div class="col-lg-9">

                <div class="d-flex justify-content-between align-items-center mb-4">

                    <h2 class="fw-bold">🔥 Hot Products</h2>

                    <a href="#" class="btn btn-warning rounded-pill px-4">
                        View All
                    </a>

                </div>

                <div class="row g-4">

                    <!-- Product -->
                    <div class="col-md-6 col-lg-4">

                        <div class="card h-100 shadow border-0 rounded-4">

                            <span class="badge bg-danger position-absolute m-3">
                                Sale
                            </span>

                            <img src="assets/images/Smartphone_20.jpg" class="card-img-top rounded-top-4" alt="">

                            <div class="card-body text-center">

                                <h5 class="fw-bold">
                                    Samsung Galaxy
                                </h5>

                                <p class="text-muted">
                                    8GB RAM | 128GB Storage
                                </p>

                                <h4 class="text-warning fw-bold">
                                    $499
                                </h4>

                                <a href="#" class="btn btn-warning rounded-pill w-100">
                                    🛒 Add to Cart
                                </a>

                            </div>

                        </div>

                    </div>

                    <!-- Product -->
                    <div class="col-md-6 col-lg-4">

                        <div class="card h-100 shadow border-0 rounded-4">

                            <span class="badge bg-success position-absolute m-3">
                                New
                            </span>

                            <img src="assets/images/Smartphone_20.jpg" class="card-img-top rounded-top-4" alt="">

                            <div class="card-body text-center">

                                <h5 class="fw-bold">
                                    iPhone 16
                                </h5>

                                <p class="text-muted">
                                    256GB Storage
                                </p>

                                <h4 class="text-warning fw-bold">
                                    $899
                                </h4>

                                <a href="#" class="btn btn-warning rounded-pill w-100">
                                    🛒 Add to Cart
                                </a>

                            </div>

                        </div>

                    </div>

                    <!-- Product -->
                    <div class="col-md-6 col-lg-4">

                        <div class="card h-100 shadow border-0 rounded-4">

                            <span class="badge bg-primary position-absolute m-3">
                                Hot
                            </span>

                            <img src="assets/images/Smartphone_20.jpg" class="card-img-top rounded-top-4" alt="">

                            <div class="card-body text-center">

                                <h5 class="fw-bold">
                                    Xiaomi Note
                                </h5>

                                <p class="text-muted">
                                    12GB RAM | 256GB
                                </p>

                                <h4 class="text-warning fw-bold">
                                    $399
                                </h4>

                                <a href="#" class="btn btn-warning rounded-pill w-100">
                                    🛒 Add to Cart
                                </a>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

Left(img)-Right-Pan - oraimo-nutrifry-s1-ultra-6l

PREMIUM

Premium component from Left(img)-Right-Pan.

Preview

oraimo-nutrifry-s1-ultra-6l

Description

Key Features & Specifications of Oraimo NutriFry S1 Ultra 6L 1500W Air Fryer (OAF-521A) Key Features:
  • Smart Recipes Controlled by App
  • 2 Hour Cooking Memory Backup
  • Titanium Antibacterial Coating
HTML 

  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <img src="assets/images/oraimo-nutrifry-s1-ultra-6l-1500w-air-fryer-_oaf-521a_-4-15-26-1.jpg" alt="" class="w-100">
      </div>

      <div class="col-md-8">
        <div class="card p-4">
          <h2 class="card-title">oraimo-nutrifry-s1-ultra-6l</h2>

          <div class="dic">
            <h4>Description</h4>
            <h5>
              Key Features &amp; Specifications of Oraimo NutriFry S1 Ultra 6L 1500W
              Air Fryer (OAF-521A) Key Features:
            </h5>

            <ul>
              <li>Smart Recipes Controlled by App</li>
              <li>2 Hour Cooking Memory Backup</li>
              <li>Titanium Antibacterial Coating</li>
            </ul>
          </div>
          <button class="btn btn-outline-success">Add To Cart</button>
        </div>
      </div>
    </div>
  </div>

Left(img)-Right-Pan - Section 2

PREMIUM

Premium component from Left(img)-Right-Pan.

Preview
Or Your Can Try This
HTML 
Or Your Can Try This

Left(img)-Right-Pan - Oraimo NutriFry S1 Ultra 6L

PREMIUM

Premium component from Left(img)-Right-Pan.

Preview
Product
In Stock

Oraimo NutriFry S1 Ultra 6L

৳9,990

Enjoy healthy cooking with the Oraimo NutriFry S1 Ultra 6L Air Fryer. Prepare delicious meals using little to no oil while preserving flavor and nutrition.

Key Features
  • ✅ Smart Recipes Controlled by App
  • ✅ 2 Hour Cooking Memory Backup
  • ✅ Titanium Antibacterial Coating
  • ✅ 6L Large Capacity
  • ✅ 1500W Fast Heating
HTML 

  <div class="container">
    <div class="card border-0 shadow rounded-4 overflow-hidden">
      <div class="row g-0 align-items-center">
        <!-- Product Image -->
        <div class="col-lg-5 overflow-hidden">
          <img src="assets/images/oraimo-nutrifry-s1-ultra-6l-1500w-air-fryer-_oaf-521a_-4-15-26-1.jpg" class="img-fluid w-100 rounded-5" alt="Product" onmouseover="
              this.style.transform = 'scale(1.5)';
              this.style.transition = '0.3s';
            " onmouseout="this.style.transform = 'scale(1)'">
        </div>

        <!-- Product Details -->
        <div class="col-lg-7">
          <div class="card-body p-4 p-lg-5">
            <span class="badge bg-success mb-3">In Stock</span>

            <h2 class="fw-bold">Oraimo NutriFry S1 Ultra 6L</h2>

            <h3 class="text-warning fw-bold mb-3">৳9,990</h3>

            <p class="text-muted">
              Enjoy healthy cooking with the Oraimo NutriFry S1 Ultra 6L Air
              Fryer. Prepare delicious meals using little to no oil while
              preserving flavor and nutrition.
            </p>

            <h5 class="fw-bold mt-4">Key Features</h5>

            <ul class="list-group list-group-flush mb-4">
              <li class="list-group-item">
                ✅ Smart Recipes Controlled by App
              </li>

              <li class="list-group-item">✅ 2 Hour Cooking Memory Backup</li>

              <li class="list-group-item">✅ Titanium Antibacterial Coating</li>

              <li class="list-group-item">✅ 6L Large Capacity</li>

              <li class="list-group-item">✅ 1500W Fast Heating</li>
            </ul>

            <div class="d-flex gap-2 flex-wrap">
              <button class="btn btn-success px-4">🛒 Add To Cart</button>

              <button class="btn btn-outline-dark px-4">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

login

PREMIUM

Premium component from login.

Preview

Secure Login

Enter your credentials to continue

Forgot password?
Don't have an account? Register Now
HTML 

    <!-- Centered Login Form with Validation & Toast Popup -->
    <div class="container d-flex justify-content-center align-items-center min-vh-100 py-5">
      <div class="card shadow-lg border-0 w-100 rounded-4" style="max-width: 450px">
        <div class="card-body p-4 p-md-5">
          <div class="text-center mb-4">
            <div class="bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px">
              <i class="bi bi-shield-lock-fill fs-2"></i>
            </div>
            <h3 class="fw-bold">Secure Login</h3>
            <p class="text-muted small">Enter your credentials to continue</p>
          </div>

          <form id="customLoginForm">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="usernameInput" placeholder="Username" required="">
              <label for="usernameInput"><i class="bi bi-person me-2 text-muted"></i>Username</label>
            </div>
            <div class="form-floating mb-3 position-relative">
              <input type="password" class="form-control" id="passwordInput" placeholder="Password" required="">
              <label for="passwordInput"><i class="bi bi-lock me-2 text-muted"></i>Password</label>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-4 small">
              <div class="form-check">
                <input class="form-check-input shadow-none cursor-pointer" type="checkbox" value="" id="rememberMe">
                <label class="form-check-label text-muted cursor-pointer" for="rememberMe">Remember me</label>
              </div>
              <a href="#" class="text-primary text-decoration-none fw-medium">Forgot password?</a>
            </div>

            <button class="btn btn-primary w-100 py-3 fw-bold rounded-3 shadow-sm" type="submit">
              Sign In <i class="bi bi-arrow-right ms-1"></i>
            </button>
          </form>

          <div class="text-center mt-4 pt-3 border-top small text-muted">
            Don't have an account?
            <a href="#" class="text-primary fw-bold text-decoration-none">Register Now</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Global Toast Container for Popup Notification -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div id="loginSuccessToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
          <div class="toast-body fw-medium">
            <i class="bi bi-check-circle-fill me-2"></i> Authentication
            successful!
          </div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
      </div>
    </div>

    <!-- Required JS for handling the form submission popup -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const loginForm = document.getElementById("customLoginForm");
        if (loginForm) {
          loginForm.addEventListener("submit", function (e) {
            e.preventDefault(); // Prevent page reload
            // In a real app, you would validate and send AJAX request here

            // Show Bootstrap Toast popup on success
            const toastEl = document.getElementById("loginSuccessToast");
            const toast = new bootstrap.Toast(toastEl);
            toast.show();
          });
        }
      });
    </script>

    <!-- bootstrap js link -->

    <!-- custom js here -->
    <script src="script.js"></script>

Math Teacher Section - Primary Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

1. Primary Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>1. Primary Math Teachers</h2>
<a href="#" class="btn btn-primary">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=11" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=12" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=13" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=14" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Success Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

2. Success Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>2. Success Math Teachers</h2>
<a href="#" class="btn btn-success">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=21" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=22" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=23" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=24" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Danger Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

3. Danger Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>3. Danger Math Teachers</h2>
<a href="#" class="btn btn-danger">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-danger">
<img src="https://picsum.photos/400/450?random=31" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-danger">
<img src="https://picsum.photos/400/450?random=32" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-danger">
<img src="https://picsum.photos/400/450?random=33" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-danger">
<img src="https://picsum.photos/400/450?random=34" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Warning Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

4. Warning Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>4. Warning Math Teachers</h2>
<a href="#" class="btn btn-warning">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-warning">
<img src="https://picsum.photos/400/450?random=41" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-warning">
<img src="https://picsum.photos/400/450?random=42" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-warning">
<img src="https://picsum.photos/400/450?random=43" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-warning">
<img src="https://picsum.photos/400/450?random=44" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Info Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

5. Info Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>5. Info Math Teachers</h2>
<a href="#" class="btn btn-info">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-info">
<img src="https://picsum.photos/400/450?random=51" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-info">
<img src="https://picsum.photos/400/450?random=52" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-info">
<img src="https://picsum.photos/400/450?random=53" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-info">
<img src="https://picsum.photos/400/450?random=54" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-info mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Dark Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

6. Dark Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>6. Dark Math Teachers</h2>
<a href="#" class="btn btn-dark">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-dark">
<img src="https://picsum.photos/400/450?random=61" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-dark">
<img src="https://picsum.photos/400/450?random=62" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-dark">
<img src="https://picsum.photos/400/450?random=63" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-dark">
<img src="https://picsum.photos/400/450?random=64" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Secondary Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

7. Secondary Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>7. Secondary Math Teachers</h2>
<a href="#" class="btn btn-secondary">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-secondary">
<img src="https://picsum.photos/400/450?random=71" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-secondary">
<img src="https://picsum.photos/400/450?random=72" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-secondary">
<img src="https://picsum.photos/400/450?random=73" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-secondary">
<img src="https://picsum.photos/400/450?random=74" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Light Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

8. Light Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>8. Light Math Teachers</h2>
<a href="#" class="btn btn-light">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-light">
<img src="https://picsum.photos/400/450?random=81" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-light mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-light btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-light">
<img src="https://picsum.photos/400/450?random=82" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-light mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-light btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-light">
<img src="https://picsum.photos/400/450?random=83" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-light mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-light btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-light">
<img src="https://picsum.photos/400/450?random=84" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-light mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-light btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Primary Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

9. Primary Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>9. Primary Math Teachers</h2>
<a href="#" class="btn btn-primary">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=91" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=92" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=93" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-primary">
<img src="https://picsum.photos/400/450?random=94" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Math Teacher Section - Success Math Teachers

PREMIUM

Premium component from Math Teacher Section.

Preview

10. Success Math Teachers

View All
Teacher
Mathematics
Teacher 1

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 2

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 3

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
Teacher
Mathematics
Teacher 4

M.Sc. in Mathematics

Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.

View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-4">
<h2>10. Success Math Teachers</h2>
<a href="#" class="btn btn-success">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=101" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 1</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=102" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 2</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=103" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 3</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-success">
<img src="https://picsum.photos/400/450?random=104" class="card-img-top" alt="Teacher">
<div class="card-body text-center">
<span class="badge bg-success mb-2">Mathematics</span>
<h5 class="card-title">Teacher 4</h5>
<p class="text-muted mb-1">M.Sc. in Mathematics</p>
<p class="small">Specializes in Algebra, Geometry, Calculus, and Olympiad preparation.</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-linkedin"></i>
</div>
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

Mission-&-Vision - Mission & Vision

PREMIUM

Premium component from Mission-&-Vision.

Preview
About My Goal

Mission & Vision

Dedicated to delivering innovative digital solutions that empower businesses, improve user experience, and create lasting value.

Our Mission

To design and develop responsive, secure, and high-performance websites that help businesses establish a strong online presence while ensuring exceptional user experience.

Our Vision

To become a trusted technology partner by creating innovative digital solutions that inspire growth, improve productivity, and make a positive impact worldwide.

HTML 


    <div class="container">

        <div class="row justify-content-center mb-5">

            <div class="col-lg-8 text-center">

                <span class="badge bg-primary px-3 py-2 mb-3">
                    About My Goal
                </span>

                <h2 class="fw-bold display-5">
                    Mission <span class="text-primary">&amp;</span> Vision
                </h2>

                <p class="text-muted">
                    Dedicated to delivering innovative digital solutions that
                    empower businesses, improve user experience, and create
                    lasting value.
                </p>

            </div>

        </div>

        <div class="row g-4">

            <!-- Mission -->

            <div class="col-lg-6">

                <div class="card border-0 shadow-lg h-100 rounded-4 mission-card">

                    <div class="card-body p-5 text-center">

                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-bullseye text-primary fs-1"></i>

                        </div>

                        <h3 class="fw-bold mb-3">
                            Our Mission
                        </h3>

                        <p class="text-muted">

                            To design and develop responsive, secure, and
                            high-performance websites that help businesses
                            establish a strong online presence while ensuring
                            exceptional user experience.

                        </p>

                    </div>

                </div>

            </div>

            <!-- Vision -->

            <div class="col-lg-6">

                <div class="card border-0 shadow-lg h-100 rounded-4 mission-card">

                    <div class="card-body p-5 text-center">

                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-eye text-success fs-1"></i>

                        </div>

                        <h3 class="fw-bold mb-3">
                            Our Vision
                        </h3>

                        <p class="text-muted">

                            To become a trusted technology partner by creating
                            innovative digital solutions that inspire growth,
                            improve productivity, and make a positive impact
                            worldwide.

                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

Mission-Vision-Section - Classic Mission & Vision

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 1

Classic Mission & Vision

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-primary text-white">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 1</span>
<h2 class="mt-3">Classic Mission &amp; Vision</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Split Layout

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 2

Split Layout

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-success text-white">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 2</span>
<h2 class="mt-3">Split Layout</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Cards Layout

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 3

Cards Layout

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-info text-dark">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 3</span>
<h2 class="mt-3">Cards Layout</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Corporate

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 4

Corporate

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-dark text-white">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 4</span>
<h2 class="mt-3">Corporate</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Gradient Style

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 5

Gradient Style

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-secondary text-white">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 5</span>
<h2 class="mt-3">Gradient Style</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Education

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 6

Education

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-warning text-dark">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 6</span>
<h2 class="mt-3">Education</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - NGO

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 7

NGO

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-danger text-white">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 7</span>
<h2 class="mt-3">NGO</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Startup

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 8

Startup

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-primary text-white">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 8</span>
<h2 class="mt-3">Startup</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Minimal

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 9

Minimal

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-light text-dark">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 9</span>
<h2 class="mt-3">Minimal</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

Mission-Vision-Section - Modern Icons

PREMIUM

Premium component from Mission-Vision-Section.

Preview
Section 10

Modern Icons

Professional Bootstrap 5 Mission & Vision layout.

Mission

Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.

  • Quality First
  • Innovation
  • Customer Focus

Vision

Become a trusted global organization by creating sustainable growth and continuous improvement.

  • Leadership
  • Growth
  • Excellence
HTML 

<div class="p-4 rounded bg-success text-white">
<div class="text-center mb-4">
<span class="badge bg-light text-dark">Section 10</span>
<h2 class="mt-3">Modern Icons</h2>
<p>Professional Bootstrap 5 Mission &amp; Vision layout.</p>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-bullseye text-primary"></i> Mission</h4>
<p>Deliver quality services, innovation, and value through teamwork, technology, and customer satisfaction.</p>
<ul><li>Quality First</li><li>Innovation</li><li>Customer Focus</li></ul>
</div></div></div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h4><i class="bi bi-eye text-success"></i> Vision</h4>
<p>Become a trusted global organization by creating sustainable growth and continuous improvement.</p>
<ul><li>Leadership</li><li>Growth</li><li>Excellence</li></ul>
</div></div></div>
</div></div>

multi-navbar - Bootstrap 5 Navbar Collection

PREMIUM

Premium component from multi-navbar.

Preview

Bootstrap 5 Navbar Collection

Dark Navbar
Primary Navbar
Success Navbar
Danger Navbar
Warning Navbar
Light Navbar
HTML 


<div class="container py-5">

    <h2 class="text-center mb-5">Bootstrap 5 Navbar Collection</h2>

    <!-- ================================= -->
    <!-- Dark Navbar -->
    <!-- ================================= -->
    <h5>Dark Navbar</h5>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded mb-5">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Logo</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#darkNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="darkNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- ================================= -->
    <!-- Primary Navbar -->
    <!-- ================================= -->
    <h5>Primary Navbar</h5>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded mb-5">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Logo</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="primaryNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- ================================= -->
    <!-- Success Navbar -->
    <!-- ================================= -->
    <h5>Success Navbar</h5>

    <nav class="navbar navbar-expand-lg navbar-dark bg-success rounded mb-5">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Logo</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#successNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="successNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- ================================= -->
    <!-- Danger Navbar -->
    <!-- ================================= -->
    <h5>Danger Navbar</h5>

    <nav class="navbar navbar-expand-lg navbar-dark bg-danger rounded mb-5">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Logo</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#dangerNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="dangerNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Team</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- ================================= -->
    <!-- Warning Navbar -->
    <!-- ================================= -->
    <h5>Warning Navbar</h5>

    <nav class="navbar navbar-expand-lg navbar-light bg-warning rounded mb-5">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Logo</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#warningNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="warningNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- ================================= -->
    <!-- Light Navbar -->
    <!-- ================================= -->
    <h5>Light Navbar</h5>

    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm rounded mb-5">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="#">Logo</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#lightNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="lightNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Documentation</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

</div>

<!-- Bootstrap JS -->

navbar

PREMIUM

Premium component from navbar.

Preview
HTML 
<header id="header-section">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Logo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Service</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</header>

Navbar(Top And Main)

PREMIUM

Premium component from Navbar(Top And Main).

Preview
info@yourdomain.com +8801 234 567 8900
Login / Register
HTML 
<header id="header-section">
  <!-- Custom Header Top Bar -->
  <div class="bg-dark text-light py-2 fs-7">
    <div class="container d-flex justify-content-between align-items-center">
      <!-- Contact Info -->
      <div class="d-flex gap-3 align-items-center">
        <span><i class="bi bi-envelope me-1 text-primary"></i>
          info@yourdomain.com</span>
        <span class="d-none d-md-inline"><i class="bi bi-telephone me-1 text-primary"></i> +8801 234 567
          8900</span>
      </div>
      <!-- Social & Auth -->
      <div class="d-flex gap-3 align-items-center">
        <div class="d-none d-sm-flex gap-2">
          <a href="#" class="text-light text-decoration-none"><i class="bi bi-facebook"></i></a>
          <a href="#" class="text-light text-decoration-none"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="text-light text-decoration-none"><i class="bi bi-youtube"></i></a>
        </div>
        <div class="vr mx-1 d-none d-sm-block"></div>
        <a href="#" class="text-light text-decoration-none fw-bold">Login / Register</a>
      </div>
    </div>
  </div>

  <!-- Main Navbar -->

  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          
        </ul>
      </div>
    </div>
  </nav>
</header>

NavHero

PREMIUM

Premium component from NavHero.

Preview
New Bootstrap 5 UI

Create Modern Websites Faster

Build beautiful responsive websites using only Bootstrap 5 components.

Get Started Documentation
HTML 

      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <span class="badge bg-primary mb-3"> New Bootstrap 5 UI </span>

            <h1 class="display-3 fw-bold">Create Modern Websites Faster</h1>

            <p class="lead my-4">
              Build beautiful responsive websites using only Bootstrap 5
              components.
            </p>

            <a href="#" class="btn btn-primary btn-lg me-2"> Get Started </a>

            <a href="#" class="btn btn-outline-dark btn-lg"> Documentation </a>
          </div>

          <div class="col-lg-6 text-center">
            <img src="https://picsum.photos/700/500" class="img-fluid rounded-4 shadow" alt="">
          </div>
        </div>
      </div>

Notice-Section - Latest Notices

PREMIUM

Premium component from Notice-Section.

Preview

1. Latest Notices

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>1. Latest Notices</h2><a class="btn btn-primary btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Announcement Board

PREMIUM

Premium component from Notice-Section.

Preview

2. Announcement Board

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>2. Announcement Board</h2><a class="btn btn-success btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-success">
<div class="card-header bg-success text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-success btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-success">
<div class="card-header bg-success text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-success btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-success">
<div class="card-header bg-success text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-success btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Exam Notice

PREMIUM

Premium component from Notice-Section.

Preview

3. Exam Notice

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>3. Exam Notice</h2><a class="btn btn-danger btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-danger">
<div class="card-header bg-danger text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-danger btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-danger">
<div class="card-header bg-danger text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-danger btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-danger">
<div class="card-header bg-danger text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-danger btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Admission Notice

PREMIUM

Premium component from Notice-Section.

Preview

4. Admission Notice

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>4. Admission Notice</h2><a class="btn btn-warning btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-warning">
<div class="card-header bg-warning ">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-warning btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-warning">
<div class="card-header bg-warning ">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-warning btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-warning">
<div class="card-header bg-warning ">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-warning btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Event Notice

PREMIUM

Premium component from Notice-Section.

Preview

5. Event Notice

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>5. Event Notice</h2><a class="btn btn-info btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-info">
<div class="card-header bg-info text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-info btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-info">
<div class="card-header bg-info text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-info btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-info">
<div class="card-header bg-info text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-info btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Scholarship Notice

PREMIUM

Premium component from Notice-Section.

Preview

6. Scholarship Notice

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>6. Scholarship Notice</h2><a class="btn btn-secondary btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-secondary">
<div class="card-header bg-secondary text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-secondary btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-secondary">
<div class="card-header bg-secondary text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-secondary btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-secondary">
<div class="card-header bg-secondary text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-secondary btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Holiday Notice

PREMIUM

Premium component from Notice-Section.

Preview

7. Holiday Notice

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>7. Holiday Notice</h2><a class="btn btn-dark btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-dark">
<div class="card-header bg-dark text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-dark btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-dark">
<div class="card-header bg-dark text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-dark btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-dark">
<div class="card-header bg-dark text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-dark btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Important Updates

PREMIUM

Premium component from Notice-Section.

Preview

8. Important Updates

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>8. Important Updates</h2><a class="btn btn-primary btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-primary btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - Training Notice

PREMIUM

Premium component from Notice-Section.

Preview

9. Training Notice

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>9. Training Notice</h2><a class="btn btn-success btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-success">
<div class="card-header bg-success text-white">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-success btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-success">
<div class="card-header bg-success text-white">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-success btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-success">
<div class="card-header bg-success text-white">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-success btn-sm">Read More</a>
</div>
</div>
</div></div>

Notice-Section - General Notice

PREMIUM

Premium component from Notice-Section.

Preview

10. General Notice

View All
Notice 1
Sample Notice Title 1

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 2
Sample Notice Title 2

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
Notice 3
Sample Notice Title 3

Published: 01 July 2026
Replace this with your institution's notice details.

Read More
HTML 
<div class="d-flex justify-content-between align-items-center mb-3"><h2>10. General Notice</h2><a class="btn btn-warning btn-sm" href="#">View All</a></div><div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-warning">
<div class="card-header bg-warning ">
Notice 1
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 1</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-warning btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-warning">
<div class="card-header bg-warning ">
Notice 2
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 2</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-warning btn-sm">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card h-100 border-warning">
<div class="card-header bg-warning ">
Notice 3
</div>
<div class="card-body">
<h5 class="card-title">Sample Notice Title 3</h5>
<p class="card-text">Published: 01 July 2026<br>Replace this with your institution's notice details.</p>
<a href="#" class="btn btn-outline-warning btn-sm">Read More</a>
</div>
</div>
</div></div>

plant-macthmaker - Find Your Perfect Plant

PREMIUM

Premium component from plant-macthmaker.

Preview
Plant Recommendation

Find Your Perfect Plant

Answer a few simple questions and discover the ideal plant for your home, office, or garden.

Snake Plant
Recommended Plant

Snake Plant

Perfect for beginners. It grows well in low light, requires very little watering, improves indoor air quality, and is one of the easiest houseplants to maintain.

🌞
Low Light
💧
Low Water
❤️
Easy Care
Learn More
HTML 


    <div class="container">

        <!-- Heading -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-8 text-center">

                <span class="badge bg-success px-3 py-2 mb-3">
                    Plant Recommendation
                </span>

                <h2 class="display-5 fw-bold">
                    Find Your Perfect Plant
                </h2>

                <p class="text-secondary">
                    Answer a few simple questions and discover the ideal plant
                    for your home, office, or garden.
                </p>

            </div>

        </div>

        <div class="row justify-content-center">

            <div class="col-lg-8">

                <div class="card border-0 shadow-lg rounded-4">

                    <div class="card-body p-5">

                        <form>

                            <!-- Question 1 -->

                            <div class="mb-4">

                                <label class="form-label fw-semibold">

                                    <i class="bi bi-sun-fill text-warning me-2"></i>

                                    How much sunlight does your space get?

                                </label>

                                <select class="form-select form-select-lg">

                                    <option selected="" disabled="">Select Sunlight</option>

                                    <option>Low Light</option>

                                    <option>Medium Light</option>

                                    <option>Direct Sunlight</option>

                                </select>

                            </div>

                            <!-- Question 2 -->

                            <div class="mb-4">

                                <label class="form-label fw-semibold">

                                    <i class="bi bi-heart-fill text-danger me-2"></i>

                                    How much care can you provide?

                                </label>

                                <select class="form-select form-select-lg">

                                    <option selected="" disabled="">Select Care Level</option>

                                    <option>Low Maintenance</option>

                                    <option>Moderate Care</option>

                                    <option>High Maintenance</option>

                                </select>

                            </div>

                            <!-- Question 3 -->

                            <div class="mb-4">

                                <label class="form-label fw-semibold">

                                    <i class="bi bi-house-heart-fill text-success me-2"></i>

                                    Do you have pets?

                                </label>

                                <select class="form-select form-select-lg">

                                    <option selected="" disabled="">Select Option</option>

                                    <option>Yes</option>

                                    <option>No</option>

                                </select>

                            </div>

                            <div class="d-grid">

                                <button class="btn btn-success btn-lg rounded-pill">

                                    <i class="bi bi-search me-2"></i>

                                    Find My Plant

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

        <!-- Example Recommendation -->

        <div class="row justify-content-center mt-5">

            <div class="col-lg-6">

                <div class="card border-0 shadow-lg rounded-4">

                    <img src="https://via.placeholder.com/600x350" class="card-img-top" alt="Snake Plant">

                    <div class="card-body text-center">

                        <span class="badge bg-success mb-3">
                            Recommended Plant
                        </span>

                        <h3 class="fw-bold">
                            Snake Plant
                        </h3>

                        <p class="text-secondary">

                            Perfect for beginners. It grows well in low light,
                            requires very little watering, improves indoor air
                            quality, and is one of the easiest houseplants to
                            maintain.

                        </p>

                        <div class="row text-center mt-4">

                            <div class="col">

                                <h5 class="text-success">
                                    🌞
                                </h5>

                                <small>Low Light</small>

                            </div>

                            <div class="col">

                                <h5 class="text-primary">
                                    💧
                                </h5>

                                <small>Low Water</small>

                            </div>

                            <div class="col">

                                <h5 class="text-danger">
                                    ❤️
                                </h5>

                                <small>Easy Care</small>

                            </div>

                        </div>

                        <a href="#" class="btn btn-success rounded-pill mt-4 px-4">

                            Learn More

                            <i class="bi bi-arrow-right ms-2"></i>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

Service - My Services

PREMIUM

Premium component from Service.

Preview
What I Do

My Services

I create modern, responsive, and user-friendly websites with clean code and excellent performance.

Web Development

Build fast, responsive and modern websites using HTML5, Bootstrap 5 and JavaScript.

Learn More

Responsive Design

Create mobile-first websites that work perfectly on desktop, tablet and smartphone.

Learn More

Website Maintenance

Keep your website secure, updated and optimized for the best user experience.

Learn More
HTML 


    <div class="container">

        <!-- Section Title -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-7 text-center">

                <span class="badge bg-primary px-3 py-2 mb-3">
                    What I Do
                </span>

                <h2 class="fw-bold display-5">
                    My Services
                </h2>

                <p class="text-secondary">
                    I create modern, responsive, and user-friendly websites
                    with clean code and excellent performance.
                </p>

            </div>

        </div>

        <!-- Service Cards -->

        <div class="row g-4">

            <!-- Card 1 -->

            <div class="col-lg-4 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-5">

                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-code-slash fs-1 text-primary"></i>

                        </div>

                        <h4 class="fw-bold mb-3">
                            Web Development
                        </h4>

                        <p class="text-secondary mb-4">
                            Build fast, responsive and modern websites using
                            HTML5, Bootstrap 5 and JavaScript.
                        </p>

                        <a href="#" class="btn btn-outline-primary rounded-pill px-4">
                            Learn More
                        </a>

                    </div>

                </div>

            </div>

            <!-- Card 2 -->

            <div class="col-lg-4 col-md-6">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-5">

                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-phone fs-1 text-success"></i>

                        </div>

                        <h4 class="fw-bold mb-3">
                            Responsive Design
                        </h4>

                        <p class="text-secondary mb-4">
                            Create mobile-first websites that work perfectly
                            on desktop, tablet and smartphone.
                        </p>

                        <a href="#" class="btn btn-outline-success rounded-pill px-4">
                            Learn More
                        </a>

                    </div>

                </div>

            </div>

            <!-- Card 3 -->

            <div class="col-lg-4 col-md-6 mx-md-auto">

                <div class="card border-0 shadow-lg rounded-4 h-100">

                    <div class="card-body text-center p-5">

                        <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex justify-content-center align-items-center mb-4" style="width:90px;height:90px;">

                            <i class="bi bi-gear fs-1 text-danger"></i>

                        </div>

                        <h4 class="fw-bold mb-3">
                            Website Maintenance
                        </h4>

                        <p class="text-secondary mb-4">
                            Keep your website secure, updated and optimized
                            for the best user experience.
                        </p>

                        <a href="#" class="btn btn-outline-danger rounded-pill px-4">
                            Learn More
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

signup - Create Account

PREMIUM

Premium component from signup.

Preview

Create Account

Sign up to get started

Already have an account? Login
HTML 

    <div class="container py-5">
      <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
          <div class="card shadow border-0">
            <div class="card-body p-5">
              <div class="text-center mb-4">
                <i class="bi bi-person-circle display-3 text-primary"></i>

                <h2 class="fw-bold mt-3">Create Account</h2>

                <p class="text-muted">Sign up to get started</p>
              </div>

              <form>
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label class="form-label"> First Name </label>

                    <input type="text" class="form-control" placeholder="John" required="">
                  </div>

                  <div class="col-md-6 mb-3">
                    <label class="form-label"> Last Name </label>

                    <input type="text" class="form-control" placeholder="Doe" required="">
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label"> Email Address </label>

                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-envelope-fill"></i>
                    </span>

                    <input type="email" class="form-control" placeholder="name@example.com" required="">
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label"> Phone Number </label>

                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-telephone-fill"></i>
                    </span>

                    <input type="tel" class="form-control" placeholder="+880 17XXXXXXXX" required="">
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label"> Password </label>

                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-lock-fill"></i>
                    </span>

                    <input type="password" class="form-control" placeholder="Password" required="">
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label"> Confirm Password </label>

                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-shield-lock-fill"></i>
                    </span>

                    <input type="password" class="form-control" placeholder="Confirm Password" required="">
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label"> Gender </label>

                  <select class="form-select">
                    <option selected="">Select Gender</option>

                    <option>Male</option>

                    <option>Female</option>

                    <option>Other</option>
                  </select>
                </div>

                <div class="mb-3">
                  <label class="form-label"> Date of Birth </label>

                  <input type="date" class="form-control">
                </div>

                <div class="form-check mb-4">
                  <input class="form-check-input" type="checkbox" id="agree" required="">

                  <label class="form-check-label" for="agree">
                    I agree to the
                    <a href="#"> Terms &amp; Conditions </a>
                  </label>
                </div>

                <div class="d-grid">
                  <button class="btn btn-primary btn-lg">
                    <i class="bi bi-person-plus-fill"></i>

                    Create Account
                  </button>
                </div>
              </form>

              <hr>

              <div class="text-center">
                Already have an account?

                <a href="login.html"> Login </a>
              </div>

              <div class="text-center mt-4">
                <button class="btn btn-outline-danger me-2">
                  <i class="bi bi-google"></i>
                  Google
                </button>

                <button class="btn btn-outline-primary">
                  <i class="bi bi-facebook"></i>
                  Facebook
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

skills - Professional Skills

PREMIUM

Premium component from skills.

Preview
My Expertise

Professional Skills

I specialize in creating responsive, modern and high-quality web applications using the latest technologies.

HTML5
95%
CSS3
90%
Bootstrap 5
90%
JavaScript
80%
PHP
75%
MySQL
85%
HTML 


    <div class="container">

        <!-- Section Heading -->

        <div class="row justify-content-center mb-5">

            <div class="col-lg-7 text-center">

                <span class="badge bg-primary px-3 py-2 mb-3">
                    My Expertise
                </span>

                <h2 class="fw-bold display-5">
                    Professional Skills
                </h2>

                <p class="text-secondary">
                    I specialize in creating responsive, modern and high-quality
                    web applications using the latest technologies.
                </p>

            </div>

        </div>

        <div class="row g-4">

            <!-- Left Column -->

            <div class="col-lg-6">

                <div class="card border-0 shadow-lg rounded-4">

                    <div class="card-body p-4">

                        <!-- HTML -->

                        <div class="d-flex justify-content-between align-items-center mb-2">

                            <h5 class="mb-0">
                                <i class="bi bi-filetype-html text-danger me-2"></i>
                                HTML5
                            </h5>

                            <span class="badge bg-danger">
                                95%
                            </span>

                        </div>

                        <div class="progress rounded-pill mb-4" style="height:10px;">

                            <div class="progress-bar bg-danger" style="width:95%"></div>

                        </div>

                        <!-- CSS -->

                        <div class="d-flex justify-content-between align-items-center mb-2">

                            <h5 class="mb-0">
                                <i class="bi bi-filetype-css text-primary me-2"></i>
                                CSS3
                            </h5>

                            <span class="badge bg-primary">
                                90%
                            </span>

                        </div>

                        <div class="progress rounded-pill mb-4" style="height:10px;">

                            <div class="progress-bar bg-primary" style="width:90%"></div>

                        </div>

                        <!-- Bootstrap -->

                        <div class="d-flex justify-content-between align-items-center mb-2">

                            <h5 class="mb-0">
                                <i class="bi bi-bootstrap-fill text-purple me-2"></i>
                                Bootstrap 5
                            </h5>

                            <span class="badge bg-secondary">
                                90%
                            </span>

                        </div>

                        <div class="progress rounded-pill" style="height:10px;">

                            <div class="progress-bar bg-secondary" style="width:90%"></div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Right Column -->

            <div class="col-lg-6">

                <div class="card border-0 shadow-lg rounded-4">

                    <div class="card-body p-4">

                        <!-- JavaScript -->

                        <div class="d-flex justify-content-between align-items-center mb-2">

                            <h5 class="mb-0">
                                <i class="bi bi-filetype-js text-warning me-2"></i>
                                JavaScript
                            </h5>

                            <span class="badge bg-warning text-dark">
                                80%
                            </span>

                        </div>

                        <div class="progress rounded-pill mb-4" style="height:10px;">

                            <div class="progress-bar bg-warning" style="width:80%"></div>

                        </div>

                        <!-- PHP -->

                        <div class="d-flex justify-content-between align-items-center mb-2">

                            <h5 class="mb-0">
                                <i class="bi bi-filetype-php text-info me-2"></i>
                                PHP
                            </h5>

                            <span class="badge bg-info">
                                75%
                            </span>

                        </div>

                        <div class="progress rounded-pill mb-4" style="height:10px;">

                            <div class="progress-bar bg-info" style="width:75%"></div>

                        </div>

                        <!-- MySQL -->

                        <div class="d-flex justify-content-between align-items-center mb-2">

                            <h5 class="mb-0">
                                <i class="bi bi-database-fill text-success me-2"></i>
                                MySQL
                            </h5>

                            <span class="badge bg-success">
                                85%
                            </span>

                        </div>

                        <div class="progress rounded-pill" style="height:10px;">

                            <div class="progress-bar bg-success" style="width:85%"></div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

sliding-banner

PREMIUM

Premium component from sliding-banner.

Preview
HTML 


<!-- Banner Section -->
<div id="bannerSlider" class="carousel slide" data-bs-ride="carousel">

    <!-- Indicators -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#bannerSlider" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#bannerSlider" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#bannerSlider" data-bs-slide-to="2"></button>
    </div>

    <!-- Slides -->
    <div class="carousel-inner">

        <!-- Slide 1 -->
        <div class="carousel-item active">
            <img src="https://picsum.photos/1920/700?random=1" class="d-block w-100" alt="Banner 1">

            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
                <h1>Welcome to Our Website</h1>
                <p>Build modern websites using Bootstrap 5.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item">
            <img src="https://picsum.photos/1920/700?random=2" class="d-block w-100" alt="Banner 2">

            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
                <h1>Professional Business</h1>
                <p>Create responsive websites quickly.</p>
                <a href="#" class="btn btn-success">Our Services</a>
            </div>
        </div>

        <!-- Slide 3 -->
        <div class="carousel-item">
            <img src="https://picsum.photos/1920/700?random=3" class="d-block w-100" alt="Banner 3">

            <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
                <h1>Creative Solutions</h1>
                <p>Bootstrap 5 makes web development easy.</p>
                <a href="#" class="btn btn-warning">Contact Us</a>
            </div>
        </div>

    </div>

    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#bannerSlider" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#bannerSlider" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>

</div>

<!-- Bootstrap 5 JS Bundle -->

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #1

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-white text-dark rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=1" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #1</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-dark">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #2

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-primary text-white rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=2" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #2</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-light">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #3

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-dark text-white rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=3" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #3</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-light">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #4

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-success text-white rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=4" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #4</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-light">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #5

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-warning text-dark rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=5" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #5</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-dark">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #6

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-info text-dark rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=6" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #6</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-dark">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #7

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-secondary text-white rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=7" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #7</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-light">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #8

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-light text-dark rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=8" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #8</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-dark">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #9

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-danger text-white rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=9" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #9</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-light">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Speech-Section - Inspiring Message to Students

PREMIUM

Premium component from Speech-Section.

Preview
Speaker
Principal's Speech #10

Inspiring Message to Students

Education is the foundation of innovation, leadership, and lifelong success.

Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.

Read Full Speech Watch Video
HTML 

<div class="bg-white text-dark rounded-4 shadow p-4 p-lg-5">
<div class="row align-items-center g-4">
<div class="col-lg-4 text-center">
<img src="https://picsum.photos/320/320?random=10" class="img-fluid rounded-circle border border-4 border-light" alt="Speaker">
</div>
<div class="col-lg-8">
<span class="badge bg-secondary mb-3">Principal's Speech #10</span>
<h2 class="fw-bold">Inspiring Message to Students</h2>
<p class="lead">Education is the foundation of innovation, leadership, and lifelong success.</p>
<p>Welcome to our institution. We are committed to academic excellence, creativity, and character development. Together, we prepare students to become responsible citizens and future leaders.</p>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-dark">Read Full Speech</a>
<a href="#" class="btn btn-outline-secondary">Watch Video</a>
</div>
</div>
</div>
</div>

Student-List-Section - Computer Science

PREMIUM

Premium component from Student-List-Section.

Preview

1. Computer Science

View All
Student
ID: ST0101
Student 1

Department: Computer Science

Semester 1 GPA 3.5
View Profile
Student
ID: ST0102
Student 2

Department: Computer Science

Semester 2 GPA 3.6
View Profile
Student
ID: ST0103
Student 3

Department: Computer Science

Semester 3 GPA 3.7
View Profile
Student
ID: ST0104
Student 4

Department: Computer Science

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>1. Computer Science</h2>
<a href="#" class="btn btn-primary btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=11" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0101</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Computer Science</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=12" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0102</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Computer Science</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=13" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0103</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Computer Science</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=14" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0104</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Computer Science</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Business

PREMIUM

Premium component from Student-List-Section.

Preview

2. Business

View All
Student
ID: ST0201
Student 1

Department: Business

Semester 1 GPA 3.5
View Profile
Student
ID: ST0202
Student 2

Department: Business

Semester 2 GPA 3.6
View Profile
Student
ID: ST0203
Student 3

Department: Business

Semester 3 GPA 3.7
View Profile
Student
ID: ST0204
Student 4

Department: Business

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>2. Business</h2>
<a href="#" class="btn btn-success btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=21" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0201</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Business</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=22" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0202</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Business</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=23" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0203</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Business</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=24" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0204</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Business</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Engineering

PREMIUM

Premium component from Student-List-Section.

Preview

3. Engineering

View All
Student
ID: ST0301
Student 1

Department: Engineering

Semester 1 GPA 3.5
View Profile
Student
ID: ST0302
Student 2

Department: Engineering

Semester 2 GPA 3.6
View Profile
Student
ID: ST0303
Student 3

Department: Engineering

Semester 3 GPA 3.7
View Profile
Student
ID: ST0304
Student 4

Department: Engineering

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>3. Engineering</h2>
<a href="#" class="btn btn-danger btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=31" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST0301</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Engineering</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=32" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST0302</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Engineering</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=33" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST0303</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Engineering</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=34" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST0304</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Engineering</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Medical

PREMIUM

Premium component from Student-List-Section.

Preview

4. Medical

View All
Student
ID: ST0401
Student 1

Department: Medical

Semester 1 GPA 3.5
View Profile
Student
ID: ST0402
Student 2

Department: Medical

Semester 2 GPA 3.6
View Profile
Student
ID: ST0403
Student 3

Department: Medical

Semester 3 GPA 3.7
View Profile
Student
ID: ST0404
Student 4

Department: Medical

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>4. Medical</h2>
<a href="#" class="btn btn-info btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=41" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-info mb-2">ID: ST0401</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Medical</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=42" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-info mb-2">ID: ST0402</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Medical</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=43" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-info mb-2">ID: ST0403</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Medical</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=44" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-info mb-2">ID: ST0404</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Medical</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-info btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Arts

PREMIUM

Premium component from Student-List-Section.

Preview

5. Arts

View All
Student
ID: ST0501
Student 1

Department: Arts

Semester 1 GPA 3.5
View Profile
Student
ID: ST0502
Student 2

Department: Arts

Semester 2 GPA 3.6
View Profile
Student
ID: ST0503
Student 3

Department: Arts

Semester 3 GPA 3.7
View Profile
Student
ID: ST0504
Student 4

Department: Arts

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>5. Arts</h2>
<a href="#" class="btn btn-warning btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=51" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">ID: ST0501</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Arts</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=52" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">ID: ST0502</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Arts</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=53" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">ID: ST0503</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Arts</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=54" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-warning mb-2">ID: ST0504</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Arts</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-warning btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Commerce

PREMIUM

Premium component from Student-List-Section.

Preview

6. Commerce

View All
Student
ID: ST0601
Student 1

Department: Commerce

Semester 1 GPA 3.5
View Profile
Student
ID: ST0602
Student 2

Department: Commerce

Semester 2 GPA 3.6
View Profile
Student
ID: ST0603
Student 3

Department: Commerce

Semester 3 GPA 3.7
View Profile
Student
ID: ST0604
Student 4

Department: Commerce

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>6. Commerce</h2>
<a href="#" class="btn btn-secondary btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=61" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">ID: ST0601</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Commerce</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=62" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">ID: ST0602</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Commerce</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=63" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">ID: ST0603</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Commerce</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=64" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-secondary mb-2">ID: ST0604</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Commerce</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Science Club

PREMIUM

Premium component from Student-List-Section.

Preview

7. Science Club

View All
Student
ID: ST0701
Student 1

Department: Science Club

Semester 1 GPA 3.5
View Profile
Student
ID: ST0702
Student 2

Department: Science Club

Semester 2 GPA 3.6
View Profile
Student
ID: ST0703
Student 3

Department: Science Club

Semester 3 GPA 3.7
View Profile
Student
ID: ST0704
Student 4

Department: Science Club

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>7. Science Club</h2>
<a href="#" class="btn btn-dark btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=71" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">ID: ST0701</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Science Club</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=72" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">ID: ST0702</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Science Club</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=73" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">ID: ST0703</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Science Club</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=74" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-dark mb-2">ID: ST0704</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Science Club</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-dark btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Top Performers

PREMIUM

Premium component from Student-List-Section.

Preview

8. Top Performers

View All
Student
ID: ST0801
Student 1

Department: Top Performers

Semester 1 GPA 3.5
View Profile
Student
ID: ST0802
Student 2

Department: Top Performers

Semester 2 GPA 3.6
View Profile
Student
ID: ST0803
Student 3

Department: Top Performers

Semester 3 GPA 3.7
View Profile
Student
ID: ST0804
Student 4

Department: Top Performers

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>8. Top Performers</h2>
<a href="#" class="btn btn-primary btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=81" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0801</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Top Performers</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=82" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0802</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Top Performers</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=83" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0803</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Top Performers</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=84" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-primary mb-2">ID: ST0804</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Top Performers</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - New Admissions

PREMIUM

Premium component from Student-List-Section.

Preview

9. New Admissions

View All
Student
ID: ST0901
Student 1

Department: New Admissions

Semester 1 GPA 3.5
View Profile
Student
ID: ST0902
Student 2

Department: New Admissions

Semester 2 GPA 3.6
View Profile
Student
ID: ST0903
Student 3

Department: New Admissions

Semester 3 GPA 3.7
View Profile
Student
ID: ST0904
Student 4

Department: New Admissions

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>9. New Admissions</h2>
<a href="#" class="btn btn-success btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=91" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0901</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: New Admissions</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=92" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0902</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: New Admissions</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=93" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0903</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: New Admissions</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=94" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-success mb-2">ID: ST0904</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: New Admissions</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-success btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

Student-List-Section - Graduating Students

PREMIUM

Premium component from Student-List-Section.

Preview

10. Graduating Students

View All
Student
ID: ST1001
Student 1

Department: Graduating Students

Semester 1 GPA 3.5
View Profile
Student
ID: ST1002
Student 2

Department: Graduating Students

Semester 2 GPA 3.6
View Profile
Student
ID: ST1003
Student 3

Department: Graduating Students

Semester 3 GPA 3.7
View Profile
Student
ID: ST1004
Student 4

Department: Graduating Students

Semester 4 GPA 3.8
View Profile
HTML 

<div class="d-flex justify-content-between align-items-center mb-3">
<h2>10. Graduating Students</h2>
<a href="#" class="btn btn-danger btn-sm">View All</a>
</div>
<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=101" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST1001</span>
<h5 class="card-title mb-1">Student 1</h5>
<p class="text-muted mb-2">Department: Graduating Students</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 1</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.5</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=102" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST1002</span>
<h5 class="card-title mb-1">Student 2</h5>
<p class="text-muted mb-2">Department: Graduating Students</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 2</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.6</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=103" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST1003</span>
<h5 class="card-title mb-1">Student 3</h5>
<p class="text-muted mb-2">Department: Graduating Students</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 3</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.7</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm border-0">
<img src="https://picsum.photos/300/300?random=104" class="card-img-top" alt="Student">
<div class="card-body text-center">
<span class="badge bg-danger mb-2">ID: ST1004</span>
<h5 class="card-title mb-1">Student 4</h5>
<p class="text-muted mb-2">Department: Graduating Students</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge text-bg-light"><i class="bi bi-mortarboard"></i> Semester 4</span>
<span class="badge text-bg-light"><i class="bi bi-star-fill"></i> GPA 3.8</span>
</div>
<div class="d-grid">
<a href="#" class="btn btn-outline-danger btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>

teachers-section - Teacher Section 1

PREMIUM

Premium component from teachers-section.

Preview

Teacher Section 1

Responsive Bootstrap 5 Card Layout

Teacher 1

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 2

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 3

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 4

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
HTML 
<div class="text-center mb-4"><h2>Teacher Section 1</h2><p class="text-muted">Responsive Bootstrap 5 Card Layout</p></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=11" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 1</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=12" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 2</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=13" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 3</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=14" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 4</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

teachers-section - Teacher Section 2

PREMIUM

Premium component from teachers-section.

Preview

Teacher Section 2

Responsive Bootstrap 5 Card Layout

Teacher 1

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 2

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 3

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 4

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
HTML 
<div class="text-center mb-4"><h2>Teacher Section 2</h2><p class="text-muted">Responsive Bootstrap 5 Card Layout</p></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=21" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 1</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=22" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 2</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=23" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 3</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=24" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 4</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

teachers-section - Teacher Section 3

PREMIUM

Premium component from teachers-section.

Preview

Teacher Section 3

Responsive Bootstrap 5 Card Layout

Teacher 1

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 2

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 3

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 4

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
HTML 
<div class="text-center mb-4"><h2>Teacher Section 3</h2><p class="text-muted">Responsive Bootstrap 5 Card Layout</p></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=31" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 1</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=32" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 2</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=33" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 3</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=34" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 4</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

teachers-section - Teacher Section 4

PREMIUM

Premium component from teachers-section.

Preview

Teacher Section 4

Responsive Bootstrap 5 Card Layout

Teacher 1

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 2

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 3

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 4

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
HTML 
<div class="text-center mb-4"><h2>Teacher Section 4</h2><p class="text-muted">Responsive Bootstrap 5 Card Layout</p></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=41" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 1</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=42" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 2</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=43" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 3</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=44" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 4</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

teachers-section - Teacher Section 5

PREMIUM

Premium component from teachers-section.

Preview

Teacher Section 5

Responsive Bootstrap 5 Card Layout

Teacher 1

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 2

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 3

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
Teacher 4

Instructor

Experienced educator specializing in modern teaching and practical learning.

View Profile
HTML 
<div class="text-center mb-4"><h2>Teacher Section 5</h2><p class="text-muted">Responsive Bootstrap 5 Card Layout</p></div><div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=51" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 1</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=52" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 2</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=53" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 3</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/400/450?random=54" class="card-img-top" alt="">
<div class="card-body text-center">
<h5 class="card-title">Teacher 4</h5>
<p class="text-primary">Instructor</p>
<p class="card-text small">Experienced educator specializing in modern teaching and practical learning.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View Profile</a>
</div>
</div>
</div>
</div>

testimonials

PREMIUM

Premium component from testimonials.

Preview
HTML 

      <div class="container text-center py-5">
        <i class="bi bi-quote text-primary opacity-25" style="font-size: 5rem; line-height: 0"></i>

        <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner px-4 pb-4">
            <!-- Testimonial 1 -->
            <div class="carousel-item active">
              <p class="lead fw-medium text-dark mb-4 px-md-5" style="font-size: 1.25rem">
                "This team completely transformed our web presence. The new
                platform is incredibly fast, intuitive, and the conversion rates
                have doubled within a month!"
              </p>
              <div class="d-flex justify-content-center align-items-center gap-3">
                <img src="avatar1.jpg" alt="Client" class="rounded-circle object-fit-cover shadow-sm" style="width: 60px; height: 60px">
                <div class="text-start">
                  <h6 class="mb-0 fw-bold">John Doe</h6>
                  <small class="text-muted">CEO, TechCorp</small>
                  <div class="text-warning small mt-1">
                    <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                  </div>
                </div>
              </div>
            </div>

            <!-- Testimonial 2 -->
            <div class="carousel-item">
              <p class="lead fw-medium text-dark mb-4 px-md-5" style="font-size: 1.25rem">
                "Outstanding service from start to finish. They understood
                exactly what we needed and delivered a product that exceeded all
                our expectations."
              </p>
              <div class="d-flex justify-content-center align-items-center gap-3">
                <img src="avatar2.jpg" alt="Client" class="rounded-circle object-fit-cover shadow-sm" style="width: 60px; height: 60px">
                <div class="text-start">
                  <h6 class="mb-0 fw-bold">Sarah Miller</h6>
                  <small class="text-muted">Marketing Director</small>
                  <div class="text-warning small mt-1">
                    <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Indicators below -->
          <div class="carousel-indicators position-relative mt-4">
            <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active bg-primary rounded-circle" style="width: 10px; height: 10px"></button>
            <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1" class="bg-primary rounded-circle" style="width: 10px; height: 10px"></button>
          </div>
        </div>
      </div>

TopNav

PREMIUM

Premium component from TopNav.

Preview

Bootstrap 5 Topbar Components (10)

1. Dark Contact

📞 +880 1712-345678
✉ info@example.com
Mon-Fri 9AM-6PM

2. Primary Social

Welcome
Facebook | Twitter
Login

3. Secondary

Free Shipping
Register
Support

4. Warning Shop

Our Shop
Wishlist
Cart

5. Info

English ▼
USD ▼
Help

6. Danger Offer

🔥 50% OFF
Today Only
Shop Now

7. Success Contact

📞 +88017...
✉ support@mail.com
📍 Bangladesh

8. Light Utility

FAQ
Docs
Sign In

9. News

Latest News
Bootstrap 5
Read More

10. Corporate

☎ Company
✉ info@company.com
Mon-Sat

11. Dark

info@yourdomain.com +1 234 567 8900
Login / Register
HTML 

    <div class="container py-5">
      <h1 class="text-center mb-5">Bootstrap 5 Topbar Components (10)</h1>

      <h4 class="mb-2">1. Dark Contact</h4>
      <div class="bg-dark text-white rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">📞 +880 1712-345678</div>
            <div class="col-md-4 text-center">✉ info@example.com</div>
            <div class="col-md-4 text-md-end">Mon-Fri 9AM-6PM</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">2. Primary Social</h4>
      <div class="bg-primary text-white rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">Welcome</div>
            <div class="col-md-4 text-center">Facebook | Twitter</div>
            <div class="col-md-4 text-md-end">Login</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">3. Secondary</h4>
      <div class="bg-secondary text-white rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">Free Shipping</div>
            <div class="col-md-4 text-center">Register</div>
            <div class="col-md-4 text-md-end">Support</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">4. Warning Shop</h4>
      <div class="bg-warning rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">Our Shop</div>
            <div class="col-md-4 text-center">Wishlist</div>
            <div class="col-md-4 text-md-end">Cart</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">5. Info</h4>
      <div class="bg-info rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">English ▼</div>
            <div class="col-md-4 text-center">USD ▼</div>
            <div class="col-md-4 text-md-end">Help</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">6. Danger Offer</h4>
      <div class="bg-danger text-white rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">🔥 50% OFF</div>
            <div class="col-md-4 text-center">Today Only</div>
            <div class="col-md-4 text-md-end">Shop Now</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">7. Success Contact</h4>
      <div class="bg-success text-white rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">📞 +88017...</div>
            <div class="col-md-4 text-center">✉ support@mail.com</div>
            <div class="col-md-4 text-md-end">📍 Bangladesh</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">8. Light Utility</h4>
      <div class="bg-white border rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">FAQ</div>
            <div class="col-md-4 text-center">Docs</div>
            <div class="col-md-4 text-md-end">Sign In</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">9. News</h4>
      <div class="bg-primary text-white rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">Latest News</div>
            <div class="col-md-4 text-center">Bootstrap 5</div>
            <div class="col-md-4 text-md-end">Read More</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">10. Corporate</h4>
      <div class="bg-dark text-white rounded mb-4">
        <div class="container py-2">
          <div class="row align-items-center">
            <div class="col-md-4">☎ Company</div>
            <div class="col-md-4 text-center">✉ info@company.com</div>
            <div class="col-md-4 text-md-end">Mon-Sat</div>
          </div>
        </div>
      </div>

      <h4 class="mb-2">11. Dark</h4>
      <!-- Custom Header Top Bar -->
      <div class="bg-dark text-light py-2 fs-7">
        <div class="container d-flex justify-content-between align-items-center">
          <!-- Contact Info -->
          <div class="d-flex gap-3 align-items-center">
            <span><i class="bi bi-envelope me-1 text-primary"></i>
              info@yourdomain.com</span>
            <span class="d-none d-md-inline"><i class="bi bi-telephone me-1 text-primary"></i> +1 234 567
              8900</span>
          </div>
          <!-- Social & Auth -->
          <div class="d-flex gap-3 align-items-center">
            <div class="d-none d-sm-flex gap-2">
              <a href="#" class="text-light text-decoration-none"><i class="bi bi-facebook"></i></a>
              <a href="#" class="text-light text-decoration-none"><i class="bi bi-twitter-x"></i></a>
              <a href="#" class="text-light text-decoration-none"><i class="bi bi-youtube"></i></a>
            </div>
            <div class="vr mx-1 d-none d-sm-block"></div>
            <a href="#" class="text-light text-decoration-none fw-bold">Login / Register</a>
          </div>
        </div>
      </div>
    </div>