• 📖 Official Bootstrap Documentation
• 🏀 Online playground
• ✨ Release Notes

Features

• 📦  Instant Bootstrap Integration, No Config Required
• 🪶  No Decrease in Performance, Javascript injected to client side
• 🎉  Everything from Bootstrap available
• 🕶️  Dark Mode support

Quick Setup

1. Add nuxt-bootstrap-css dependency to your project

   # Using pnpm
   pnpm add -D nuxt-bootstrap-css
   
   # Using yarn
   yarn add --dev nuxt-bootstrap-css
   
   # Using npm
   npm install --save-dev nuxt-bootstrap-css

2. Add nuxt-bootstrap-css to the modules section of nuxt.config.ts

   export default defineNuxtConfig({
     modules: [
       'nuxt-bootstrap-css'
     ]
   })

3. Start designing your webpage using Bootstrap classes. Full bootstrap javascript and @popper/core is already imported.

   <template>
     <!-- JS Dropdown -->
     <div class="container my-5">
       <div class="dropdown mb-5">
         <button
           class="btn btn-secondary dropdown-toggle"
           type="button"
           data-bs-toggle="dropdown"
           aria-expanded="false"
         >
           Dropdown button
         </button>
         <ul class="dropdown-menu">
           <li><a class="dropdown-item" href="#">Action</a></li>
           <li>
             <a class="dropdown-item" href="#">Another action</a>
           </li>
           <li>
             <a class="dropdown-item" href="#"> Something else here </a>
           </li>
         </ul>
       </div>
       <!-- JS Tabs -->
       <ul class="nav nav-tabs" id="myTab" role="tablist">
         <li class="nav-item" role="presentation">
           <button
             class="nav-link active"
             id="home-tab"
             data-bs-toggle="tab"
             data-bs-target="#home-tab-pane"
             type="button"
             role="tab"
             aria-controls="home-tab-pane"
             aria-selected="true"
           >
             Home
           </button>
         </li>
         <li class="nav-item" role="presentation">
           <button
             class="nav-link"
             id="profile-tab"
             data-bs-toggle="tab"
             data-bs-target="#profile-tab-pane"
             type="button"
             role="tab"
             aria-controls="profile-tab-pane"
             aria-selected="false"
           >
             Profile
           </button>
         </li>
         <li class="nav-item" role="presentation">
           <button
             class="nav-link"
             id="contact-tab"
             data-bs-toggle="tab"
             data-bs-target="#contact-tab-pane"
             type="button"
             role="tab"
             aria-controls="contact-tab-pane"
             aria-selected="false"
           >
             Contact
           </button>
         </li>
         <li class="nav-item" role="presentation">
           <button
             class="nav-link"
             id="disabled-tab"
             data-bs-toggle="tab"
             data-bs-target="#disabled-tab-pane"
             type="button"
             role="tab"
             aria-controls="disabled-tab-pane"
             aria-selected="false"
             disabled
           >
             Disabled
           </button>
         </li>
       </ul>
       <div class="tab-content" id="myTabContent">
         <div
           class="tab-pane fade show active"
           id="home-tab-pane"
           role="tabpanel"
           aria-labelledby="home-tab"
           tabindex="0"
         >
           ...
         </div>
         <div
           class="tab-pane fade"
           id="profile-tab-pane"
           role="tabpanel"
           aria-labelledby="profile-tab"
           tabindex="0"
         >
           ...
         </div>
         <div
           class="tab-pane fade"
           id="contact-tab-pane"
           role="tabpanel"
           aria-labelledby="contact-tab"
           tabindex="0"
         >
           ...
         </div>
         <div
           class="tab-pane fade"
           id="disabled-tab-pane"
           role="tabpanel"
           aria-labelledby="disabled-tab"
           tabindex="0"
         >
           ...
         </div>
       </div>
     </div>
   </template>

That's it! You can now use Nuxt Bootstrap CSS in your Nuxt app ✨

Dark Mode

Bootstrap 5.3 introduced Dark Mode.

Simply by adding attribute data-bs-theme to any element with value light or dark you can manipulate it's theme.

Bootstrap 5.3 is already pre-configured with light and dark theme variables. But you can always create custom themes with custom variables to switch colors.

With color-mode it's easy to configure Dark Mode for bootstrap.

colorMode: {
  dataValue: 'bs-theme',
  classSuffix: ''
}

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
npm run release