Bootstrap UI for Flutter

Bootstrap UI Flutter

A Flutter component library that faithfully implements the Bootstrap 5.3 design system. Built for developers who want to create modern, highly responsive, and beautiful Flutter web, desktop, and mobile applications with the familiar Bootstrap aesthetic and developer experience.

Pub Version Pub Points Flutter CI Status License

🌟 Key Features

  • Responsive Grid System: Full 12-column layout control using BsContainer, BsRow, and BsCol supporting fluid widths and breakpoints (sm, md, lg, xl, xxl).
  • Design Tokens: Built-in Bootstrap color palettes (primary, secondary, success, danger, warning, info, light, dark), typography sizes, spacing helpers (s1-s5), and border radii.
  • Rich Component Suite:
    • Buttons & Groups: Solid, outline, pill, different sizing, and loading states.
    • Navigation: Breadcrumbs, fully responsive dropdown menus.
    • Containers & Layout: Cards (with header, footer, image support), animated accordions, carousels, and collapse widgets.
    • Feedback & Overlays: Dismissible alerts with custom animation transitions.
  • Dual Theme Support: Seamless, native integration with standard Flutter Light and Dark modes matching Bootstrap 5.3 specifications.
  • Utility Extensions: Fast layout methods like .p3(), .mx2(), .w100() directly on widgets to avoid nested boilerplate code.

🎨 Theme Comparison

Light Theme Dark Theme
Light Theme Dark Theme

🚀 Getting Started

1. Installation

Add bootstrap_ui_flutter to your pubspec.yaml dependencies:

dependencies:
  bootstrap_ui_flutter: ^0.5.0

Run in your terminal:

flutter pub get

2. Basic Setup

Wrap your application in MaterialApp and register the Bootstrap theme extensions for light and dark modes:

import 'package:flutter/material.dart';
import 'package:bootstrap_ui_flutter/bootstrap_ui_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bootstrap UI Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        extensions: [BsThemeData.lightTheme],
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        extensions: [BsThemeData.darkTheme],
      ),
      home: const MyHomePage(),
    );
  }
}

3. Usage Example

Create a beautiful Bootstrap-style card with a layout grid and a button group:

import 'package:flutter/material.dart';
import 'package:bootstrap_ui_flutter/bootstrap_ui_flutter.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final bs = context.bs; // Access Bootstrap tokens easily

    return Scaffold(
      backgroundColor: bs.bodyBg,
      body: SafeArea(
        child: BsContainer(
          type: BsContainerType.fixed,
          child: BsRow(
            gutterX: BsSpacing.s3,
            gutterY: BsSpacing.s3,
            children: [
              BsCol(
                config: const BsColConfig(xs: 12, md: 8, lg: 6),
                child: BsCard(
                  header: const BsCardHeader(child: Text('Featured Component')),
                  body: BsCardBody(
                    children: [
                      BsCardTitle('Bootstrap UI Card'),
                      Text(
                        'This card is structured exactly like Bootstrap CSS templates, utilizing grids, spacing, and buttons.',
                        style: TextStyle(color: bs.bodyColor),
                      ).mb3(),
                      BsButton(
                        label: 'Get Started',
                        variant: BsButtonVariant.primary,
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ).py3(),
            ],
          ),
        ),
      ),
    );
  }
}

📚 Documentation & Reference

Detailed documentation is available in both English and German under the doc/ directory:

To view interactive, live examples of all components in action, run the project inside the /example directory:

cd example
flutter run

🛠️ Contribution & Development

Contributions are welcome! If you find a bug or have a suggestion, feel free to open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

bootstrap_ui_flutter
ui/components/accordion/bs_accordion
ui/components/alert/bs_alert
ui/components/badge/bs_badge
ui/components/breadcrumb/bs_breadcrumb
ui/components/button/bs_button
ui/components/button/bs_button_group
ui/components/button/bs_close_button
ui/components/card/bs_card
ui/components/card/bs_card_group
ui/components/collapse/bs_collapse
ui/components/dropdown/bs_dropdown
ui/components/forms/bs_check
ui/components/forms/bs_feedback
ui/components/forms/bs_input
ui/components/forms/bs_input_group
ui/components/forms/bs_radio
ui/components/forms/bs_range
ui/components/forms/bs_select
ui/components/grid/bs_container
ui/components/grid/bs_row
ui/components/icon/bs_icon
ui/components/image/bs_figure
ui/components/image/bs_image
ui/components/list_group/bs_list_group
ui/components/modal/bs_modal
ui/components/nav/bs_nav
ui/components/navbar/bs_navbar
ui/components/offcanvas/bs_offcanvas
ui/components/pagination/bs_pagination
ui/components/placeholder/bs_placeholder
ui/components/popover/bs_popover
ui/components/progress/bs_progress
ui/components/scrollspy/scrollspy
ui/components/scrollspy/scrollspy_controller
ui/components/spinner/bs_spinner
ui/components/table/bs_table
ui/components/toast/bs_toast
ui/components/toast/bs_toast_manager
ui/components/tooltip/bs_tooltip
ui/components/typography/bs_heading
ui/helpers/bs_ratio
ui/helpers/bs_stack
ui/helpers/bs_vertical_rule
ui/tokens/bootstrap_theme
ui/tokens/breakpoints
ui/tokens/bs_icons
ui/tokens/colors
ui/tokens/enums
ui/tokens/spacing
ui/tokens/typography
ui/utilities/alignment_extension
ui/utilities/border_extension
ui/utilities/display_extension
ui/utilities/size_extension
ui/utilities/spacing_extension
ui/utilities/text_extension