→ Prajwal Hallale
→ Bootstrap tabs filled

Bootstrap tabs filled

Clean, modern design with a filled background

This bootstrap css example is contributed by Prajwal Hallale, on 19-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Tabs

Author Prajwal Hallale

1.3k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="modern-tabs mb-5">
        <ul class="nav nav-tabs" id="filledTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">
                        Home
                    </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">
                        Profile
                    </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab">
                        Contact
                    </button>
            </li>
        </ul>
        <div class="tab-content" id="filledTabsContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel">
                <h4>Home Content</h4>
                <p>This is the home tab content with modern filled style.</p>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel">
                <h4>Profile Content</h4>
                <p>This is the profile tab content with modern filled style.</p>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel">
                <h4>Contact Content</h4>
                <p>This is the contact tab content with modern filled style.</p>
            </div>
        </div>
    </div>
</div>

More Examples

Bootstrap tabs
tab navigation

Author:
Anonymous

1 year ago

15.9k

v.5.3
Underlined Tabs with bootstrap 5
Minimal design with underline indicator it has Smooth transitions

Author:
Prajwal Hallale

8 months ago

2.5k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

6 months ago

1.4k

v.5.3
Responsive image galary with tabs

Author:
Arturo

7 months ago

4.4k

v.5.3
Tabs example
Beautiful custom tabs example with Bootstrap 5

Author:
Omar Khaled

11 months ago

2.3k

v.5.3
Bootstrap Tab Example
Bootstrap Tab Example Basic Part 1

Author:
StarCode Kh

5 months ago

1.2k

v.5.3
Bootstrap Tabs with Gradient

Author:
Prajwal Hallale

8 months ago

1.4k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

1 month ago

367

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

11 months ago

5.6k

v.4.6
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

2 months ago

700

v.5.3
Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

1 year ago

11.6k

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

2 weeks ago

128

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent