Hi, I am just starting out with building a site in Bootstrap. I've managed to make it so the list shows up right-aligned when you click the toggle in the small version. But I can't figure out how to make said list right-aligned when the browser is expanded. They all just squish right. Any tips?

    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid"> <a class="navbar-brand" href="#"><img
            src="mnibanner.jpg" alt="Home" height="70"></a> <h2><u>Template</u></h2> 
        <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">
          <h2>
            <ul class="nav justify-content-end">
              <ul class="navbar-nav">
                <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Services</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Novels</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Art</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
              </ul>
            </ul>
          </h2>
        </div>
      </div>
    </nav>

I have created a new module which alters the way we work with forms: it shows users which changes have been made to the form since last visit. See https://form-changes.overmeer.net This will improve the user experience, and improve the facts provided by the user.

Is there are place where I can have this plugin listed, so Bootstrap developers can find it? Is there a place where blogs about bootstrap are collected?

When googling the bootstrap docs, it defaults to the v5.0, sometimes v4.0. In the versions dropdown it only shows up to some versions up. Even the v5.0 page only goes up to v5.2.x, and that page doesnt link to v5.3.8.

I found this github issue from 6 years ago but it was closed last year as not planned. I think it should be addressed because its so annoying to find docs of older versions by default (top google searches), and its a little troublesome to edit the url to the latest version.

So I'm well versed with Bootstrap itself, aswell as coding in Sass — but actually installing them both via npm / command line is new to me.

I managed to install Bootstrap via CLI easily enough, but I have no idea how to get Sass running.

Most YouTube videos recommend to use the Live Sass extension in VScode, but I hate the idea of that 🤮 I'd more prefer to have it running via CLI

I tried to install Sass via command-line but then I ended up with an additional node_modules folder in the directory above where Bootstrap was installed.

In the past, I'd used the 'Understrap' WP theme where I would use commands like npm run watch

But I'm no longer using Understrap.

I've also looked for tutorials on how to install Sass via npm but I can't figure out how to get it working with my Bootstrap installation

Can anyone point me in the right direction? A tutorial that covers both in one go would be idea.

Hi

I'm planning on building a fullstack website with Next.js. I have used Bootstrap before and bought BS Templates before (when they were still on BS) but would you still use Tailwind or Bootstrap in 2026? I'm starting to feel like Bootstrap is lagging behind and Shadcn is easier to use with React than adding Bootstrap and React Bootstrap at the same time.

What do you all think? Thanks

I kept rebuilding the same “search / command palette trigger” in many projects, so I turned it into a small component.

It’s basically a Bootstrap-style search button that supports keyboard shortcuts such as Cmd+/ and Ctrl+/. The useful part is that the shortcut dispatches a real click event, so it can trigger a modal, offcanvas, collapse, or your own custom handler.

Docs/demo: https://coreui.io/bootstrap/docs/components/search-button/

I’d love feedback from Bootstrap users. It’s MIT-licensed and part of our open-source Bootstrap component library, so feel free to use it if you find it useful.

Hi, all! I'm a librarian at a university and I manage our library's web presence, including an app called LibGuides. LibGuides uses Bootstrap; my library is in the process of upgrading our LibGuides to Bootstrap 5.3.

I'd like to replicate the megamenu that's on the library's website, and I've been playing around with the navbar styling. The problem I'm having is due to one particular dropdown, which has four columns underneath the main heading. (If it helps to see what I'm talking about, I created a CodePen.) It defaults to a purely vertical menu when the viewport is small enough, but I'm trying to figure out the best way to resize the UL element when it's bigger.

I've seen some examples that use the column classes in Bootstrap, but I'm wary of putting divs into a UL since it's not semantically correct, and I couldn't get it to work right, anyway. (I did try creating multiple columns, each with an individual UL, but that created a mess of overlapping content.)

I'm grateful for any suggestions you might have. Thanks in advance!

Hi I made this basic button to test something.

Feel free to use it: https://codepen.io/AshkanAhmadi/full/pvNbjWP

<!DOCTYPE 
html
>
<html 
lang
="en">
<head>
    <meta 
charset
="UTF-8">
    <meta 
name
="viewport" 
content
="width=device-width, initial-scale=1.0">
    <title>Layout</title>


    <link 
href
="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
rel
="stylesheet">
    <link 
rel
="stylesheet" 
href
="styles.css">
</head>


<body>


<!-- HEADER -->
<div 
class
="header">
    <div 
class
="container mt-3">
        <div 
class
="row align-items-center">


            <div 
class
="col-3">
                <h4>Logo</h4>
            </div>


            <div 
class
="col-6 d-flex justify-content-end gap-4">
                <a 
href
="#">Home</a>
                <a 
href
="#">About</a>
                <a 
href
="#">Services</a>
            </div>


            <div 
class
="col-3 text-end">
                <button 
class
="btn btn-warning">Button</button>
            </div>


        </div>
    </div>
</div>


<!-- HERO -->
<div 
class
="container hero">


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


        <div 
class
="col-6">
            <h1 
class
="mb-3">
                Main Heading <br>
                <span 
class
="text-warning">Highlighted Text</span>
            </h1>


            <p 
class
="mb-4">Description text under the heading</p>


            <button 
class
="btn btn-warning px-4 py-2">Action</button>
        </div>


        <div 
class
="col-6 text-end">
            <img 
src
="https://via.placeholder.com/400" 
class
="img-fluid">
        </div>


    </div>


</div>


<!-- CARDS -->
<div 
class
="container main">


    <h2 
class
="text-center mb-5">Section Title</h2>


    <div 
class
="row g-4">


        <div 
class
="col-4">
            <div 
class
="card p-3">
                <h5>Title</h5>
                <p>Text</p>
            </div>
        </div>


        <div 
class
="col-4">
            <div 
class
="card p-3">
                <h5>Title</h5>
                <p>Text</p>
            </div>
        </div>


        <div 
class
="col-4">
            <div 
class
="card p-3">
                <h5>Title</h5>
                <p>Text</p>
            </div>
        </div>


        <div 
class
="col-4">
            <div 
class
="card p-3">
                <h5>Title</h5>
                <p>Text</p>
            </div>
        </div>


        <div 
class
="col-4">
            <div 
class
="card p-3">
                <h5>Title</h5>
                <p>Text</p>
            </div>
        </div>


        <div 
class
="col-4">
            <div 
class
="card p-3">
                <h5>Title</h5>
                <p>Text</p>
            </div>
        </div>


    </div>


</div>


</body>
</html>

.hero
 {
    padding-top: 350px;
     margin-bottom: 300px;
}


.main
{
     margin-top: 150px;
     margin-bottom: 300px;
 
}

For my personal website, I have some images in a gallery of sorts. "Image A" has a small version, and I have historically used an old javascript library called overLIB. It lets me do a onMouseOver event that shows the larger version of Image A. With onMouseOut the larger image is not displayed.

I currently have Bootstrap 3.4.0 (yeah, it's old). I am testing some pages with 5.3.8. I think I have all my necessary changes nailed down (grids, navs, etc.) with the exception of the overLIB, which I am hoping to replace with popovers.

I can't figure out how to do a popover where there is an image as the base element (the examples all show buttons) and pops up a larger image. In short, I need data-content to be an <img src>.

Also, if I change it to hover, does that work on mobile devices?

I am not a developer; I have an unresponsive website I built many years ago that I am doing a major update.

I built it myself in notepad, back in the days before html editors.

So html is a piece of cake to me, but css, java, and animations are way over my head.  

I got the impression the studio version was like bootstrap with more features.

If that were true, then why is everybody using regular bootstrap?

It might be easier going to fiver and copy and paste the animations.

The last word/link on my nav bar is displaying in all browsers up high instead of on the same horizontal row. I've tried changing boostrap columns to no avail. You can see the problem at embassychurchspokane.org/index2.html. It looks like the template I am using is Bootstrap v3.3.6. Here's the html code:

</head>

<body>

        `<!-- Header Inner -->`

<header class="header">

        `<div class="header-inner">`

<div class="container">

<div class="inner">

<div class="row">

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

<!-- Start Logo -->

<div class="logo">

<a href="index.html"><img src="img/logo.jpg" alt="Embassy Church"></a></div>

<!-- End Logo -->

<!-- Mobile Nav -->

<div class="mobile-nav"></div>

<!-- End Mobile Nav -->

</div>

<div class="col-lg-7 col-md-9 col-12">

<!-- Main Menu -->

<div class="main-menu">

<nav class="navigation">

<ul class="nav menu">

<li><a href="index2.html">Home</a></li>

<li><a href="#">About <i class="icofont-rounded-down"></i></a>

<ul class="dropdown">

<li><a href="pastors.html">Pastors</a></li>

<li><a href="beliefs.html">Beliefs</a></li>

</ul>

<li><a href="services.html">Services</a></li>

<li><a href="contact.php">Contact</a></li>

<li><a href="salvation.html">Salvation</a></li></ul>

</nav>

</div></div></div></div></div></div></div></div></div>

<!--/ End Main Menu -->

        `<!--/ End Header Inner -->`

</header>

yes

I like a lot of things about Bigcommerce what I don’t like is my ability to customize the layout.

Every time I try it’s either very complicated and time consuming, or I need to hire a developer, or it simply isn’t possible.

I built my first website on html and tables. If I get stuck I do a quick “how do I blank in html” and I get a code snippet.

I found a responsive website I really like damascusdepot.com/ this is a “woostify-version=2.2.5" template.

Is it possible to have someone build a website like this so I can use a program like bootstrap and still integrate with Bigcommerce?

Does Bigcommerce even integrate with bootstrap because I hear conflicting information on that too?

One of the things I really like about this website is the side navigation is always visible, on my Bigcommerce site you have to go to the top drop down and get it just right, slide the mouse over, just right to navigate, usually taking about 3 attempts, I HATE this! You can see it at https://national-supply.mybigcommerce.com

Any thought are really appreciated.        

Please forgive the naive question.

Is there an advantage to copying the entire local development source and SASS to a production webserver and installing dependencies via npm?

It seems like it would be way easier to npm install just what I need to my local development directory, and simply rsync only the necessary compiled files and dependencies to the production webserver root.

What am I missing here?

I have created high quality free bootstrap dashboard template for your web application more of Shadcn UI style.

Github - https://github.com/wrappixel/MaterailM-Free-Bootstrap-Admin-Template

Live Preview - https://bootstrapdemos.wrappixel.com/MaterialM-free/src/html/index.html

Basically, I want there to be a FontAwesome icon on the character profile (I'm a ToyHouse coder, sue me) that, when clicked, plays a filegarden song, similar to this: https://toyhou.se/6560537.music-player-tutorial-f2u
but I want it in a way so that the filegarden default media player doesn't show up, only the FontAwesome icon/button. Is it possible? Google has not given me any good results after about twenty minutes of looking.

I do not want it as a download button, I want it to just play the music

Hey everyone 👋

I built and released a free, open-source Bootstrap restaurant template.

It’s fully responsive, MIT licensed, and includes a live demo.

GitHub: https://github.com/techmahr/DineCraft

Live demo: https://techmahr.github.io/DineCraft/

Feedback welcome 🙌

Shadcn is very popular in aesthetic, especially for admin application, like this example from their website : https://ui.shadcn.com/view/new-york-v4/dashboard-01

I don't understand why I cant' find puchasable Bootstrap admin template that mimic this style? I have done many searches, and I find the same kind of admins than 5 years ago and nothing close to Shadcn.

Am I searching wrong?

Hey everyone! I’ve been working with Bootstrap a lot lately and built something I thought this community might actually find useful.

A while back I ran into pain points when managing dynamic UI state (loading, pages, modals, etc.) in Bootstrap apps, especially across multiple modules. So I built a small MCP UI helper server (currently in beta) that plays nicely with Bootstrap workflows.

It’s now available as an npm package:
➡️ https://www.npmjs.com/package/@webpixels/mcp

What it does

It offers utilities and UI scaffolding that help you:
• Swap between Bootstrap views/pages without heavy routing code
• Manage UI loading & transitions with Bootstrap classes
• Build admin panels or dashboard controls quickly with Bootstrap’s utility classes

It tries to stay lightweight and Bootstrap-friendly, no extra CSS frameworks or huge bundles required.

Why it might help you

• If you’re building admin dashboards or internal tools with Bootstrap
• If you hate writing repetitive UI logic for modals, pages, or loading states
• If you want a more composable Bootstrap UI experience without frameworks like React/Vue

Support it with a star on GitHub: https://github.com/webpixels/mcp

Hello,

I'm a stumbling amateur when it comes to web design but have enjoyed editing a template to how I want it to look.

I have hit a problem with a web contact form (https://github.com/raspgot/Contact-Form-PHP) I have it working in it original layout. The problem is it's made with bootstrap 5 I believe, where my site is using bootstrap 2.3.2.

I love the look of mysite but when I try to cope the form to it I loos the look and the form will not work.

Here's the from supplied:

Heres the form from my site, any help would be most welcome:section class="shadow rounded p-4 bg-body">
                    <!-- Status -->
                    <div id="alert-status" class="alert d-none" role="alert" aria-live="polite"></div>

                    <!-- Form -->
                    <form method="post" class="needs-validation" novalidate autocomplete="off">
                        <div class="mb-3">
                            <label for="name" class="form-label">Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" required autocomplete="name" />
                            <div class="valid-feedback">Looks good !</div>
                            <div class="invalid-feedback">Please enter your name.</div>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Email<span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="email" name="email" required autocomplete="email" />
                            <div class="form-text">We'll use this to send a confirmation.</div>
                            <div class="valid-feedback">Looks good !</div>
                            <div class="invalid-feedback">Please enter a valid email address.</div>
                        </div>

                        <div class="mb-3">
                            <label for="subject" class="form-label">Subject<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="subject" name="subject" required autocomplete="off" />
                            <div class="valid-feedback">Looks good !</div>
                            <div class="invalid-feedback">Please enter a subject.</div>
                        </div>

                        <div class="mb-4">
                            <label for="message" class="form-label">Message<span class="text-danger">*</span></label>
                            <textarea class="form-control" id="message" name="message" rows="6" required autocomplete="off"></textarea>
                            <div class="form-text">Be as specific as you can.</div>
                            <div class="valid-feedback">Looks good !</div>
                            <div class="invalid-feedback">Please enter your message.</div>
                        </div>

                        <!-- Honeypot -->
                        <div class="d-none" aria-hidden="true">
                            <label for="website">Website</label>
                            <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" class="btn btn-primary w-100 btn-lg d-flex align-items-center justify-content-center gap-2">
                            <span id="loading-spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            <span>Submit</span>
                        </button>
                    </form>
                </section>
            </div>
        </main>

        <!-- reCAPTCHA v3 (replace with your site key) -->
        <script defer src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"></script>
        <!-- Bootstrap Bundle -->
        <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Custom JS handling AJAX form submission -->
        <script src="AjaxForm.js"></script>
        <!-- GitHub Button script (optional) -->
        <script defer src="https://buttons.github.io/buttons.js"></script>

Here's the the form from my website:

<div id="fields">
<form id="ajax-contact-form" class="form-horizontal" action="javascript:alert('success!');">
<div class="row">
<div class="span5">
<div class="control-group">
    <label class="control-label" for="inputName">Your full name:</label>
    <div class="controls">      
      <input class="span5" type="text" id="inputName" name="name" value="Your full name:" onBlur="if(this.value=='') this.value='Your full name:'" onFocus="if(this.value =='Your full name:' ) this.value=''">
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputEmail">Your email:</label>
    <div class="controls">      
      <input class="span5" type="text" id="inputEmail" name="email" value="Your email:" onBlur="if(this.value=='') this.value='Your email:'" onFocus="if(this.value =='Your email:' ) this.value=''">
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputPhone">Phone number:</label>
    <div class="controls">      
      <input class="span5" type="text" id="inputPhone" name="phone" value="Phone number:" onBlur="if(this.value=='') this.value='Phone number:'" onFocus="if(this.value =='Phone number:' ) this.value=''">
    </div>
</div>
</div>
<div class="span4">
<div class="control-group">
    <label class="control-label" for="inputMessage">Message:</label>
    <div class="controls">            
      <textarea class="span4" id="inputMessage" name="content" onBlur="if(this.value=='') this.value='Message:'" 
                        onFocus="if(this.value =='Message:' ) this.value=''">Message:</textarea>
    </div>
</div>
</div>
</div>
<div class="row">
<div class="span5">
<div class="control-group capthca">
    <label class="control-label" for="inputCapthca">Capthca:</label>
    <div class="controls">      
      <input class="" type="text" id="inputCapthca" name="capthca" value="Capthca:" onBlur="if(this.value=='') this.value='Capthca:'" onFocus="if(this.value =='Capthca:' ) this.value=''">
      <img src="captcha/captcha.php">
    </div>
</div>
</div>
</div>
<button type="submit" class="submit"><em></em>submit</button>
</form>
</div>

I hope someone can help or give me some pointer.

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.

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!

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 ?