or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons.mdcards.mdcontent.mdfeedback.mdforms.mdindex.mdinteractive.mdlayout.mdmodals.mdnavigation.mdthemes.md
tile.json

tessl/pypi-dash-bootstrap-components

Bootstrap themed components for use in Plotly Dash applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
pypipkg:pypi/dash-bootstrap-components@2.0.x

To install, run

npx @tessl/cli install tessl/pypi-dash-bootstrap-components@2.0.0

index.mddocs/

Dash Bootstrap Components

Bootstrap themed components for use in Plotly Dash applications, enabling developers to create consistently styled, responsive dashboards and web applications. The library combines React.js components built with Bootstrap styling with Python integration through the Dash framework, offering a comprehensive set of UI components for data visualization applications.

Package Information

  • Package Name: dash-bootstrap-components
  • Language: Python
  • Installation: pip install dash-bootstrap-components
  • Conda: conda install -c conda-forge dash-bootstrap-components
  • Dependencies: dash>=3.0.4

Core Imports

import dash_bootstrap_components as dbc

Basic Usage

import dash
import dash_bootstrap_components as dbc
from dash import html

# Create Dash app with Bootstrap theme
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Build layout with Bootstrap components
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1("Dashboard Title", className="text-center mb-4"),
            dbc.Alert("Welcome to your dashboard!", color="info", className="mb-3"),
        ])
    ]),
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Data Summary"),
                dbc.CardBody([
                    html.P("Total Users: 1,234", className="card-text"),
                    dbc.Button("View Details", color="primary"),
                ])
            ])
        ], width=6),
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Quick Actions"),
                dbc.CardBody([
                    dbc.ButtonGroup([
                        dbc.Button("Export", color="success", outline=True),
                        dbc.Button("Import", color="warning", outline=True),
                        dbc.Button("Settings", color="secondary", outline=True),
                    ])
                ])
            ])
        ], width=6),
    ])
])

if __name__ == "__main__":
    app.run_server(debug=True)

Architecture

Dash Bootstrap Components is built around several key concepts:

  • Component Library: 66 React-based UI components that wrap Bootstrap elements for use in Dash applications
  • Theme System: Pre-configured CSS themes from Bootstrap and Bootswatch for consistent styling
  • Python Integration: Seamless integration with Dash's callback system for interactive functionality
  • Responsive Design: Built-in Bootstrap grid system and responsive utilities
  • Icon Support: Integration with Bootstrap Icons and Font Awesome icon libraries

All components follow standard Dash patterns with props for id, children, style, class_name, and component-specific properties.

Capabilities

Layout Components

Essential components for organizing content and creating responsive layouts using Bootstrap's grid system and containers.

class Container:
    def __init__(self, children=None, id=None, style=None, class_name=None, fluid=False, **kwargs): ...

class Row:
    def __init__(self, children=None, id=None, style=None, class_name=None, 
                 align=None, justify=None, **kwargs): ...

class Col:
    def __init__(self, children=None, id=None, style=None, class_name=None, 
                 width=None, xs=None, sm=None, md=None, lg=None, xl=None, xxl=None, **kwargs): ...

class Stack:
    def __init__(self, children=None, id=None, style=None, class_name=None, 
                 direction=None, gap=None, **kwargs): ...

Layout Components

Form Components

Comprehensive form controls including inputs, selections, validation feedback, and form organization components.

class Form:
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

class Input:
    def __init__(self, id=None, value=None, type="text", placeholder=None, 
                 valid=None, invalid=None, plaintext=False, size=None, disabled=False, 
                 readonly=False, n_submit=0, n_blur=0, debounce=False, **kwargs): ...

class Select:
    def __init__(self, id=None, options=None, value=None, placeholder=None,
                 size=None, disabled=False, **kwargs): ...

class Checkbox:
    def __init__(self, id=None, checked=False, disabled=False, label=None, **kwargs): ...

class Switch:
    def __init__(self, id=None, value=False, disabled=False, label=None, **kwargs): ...

Form Components

Navigation Components

Navigation bars, breadcrumbs, tabs, and other navigation elements for creating intuitive user interfaces.

class Navbar:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 brand=None, brand_href=None, color=None, dark=None, light=None,
                 fixed=None, sticky=None, **kwargs): ...

class Nav:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 vertical=False, pills=False, fill=False, justified=False, **kwargs): ...

class Breadcrumb:
    def __init__(self, items=None, id=None, style=None, class_name=None, **kwargs): ...

class Tabs:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 active_tab=None, **kwargs): ...

Navigation Components

Button Components

Interactive buttons and button groups with various styles, sizes, and states.

class Button:
    def __init__(self, children=None, id=None, n_clicks=0, style=None, class_name=None,
                 color="primary", size=None, outline=False, active=False, disabled=False,
                 href=None, target=None, external_link=False, download=None, type=None,
                 name=None, value=None, title=None, rel=None, key=None, **kwargs): ...

class ButtonGroup:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 size=None, vertical=False, **kwargs): ...

Button Components

Card Components

Flexible content containers with headers, bodies, footers, and various styling options.

class Card:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 color=None, outline=False, inverse=False, body=False, **kwargs): ...

class CardHeader:
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

class CardBody:
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

class CardFooter:
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

Card Components

Modal Components

Dialog boxes and modal windows for displaying content overlays and user interactions.

class Modal:
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
                 centered=False, fade=True, backdrop=True, size=None, **kwargs): ...

class ModalHeader:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 close_button=True, **kwargs): ...

class ModalBody:
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

class ModalFooter:
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

Modal Components

Feedback Components

Alerts, badges, progress bars, spinners, and toast notifications for user feedback and status indication.

class Alert:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 color="primary", dismissable=False, is_open=True, **kwargs): ...

class Badge:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 color="primary", pill=False, **kwargs): ...

class Progress:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 value=0, max=100, striped=False, animated=False, color=None, **kwargs): ...

class Spinner:
    def __init__(self, id=None, style=None, class_name=None, size=None,
                 color=None, type="border", **kwargs): ...

Feedback Components

Interactive Components

Dropdowns, collapsible content, tooltips, popovers, and other interactive elements.

class DropdownMenu:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 label="Toggle Dropdown", direction="down", size=None, color="primary", **kwargs): ...

class Collapse:
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None, **kwargs): ...

class Tooltip:
    def __init__(self, children=None, id=None, target=None, placement="top",
                 style=None, class_name=None, **kwargs): ...

class Popover:
    def __init__(self, children=None, id=None, target=None, placement="top",
                 style=None, class_name=None, **kwargs): ...

Interactive Components

Content Components

Tables, accordions, lists, and other content display components.

class Table:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 striped=False, bordered=False, borderless=False, hover=False,
                 dark=False, size=None, responsive=False, **kwargs): ...
    
    @classmethod
    def from_dataframe(cls, df, float_format=None, columns=None, header=True,
                      index=False, index_label=None, date_format=None, **table_kwargs): ...

class Accordion:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 active_item=None, always_open=False, **kwargs): ...

class ListGroup:
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 flush=False, horizontal=False, **kwargs): ...

Content Components

Theme System

Pre-configured CSS themes and icon libraries for consistent application styling.

# Bootstrap base themes
themes.BOOTSTRAP: str  # Standard Bootstrap CSS
themes.GRID: str       # Bootstrap grid-only CSS

# Bootswatch themes (26 available)
themes.CERULEAN: str   # Light blue theme
themes.DARKLY: str     # Dark theme
themes.FLATLY: str     # Flat design theme
themes.BOOTSTRAP: str  # Default Bootstrap theme
# ... and 22 more themes

# Icon libraries
icons.BOOTSTRAP: str    # Bootstrap Icons CSS
icons.FONT_AWESOME: str # Font Awesome CSS

Themes and Icons

Common Props

All components support these standard Dash props:

  • id (string): Component identifier for callbacks
  • children (node): Child components or content
  • style (dict): Inline CSS styles
  • class_name (string): Additional CSS classes
  • key (string): React performance optimization key

Many components also support Bootstrap-specific props:

  • Color variants: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
  • Size variants: "sm", "lg", "xl"
  • State props: outline, active, disabled