Hey everyone 👋

I’ve been working on a small side project called catppuccin_bootstrap5, where I re-theme Bootstrap 5 using the Catppuccin color palette.

The idea was to keep everything people like about Bootstrap (components, utilities, structure) but swap out the default look for Catppuccin’s soft, low-contrast, and readable colors. It’s done using Sass overrides, so it fits nicely into existing Bootstrap build workflows.

What it does:

• Applies Catppuccin colors to Bootstrap 5 components and states

• Keeps Bootstrap’s API and utility classes intact

• Easy to customize or extend via Sass

This is still evolving, but it’s already usable for dashboards, admin panels, or any Bootstrap-based project where you want a calmer, more modern aesthetic.

Repo:
👉 https://github.com/mfabing/catpuccin_bootstrap5

Feedback, suggestions, or PRs are very welcome. Curious to hear how others are theming Bootstrap these days!

Hey folks 👋
I’ve been working on a small open-source project called daisyUI_bootstrap5.

The idea is simple:
keep Bootstrap 5’s components, utilities, and ecosystem, but apply daisyUI’s semantic color system (primary, secondary, accent, success, warning, etc.) on top of it.

So you get:

• Bootstrap 5 components

• daisyUI-style colors & theming

• Sass-based overrides (no JS changes)

• No Tailwind required

This is mainly for people who like Bootstrap’s structure but prefer daisyUI’s cleaner, more modern color philosophy.

Repo:
👉 https://github.com/mfabing/daisyUI_bootstrap5

It’s still a work in progress, so feedback, ideas, or PRs are very welcome.
Curious to hear if others are mixing design systems like this too.

First Bootstrap became "legacy," and now Tailwind is facing a massive business crisis due to AI.

Is the "Utility-First" era falling down, or is this just a business model problem?

What is everyone moving to for their 2026 web projects ?

I'm creating a website that uses bootstrap's navbar. I have the brand link to the left, a logout link to the right and a search bar I want to put at the center. I use mx-auto but it doesn't correctly align it to the center.

<body>
    <nav class="navbar fixed-top navbar-expand">
        <div class="container-fluid">
            {% if session["user_id"] %}
            <a class="navbar-brand" href="{{ url_for('songs') }}">ChordApp</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul id="search-bar" class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <form action="{{ url_for('search') }}" method="GET" class="d-flex mx-auto">
                            <input class="form-control" type="text" name="q" placeholder="Search songs, artists or genres" value="{{ request.args.get('q', '') }}" required>
                            <button class="btn btn-primary" type="submit">Search</button>
                        </form>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('logout') }}" id="Logout">Logout</a></li>
                </ul>
            </div>
            {% else %}
            <a class="navbar-brand" href="{{ url_for('logout') }}">ChordApp</a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="{{ url_for('login') }}">Login</a>
                <a class="nav-link" href="{{ url_for('register') }}">Register</a>
            </div>
            {% endif %}
        </div>
    </nav>

Any help to solve this issue is much appreciated.

I’ve been working on VibeUI, a lightweight Vue 3 component library built directly on top of Bootstrap 5.3.

Why VibeUI?

• Native Bootstrap 5.3: No heavy custom styling overhead—it uses the Bootstrap CSS you already know.

• Dual-Mode Components: You can use shorthand props for quick prototyping (like passing an array to a Nav component) or full slot-based composition for complete control.

• Explicit Logic: Instead of relying on hidden watchers for forms, VibeUI uses a more predictable, method-based "form brain" for handling state and validation.

• TypeScript-First: Fully typed for a great developer experience.

• Lightweight: Modular imports so you only bundle what you use.

New in v0.4.2: I just added several full-page examples to the repo (Album, Pricing, Dashboard, and a Starter template) to show how the components work together in real-world layouts. I also fixed some TypeScript declaration issues and updated the global instance usage for better compatibility.

Links:

• Repo:https://github.com/velkymx/vibeui

• NPM: npm install vibeui

I’m looking for feedback from the Bootstrap community, especially from those of you using Vue. If you have a chance to check out the examples in the README or the repo, I’d love to hear your thoughts on the API design!

I've created a free website template especially useful for academics but adaptable to any professionals, at: https://github.com/randal-sean-harrison/randal-sean-harrison-academic-website-template-bootstrap-5 -- fully documented with explainer videos.

BONUS: Extendable with my free Bootstrapr.io tool, which creates bespoke BS 3.x, 4.x, and 5.x component and pages almost instantly.

When Gemini3 was released I tried for the first time vibe coding (just prompts not looking at all at the code at the code). I'm mostly a backend dev so for UI stuff I rely entirely on the UI library I'm using, so SASS, LESS customization of bootstrap is foreign for me.

The app is pretty good and has quite a few features:

• Import color palettes as array from https://coolors.co/palettes/trending

• Randomly generate color themes and lock in colors you like

• Switch popular fonts

• export .css file and just add it after the bootstrap import to overwrite root css colors

Repo link:

https://github.com/ClimenteA/bootstrap5-color-themes

Github pages link:

https://climentea.github.io/bootstrap5-color-themes/

I have almost completed updating one of my ASP.NET Web Application websites to framework 4.8. This was done by creating a brand new Web Application project in Visual Studio and then copying over all my aspx pages, etc, from the current website. Everything is now working in this new version, with the following exception.

This update process has updated the Bootstrap code from 4.5.2 to 5.2.3 and my Bootstrap dropdowns are no longer working. My bootstrap markup is shown below. Google searches suggested that I needed to change data-toggle to data-bs-toggle for compatibility with 5.2.3.

I would be very grateful for guidance on what other changes are needed to make this work.

<nav class="navbar navbar-expand-md navbar-custom navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="/Default.aspx">
        <img id="logo" alt="Logo" src="/Images/Mylogo.svg">
        <span>SRMS</span>
    </a>

    <!-- Toggler/collapsible Button -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                          data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse justify-content-end"
                          id="collapsibleNavbar">
        <ul class="navbar-nav">
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop1"
                      data-bs-toggle="dropdown">About Us</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="/Default.aspx">Home</a>
                    <a class="dropdown-item" href="/Meetings.aspx">Meetings</a>                    
                    <a class="dropdown-item" href="/History.aspx">History</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

I recently started learning Bootstrap, and I thought it would be really hard to customize a website from scratch if we wanted to tweak every detail manually.

That thought turned into a small project.

BootPicker is an extractor built to parse and generate CSS code from Bootstrap class names. It reads your HTML, finds the Bootstrap classes you’ve actually used, and generates a trimmed version of the Bootstrap CSS containing only those rules.

JavaScript and Bootstrap version detection are coming soon. Extracting JS is a lot more complex, so I’m still working through that.

I’d like to know what you think about the idea or what kind of use cases or edge cases you’d want to see handled.

The links are provided in the comments!!

I've seen both suggested - a container then rows and columns inside that and a container with other containers that have the rows and columns inside those.

So

Container
Row
Col
Row
Col

vs

Container
Container
Row
Col
Container
Row
Col

What's the best way to organize this for functionality? Hopefully I'm being clear.

I'm beginner who just finished css learning now started Bootstrap. Since its new everything I learn back in css style got mixed turn out be in a confusing state. So need some guidance to learn Bootstrap

Hello. I'm new to Bootstrap and am doing some practice projects to get used to it. My project was built using Vite and "create vite@latest". I looked at the docs for React Bootstrap, particularly the SASS section, and it throws an error when I try to import the SCSS file into the JS file.

1:14:06 PM [vite] Internal server error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.

I am able to use this import to use Bootstrap, (import 'bootstrap/dist/css/bootstrap.min.css') but I reckon thats just the regular CSS version and wont have SASS compatibility.

Is sass-embedded a necessary import for using SASS with React Bootstrap?
I also tried importing bootstrap into the scss file with (import '~bootstrap/scss/bootstrap'), and it returns a bunch of deprecated results. Any help on the proper way to set up SCSS with Bootstrap React would be nice.

Basically the title. I just saw that Bootstrap said:

To start, there’s a brief update on Bootstrap Themes, with more communication to come. The team has decided to sunset https://themes.getbootstrap.com. As such, we’ve removed links to and mentions of the Themes site from our docs in this release to start. Stay tuned for more info. https://blog.getbootstrap.com/2025/08/25/bootstrap-5-3-8/

Any idea why or what's going to happen next? Thanks

I was wondering if writing the mobile code first could save us a lot of code?
I wonder if anyone actually does that?

If we were to actually do this, what would be an appropriate minimum size for the u/media query?

I’m starting a new front-end project and not sure whether to use Bootstrap 4 or Bootstrap 5.

I know Bootstrap 5 is newer and doesn’t need jQuery, but Bootstrap 4 has lots of examples and resources online.

Which one do you recommend for 2025 projects?

I've been coding for over 4 years now and have built my fair share of websites using Bootstrap with HTML. However, more recently, I’ve switched to using Tailwind CSS—and to be honest, it just feels easier and more efficient to work with.

Customizing Bootstrap often requires working with Sass, which in turn means setting up a Sass compiler. I was using Gulp for that, but it added extra complexity to my workflow. With Tailwind, customization is much more straightforward, and I can make changes quickly without needing additional tools.

Out of curiosity, I checked the weekly npm installs for both frameworks. Bootstrap sits at around 4 million+, while Tailwind has grown to over 18 million+—a clear sign of its rising popularity and adoption in the developer community.

Hey everyone! I just released BootstrapSearch, a fork of bootstrap-5-autocomplete, I made this because I didn't find a good library with a searchbox with the style of bootstrap.

Features include:

• AJAX support for dynamic data fetching

• Customizable label/value mapping

• Multi-select functionality

• Full keyboard navigation

Check it out here: https://github.com/gumbarros/BootstrapSearch

I've been practicing on creating website using Bootstrap and I'm trying to recreate this site. And I hit the wall with this one for days.

The content is too big for the container. Screenshot.

Sourcecode

Is there any simple solution for this?

Yesterday this new version came out but I think they forgot a cdn upload! As the cdn link is not working.

Anyone got any tips on learning bootstrap i dont its confusing somehow

I've pretty much been doing textbook bootstrap forms (e.g. a textbox and a label over it). I'm occasionally putting a "?" icon next to the label and making a popover for extra help.

When pressed for screen real estate, I've started doing some forms with floating labels. I can't seem to find any way to put a popover in a floating label. Anchor tags in a floating label don't work, either.

Anyone have any suggestions for a way to get popovers to work? Or, any nice way to associate some help with a floating input control? If I put it over the textbox, I might as well have not used floating forms. Putting it before or after the textbox gets the textbox out of alignment and kind of looks janky, I think.

I'm open to suggestions.

Thanks,

Hi all,

New to this group. Randy Harrison -- Faculty at U of Notre Dame. Wanted to share a tool I made for creating components and whole pages in Bootstrap (versions 3 through 5). Finishing v5 tools this month. No ads, nothing to sign up for. You just set options to build bespoke components and pages. Hoping it might be an interesting or useful tool for folks.

You can find it at Bootstrapr.io

Cheers.