→ java stories story
→ navbar gradient #1

navbar gradient #1

This bootstrap css example is contributed by java stories story, on 30-Jul-2025. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Header

Author java stories story

385

v.5.3

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-dark navbar-gradient fixed-top">
                <div class="container">
                    <a class="navbar-brand logo" href="#">
                        <i class="fas fa-gem"></i>
                        Gradient Co
                    </a>
                    
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav2">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse" id="navbarNav2">
                        <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="#">Product</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Portfolio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="btn btn-outline-light ms-2" href="#">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

More Examples

list navbar

Author:
java stories story

3 weeks ago

324

v.5.3
navbar white simple #1

Author:
java stories story

3 weeks ago

548

v.5.3
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

5 months ago

885

v.4.6
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

11 months ago

1.6k

v.4.6
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Anonymous

2 months ago

1.1k

v.5.3
hero parallax

Author:
java stories story

3 weeks ago

824

v.5.3
Sticky Table Headings Example

Author:
Anonymous

3 months ago

1.2k

v.5.3
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

5 months ago

1.3k

v.4.6
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Talha Abdullah Bangyal

2 months ago

1.1k

v.5.3
about us #1

Author:
java stories story

3 weeks ago

432

v.5.3
Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

7 months ago

2.1k

v.5.3
Continue with google button

Author:
Noah Kim

1 year ago

5.2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent