Dash Bootstrap Templates

screenshot of Dash Bootstrap Templates
bootstrap

Dash Bootstrap Templates

A collection of 52 Plotly figure templates with a Bootstrap theme. Two theme switch components. Stylesheet to apply Bootstrap themes to Plotly Dash components.

Overview:

Dash Bootstrap Templates is a library that provides Bootstrap themed Plotly figure templates for Dash applications. It includes 26 different Bootstrap/Bootswatch themes and allows for easy styling of figures with theme colors and fonts. The library also includes two All-in-One components for changing themes in a Dash app.

Features:

  • Bootstrap Themed Plotly Figure Templates: Automatically style your figures with Bootstrap theme colors and fonts.
  • ThemeSwitchAIO: Toggle between two themes in a Dash app.
  • ThemeChangerAIO: Select from multiple themes in a Dash app.
  • dbc.css Stylesheet: Style Dash Core Components and Dash DataTable with a Bootstrap theme.

Installation:

To use Dash Bootstrap Templates, follow these steps:

  1. Install Dash Bootstrap Components >= V1.0.0: pip install dash-bootstrap-components>=V1.0.0
  2. Add the dbc.css stylesheet to your app:
    external_stylesheets = [
        'https://your-cdn.com/bootstrap.min.css',
        'https://your-cdn.com/dbc.css'
    ]
    app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
    
  3. Use the className="dbc" attribute in the outer container or component of your app to style Dash components with Bootstrap theme:
    app.layout = html.Div(className="dbc", children=[
        # your app layout here
    ])
    

Summary:

Dash Bootstrap Templates is a useful library for styling Dash applications with Bootstrap themes. It provides Plotly figure templates, theme-switching components, and a stylesheet to style Dash Core Components and DataTables. By using this library, users can easily enhance the visual appearance of their Dash apps and achieve a cohesive Bootstrap theme.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.