### Progress Bar with Interval Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/progress.md

Demonstrates the typical structure for using `Progress` with `dcc.Interval` to update progress dynamically. This example shows the setup without a specific background process.

```python
import dash
import dash_bootstrap_components as dbc
from dash import dcc

app = dash.Dash(__name__)

app.layout = dbc.Container([
    dbc.Progress(id="progress-bar"),
    dcc.Interval(id="interval", interval=200, n_intervals=0),
])


@dash.callback(Output("progress-bar", "value"), Input("interval", "n_intervals"))
def update_progress(n):
    progress = (n * 5) % 100
    return progress

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

--------------------------------

### Install dash-bootstrap-components with pip

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/README.md

Use this command to install the library via pip.

```sh
pip install dash-bootstrap-components
```

--------------------------------

### Simple Nav Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/nav.md

Demonstrates the basic structure of a navigation bar using Nav, NavItem, and NavLink.

```python
import dash_bootstrap_components as dbc

layout = dbc.Nav([
    dbc.NavItem(dbc.NavLink("Active", active=True, href="#"))
])
```

--------------------------------

### Install Dash Bootstrap Components

Source: https://context7.com/dbc-team/dash-bootstrap-components/llms.txt

Install the package using pip or conda. For DataFrame support, install with the pandas extra.

```bash
pip install dash-bootstrap-components
# or
conda install -c conda-forge dash-bootstrap-components
# For Table.from_dataframe support:
pip install "dash-bootstrap-components[pandas]"
```

--------------------------------

### Simple Button Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Demonstrates the basic usage of buttons with different contextual colors.

```python
import dash_bootstrap_components as dbc

buttons = html.Div([
    dbc.Button("Primary", color="primary", className="me-1"),
    dbc.Button("Secondary", color="secondary", className="me-1"),
    dbc.Button("Success", color="success", className="me-1"),
    dbc.Button("Danger", color="danger", className="me-1"),
    dbc.Button("Warning", color="warning", className="me-1"),
    dbc.Button("Info", color="info", className="me-1"),
    dbc.Button("Light", color="light", className="me-1"),
    dbc.Button("Dark", color="dark", className="me-1"),
    dbc.Button("Link", color="link", className="me-1"),
])
```

--------------------------------

### Install and Use Dash Bootstrap Components

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/templates/index.html

Install the library using pip or conda. Then, link a Bootstrap stylesheet and use components like dbc.Alert in your Dash app.

```bash
pip install dash-bootstrap-components
```

```python
import dash
import dash_bootstrap_components as dbc

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run()
```

--------------------------------

### Basic InputGroup Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/input_group.md

Demonstrates how to create a basic InputGroup by wrapping a compatible input component with Button or InputGroupText.

```python
html.Div([
    dbc.InputGroup([
        dbc.InputGroupText("@"),
        dbc.Input(placeholder="username")
    ])
])
```

--------------------------------

### Install and Verify New Version

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/how-to-release.md

After a release is merged, verify that the new version can be installed correctly using pip.

```sh
pip install dash-bootstrap-components==<new version>
```

--------------------------------

### Outline Button Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Demonstrates how to create outline buttons by setting the `outline` prop to `True`. These are more lightweight than default buttons.

```python
import dash_bootstrap_components as dbc

buttons = html.Div([
    dbc.Button("Primary", color="primary", outline=True, className="me-1"),
    dbc.Button("Secondary", color="secondary", outline=True, className="me-1"),
    dbc.Button("Success", color="success", outline=True, className="me-1"),
    dbc.Button("Danger", color="danger", outline=True, className="me-1"),
    dbc.Button("Warning", color="warning", outline=True, className="me-1"),
    dbc.Button("Info", color="info", outline=True, className="me-1"),
    dbc.Button("Light", color="light", outline=True, className="me-1"),
    dbc.Button("Dark", color="dark", outline=True, className="me-1"),
])
```

--------------------------------

### Navbar Customization Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/navbar.md

Illustrates how to use the `Navbar` component for a fully customizable navigation header. This example shows a more complex layout, requiring manual implementation of navigation items and potentially other components like `Container` and `Nav`.

```python
import dash_bootstrap_components as dbc

navbar = dbc.Navbar(
    dbc.Container(
        [            dbc.NavbarBrand("Navbar", href="#"),
            dbc.Nav(
                [dbc.NavItem(dbc.NavLink("Link", href="#"))]
            ),
        ]
    ),
    color="dark",
    dark=True,
)
```

--------------------------------

### Simple Form Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/form.md

A basic example of Bootstrap form components for grouping labels, controls, help text, and validation messages.

```python
import dash_bootstrap_components as dbc

layout = dbc.Form([
    dbc.Label("Email", html_for="example-email"),
    dbc.Input(id="example-email", type="email"),
    dbc.FormText("Your username is your email address", color="secondary"),
])
```

--------------------------------

### Install dash-bootstrap-components with conda

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/README.md

Use this command to install the library via conda from the conda-forge channel.

```sh
conda install -c conda-forge dash-bootstrap-components
```

--------------------------------

### Simple Badge Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/badge.md

Demonstrates the basic usage of the Badge component. This is useful for displaying counts or status indicators.

```python
import dash_bootstrap_components as dbc

badge = dbc.Badge("New", color="primary", className="me-1")
```

--------------------------------

### Multiple Collapse Targets Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/collapse.md

This example demonstrates advanced control over multiple collapse components. A single button can toggle several collapses, or multiple buttons can control a single collapse, showcasing flexible callback implementations.

```python
import dash
from dash import html, dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button(
        "Toggle All", id="collapse-all-button", className="mb-3", n_clicks=0
    ),
    html.Div(
        [
            html.P("Content 1"),
            html.P("Content 2"),
            html.P("Content 3"),
        ],
        id="collapse-all",
        className="collapse show",
    ),
    html.Hr(),
    html.Button("Toggle 1", id="collapse-1-button", className="mb-3", n_clicks=0),
    html.Button("Toggle 2", id="collapse-2-button", className="mb-3", n_clicks=0),
    html.Div(
        [html.P("This is content 1.")],
        id="collapse-1",
        className="collapse show",
    ),
    html.Div(
        [html.P("This is content 2.")],
        id="collapse-2",
        className="collapse show",
    ),
])


@app.callback(
    Output("collapse-all", "className"),
    Input("collapse-all-button", "n_clicks"),
)
def toggle_all_collapse(n, is_open):
    if n:
        return "collapse show" if is_open else "collapse"
    return "collapse show"


@app.callback(
    Output("collapse-1", "className"),
    Input("collapse-1-button", "n_clicks"),
)
def toggle_collapse_1(n, is_open):
    if n:
        return "collapse show" if is_open else "collapse"
    return "collapse show"


@app.callback(
    Output("collapse-2", "className"),
    Input("collapse-2-button", "n_clicks"),
)
def toggle_collapse_2(n, is_open):
    if n:
        return "collapse show" if is_open else "collapse"
    return "collapse show"


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

--------------------------------

### Basic Fade Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/fade.md

Use the `Fade` component to show and hide content. Set `is_in=True` to display and `is_in=False` to hide. This example uses a button click to toggle the `is_in` prop.

```python
import dash
from dash import html

from dash_bootstrap_components import Fade

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button("Toggle Fade", id="toggle-fade", n_clicks=0),
    Fade(
        [html.P("This content will fade in and out.")],
        id="fade",
        is_in=False,
        appear=False,
    ),
])


@app.callback(
    Output("fade", "is_in"),
    [Input("toggle-fade", "n_clicks")],
    [State("fade", "is_in")],
)
def toggle_fade(n, is_in):
    if not n:
        return False
    return not is_in


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

--------------------------------

### Create Navbar and NavbarSimple in Dash Bootstrap

Source: https://context7.com/dbc-team/dash-bootstrap-components/llms.txt

Provides examples for creating responsive navigation headers using NavbarSimple for standard layouts and Navbar for custom designs.

```python
import dash_bootstrap_components as dbc
from dash import Input, Output, State

```

--------------------------------

### Simple DropdownMenu

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/dropdown.md

Creates a basic dropdown menu with three items. No specific setup is required beyond importing the component.

```python
import dash_bootstrap_components as dbc

dropdown = dbc.DropdownMenu(
    children=[
        dbc.DropdownMenuItem("Item 1", href="#"),
        dbc.DropdownMenuItem("Item 2", href="#"),
        dbc.DropdownMenuItem(divider=True),
        dbc.DropdownMenuItem("Item 3", href="#"),
    ],
    label="Dropdown",
    color="primary",
    className="dropdown",
)
```

--------------------------------

### NavbarSimple Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/navbar.md

Demonstrates the usage of `NavbarSimple` for creating a responsive navigation bar with a brand link and navigation items. This component automatically collapses on smaller screens and includes a toggle.

```python
import dash_bootstrap_components as dbc

navbar = dbc.NavbarSimple(
    dbc.Nav(
        [dbc.NavItem(dbc.NavLink("Link", href="#"))]
    ),
    brand="NavbarSimple",
    brand_href="#",
    color="dark",
    dark=True,
)
```

--------------------------------

### Build Basic Dash Layout with Bootstrap Container and Alert

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/content/docs/quickstart.md

Create a simple Dash layout using dbc.Container and dbc.Alert. Ensure the app is initialized with an external stylesheet as shown in the previous example.

```python
import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Alert("Hello Bootstrap!", color="success"),
    className="p-5",
)

if __name__ == "__main__":
    app.run()
```

--------------------------------

### Button Size Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Illustrates how to adjust button size using the `size` prop. Set to `"sm"` for small or `"lg"` for large buttons.

```python
import dash_bootstrap_components as dbc

buttons = html.Div([
    dbc.Button("Small button", size="sm", color="primary", className="me-1"),
    dbc.Button("Default button", color="primary", className="me-1"),
    dbc.Button("Large button", size="lg", color="primary", className="me-1"),
])
```

--------------------------------

### Basic Tooltip Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/tooltip.md

Add a Tooltip component to your layout and specify the ID of the target component. The tooltip will appear on hover.

```python
html.Div([
    html.Span("Hover over me", id="hover-target"),
    dbc.Tooltip("This is a tooltip!", target="hover-target"),
])
```

--------------------------------

### Create Release Candidate

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/how-to-release.md

Use this command to start the prerelease process for a new version. It automatically bumps version numbers and pushes a release branch.

```sh
just prerelease <version>
```

--------------------------------

### Simple Badge Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/index.md

This snippet demonstrates a basic usage of the Badge component. It requires additional boilerplate code to run as a complete Dash application, including Dash imports, app instantiation with a Bootstrap stylesheet, layout definition, and server startup.

```python
dbc.Badge("New", color="primary", className="me-1")
```

--------------------------------

### Basic Offcanvas Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/offcanvas.md

Demonstrates a simple Offcanvas component. Set the `is_open` prop to `True` to open it. By default, it can be dismissed by clicking the close button, outside the offcanvas, or by pressing escape.

```python
import dash_bootstrap_components as dbc


offcanvas = html.Div([
    dbc.Button("Open basic offcanvas", id="open-offcanvas", n_clicks=0),
    dbc.Offcanvas(
        html.P("This is the content of the offcanvas"),
        id="offcanvas",
        title="Offcanvas Title",
        is_open=True,  # Initially open
    ),
])


@app.callback(
    Output("offcanvas", "is_open"),
    Input("open-offcanvas", "n_clicks"),
    State("offcanvas", "is_open"),
)
def toggle_offcanvas(n1, is_open):
    if n1:
        return not is_open
    return is_open

```

--------------------------------

### Block Button Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Creates a full-width block level button using Bootstrap's spacing utility classes.

```python
import dash_bootstrap_components as dbc

button = dbc.Button("Block button", color="primary", className="d-grid gap-2")
```

--------------------------------

### Callback-driven Tab Content

Source: https://context7.com/dbc-team/dash-bootstrap-components/llms.txt

This example demonstrates how to dynamically update content based on the active tab using a Dash callback. It requires `dash_bootstrap_components` and `dash` libraries.

```python
import dash_bootstrap_components as dbc
from dash import Input, Output, html


tabs_with_callback = html.Div([
    dbc.Tabs([
        dbc.Tab(label="Tab A", tab_id="a"),
        dbc.Tab(label="Tab B", tab_id="b"),
    ], id="card-tabs", active_tab="a"),
    html.Div(id="card-content"),
])

@app.callback(
    Output("card-content", "children"),
    Input("card-tabs", "active_tab"),
)
def switch_tab(active_tab):
    return f"You are on {active_tab}"
```

--------------------------------

### Responsive Block Button Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Creates a responsive block button that spans full width on small screens and adjusts behavior on larger screens using breakpoint classes like `d-md-block`.

```python
import dash_bootstrap_components as dbc

button = dbc.Button("Responsive Button", color="primary", className="d-grid gap-2 d-md-block")
```

--------------------------------

### Basic Collapse Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/collapse.md

Use this snippet to create a basic collapsible content area. Control visibility by toggling the `is_open` prop, typically via a button click.

```python
import dash
from dash import html, dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button(
        "Toggle", id="collapse-button", className="mb-3", n_clicks=0
    ),
    html.Div(
        [html.P("This content is collapsible!")],
        id="collapse",
        className="collapse show",
    ),
])


@app.callback(
    Output("collapse", "className"),
    Input("collapse-button", "n_clicks"),
)
def toggle_collapse(n, is_open):
    if n:
        return "collapse show" if is_open else "collapse"
    return "collapse show"


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

--------------------------------

### Simple Jumbotron Layout

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/jumbotron.md

Create a basic jumbotron-like layout using Bootstrap's utility classes. This example shows a straightforward implementation.

```python
import dash_bootstrap_components as dbc

jumbotron = dbc.Container(
    dbc.Row(
        dbc.Col(
            [
                html.H1("Welcome to", className="display-3"),
                html.P(
                    "This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.",
                    className="lead",
                ),
                dbc.Button("Learn more", color="primary", size="lg"),
            ],
            className="py-5",
        )
    )
)
```

--------------------------------

### Simple Popover Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/popover.md

Attach a basic popover to a component by setting the `target` property to the component's `id`. Content can be provided directly or using `PopoverBody`.

```python
import dash_bootstrap_components as dbc

layout = html.Div([
    dbc.Button("Click me", id="popover-target", n_clicks=0),
    dbc.Popover(
        dbc.PopoverBody("This is the popover content!"),
        target="popover-target",
    ),
])
```

--------------------------------

### Card Sizing with Grid Components

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/card.md

Controls card width and layout by wrapping them in `Row` and `Col` components. This example uses `Col`'s `width` argument to define fractional widths.

```python
import dash_bootstrap_components as dbc

layout = dbc.Row(
    [
        dbc.Col(dbc.Card("A simple card", body=True), width=4),
        dbc.Col(dbc.Card("A simple card", body=True), width=8),
    ]
)
```

--------------------------------

### Color Picker Input with Clientside Callback

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/input.md

Utilize the Input component with type='color' for a color picker. This example demonstrates a clientside callback for efficient, real-time color updates directly in the browser.

```python
app.layout = html.Div([
    dbc.Label("Color Picker"),
    dbc.Input(type="color", value="#007bff", id="color-picker-example", style={"width": "100px"}),
    html.Div(id="color-picker-output", className="mt-3"),
])

# Regular Dash callback (commented out)
# @app.callback(
#     Output("color-picker-output", "children"),
#     Input("color-picker-example", "value"),
# )
# def update_output(value):
#     return f"You have selected {value}"

# Clientside callback example
app.clientside_callback(
    """function(value) {
        return `You have selected ${value}`;
    }""",
    Output("color-picker-output", "children"),
    Input("color-picker-example", "value"),
)
```

--------------------------------

### Simple Breadcrumb Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/breadcrumb.md

Create a basic breadcrumb with a list of items. Each item requires a `label` and can optionally have an `href` for linking, `external_link` to control link behavior, and an `active` state.

```python
import dash_bootstrap_components as dbc

layout = [
    dbc.Breadcrumb(items=[
        {"label": "Page 1", "href": "#page-1"},
        {"label": "Page 2", "href": "#page-2"},
        {"label": "Page 3", "active": True, "href": "#page-3"}
    ])
]
```

--------------------------------

### Integrating Snippets into a Dash App

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/index.md

This example shows how to incorporate a component snippet into a functional Dash application. It includes the necessary boilerplate for a minimal Dash app, such as importing Dash, creating an app instance with a stylesheet, and defining the layout.

```python
import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Alert("This is a basic app.", color="info"),
    dbc.Badge("New", color="primary", className="me-1")
])

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

--------------------------------

### Initialize Dash App with Bootstrap Themes

Source: https://context7.com/dbc-team/dash-bootstrap-components/llms.txt

Initialize a Dash app and link a Bootstrap stylesheet using `dbc.themes`. Available themes include standard Bootstrap and various Bootswatch themes.

```python
import dash
import dash_bootstrap_components as dbc

# Standard Bootstrap
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# Dark Bootswatch theme
app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])

# Multiple stylesheets (theme + icons)
app = dash.Dash(
    external_stylesheets=[dbc.themes.FLATLY, dbc.icons.BOOTSTRAP]
)

# Available theme constants:
# dbc.themes.BOOTSTRAP, CERULEAN, COSMO, CYBORG, DARKLY, FLATLY,
# JOURNAL, LITERA, LUMEN, LUX, MATERIA, MINTY, MORPH, PULSE, QUARTZ,
# SANDSTONE, SIMPLEX, SKETCHY, SLATE, SOLAR, SPACELAB, SUPERHERO,
# UNITED, VAPOR, YETI, ZEPHYR

app.layout = dbc.Container(
    dbc.Alert("Hello Bootstrap!", color="success"),
    className="p-5",
)

if __name__ == "__main__":
    app.run()
```

--------------------------------

### Create a Simple Responsive Navbar

Source: https://context7.com/dbc-team/dash-bootstrap-components/llms.txt

Use `dbc.NavbarSimple` for a basic responsive navigation bar with a brand, links, and a dropdown menu. Set `expand` to a breakpoint like 'lg' to control when the navbar collapses.

```python
import dash_bootstrap_components as dbc

navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="/page-1")),
        dbc.NavItem(dbc.NavLink("Page 2", href="/page-2")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("More pages", header=True),
                dbc.DropdownMenuItem("Page 3", href="/page-3"),
                dbc.DropdownMenuItem(divider=True),
                dbc.DropdownMenuItem("Page 4", href="/page-4"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="My App",
    brand_href="/",
    color="primary",
    dark=True,
    expand="lg",  # collapse below lg breakpoint
)
```

--------------------------------

### Basic Placeholder Usage

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/placeholder.md

Demonstrates the basic usage of the Placeholder component, which renders a colored rectangle. Use `button=True` to style it as a button.

```python
import dash_bootstrap_components as dbc

placeholder = dbc.Placeholder(
    size=None,  # None by default
    color=None,  # None by default
    xs=None,  # None by default
    sm=None,  # None by default
    lg=None,  # None by default
    xl=None,  # None by default
    animation=None,  # None by default
    color_scheme=None,  # None by default
    button=False,  # False by default
    id="placeholder",
    children="Content",
)
```

--------------------------------

### Accordion Start Collapsed

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/accordion.md

Control which item is active on initial load using `active_item`. Set `start_collapsed=True` to have no items open by default.

```python
import dash_bootstrap_components as dbc

accordion = dbc.Accordion([
    dbc.AccordionItem("This is the first item's content", title="Item 1"),
    dbc.AccordionItem("This is the second item's content", title="Item 2"),
], active_item="item-1", start_collapsed=True)
```

--------------------------------

### Table from Pandas DataFrame

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/table.md

Generate a `dbc.Table` component directly from a Pandas DataFrame using the `from_dataframe` static method. Ensure Pandas is installed.

```python
import dash_bootstrap_components as dbc
import pandas as pd

df = pd.DataFrame({
    "Column A": [1, 2, 3],
    "Column B": [4, 5, 6],
    "Column C": [7, 8, 9],
})

table = dbc.Table.from_dataframe(df, striped=True, bordered=True, hover=True)
```

--------------------------------

### Smaller Block Button Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Adjusts the width of a block button using grid column classes like `.col-6` and centers it with `.mx-auto`.

```python
import dash_bootstrap_components as dbc

button = dbc.Button("Half-width button", color="primary", className="w-50 p-2 mx-auto")
```

--------------------------------

### Flex Layout for Buttons

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Utilizes flex and margin utilities to control the alignment and layout of buttons, especially in conjunction with responsive block button examples.

```python
import dash_bootstrap_components as dbc

layout = dbc.Row([
    dbc.Col(dbc.Button("Button 1", color="primary"), width=6),
    dbc.Col(dbc.Button("Button 2", color="secondary"), width=6),
], className="d-flex justify-content-md-center mt-3")
```

--------------------------------

### Offcanvas Placement

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/offcanvas.md

Control the position of the Offcanvas component using the `placement` property. Options include 'start' (left), 'end' (right), 'top', and 'bottom'.

```python
import dash_bootstrap_components as dbc


offcanvas = html.Div([
    dbc.Button("Open offcanvas left", id="open-offcanvas-start", n_clicks=0),
    dbc.Button("Open offcanvas right", id="open-offcanvas-end", n_clicks=0),
    dbc.Button("Open offcanvas top", id="open-offcanvas-top", n_clicks=0),
    dbc.Button("Open offcanvas bottom", id="open-offcanvas-bottom", n_clicks=0),
    dbc.Offcanvas(
        html.P("This is the content of the offcanvas"),
        id="offcanvas-start",
        title="Offcanvas Title",
        placement="start",
        is_open=True,
    ),
    dbc.Offcanvas(
        html.P("This is the content of the offcanvas"),
        id="offcanvas-end",
        title="Offcanvas Title",
        placement="end",
        is_open=True,
    ),
    dbc.Offcanvas(
        html.P("This is the content of the offcanvas"),
        id="offcanvas-top",
        title="Offcanvas Title",
        placement="top",
        is_open=True,
    ),
    dbc.Offcanvas(
        html.P("This is the content of the offcanvas"),
        id="offcanvas-bottom",
        title="Offcanvas Title",
        placement="bottom",
        is_open=True,
    ),
])


@app.callback(
    Output("offcanvas-start", "is_open"),
    Input("open-offcanvas-start", "n_clicks"),
    State("offcanvas-start", "is_open"),
)
def toggle_offcanvas_start(n1, is_open):
    return not is_open if n1 else is_open


@app.callback(
    Output("offcanvas-end", "is_open"),
    Input("open-offcanvas-end", "n_clicks"),
    State("offcanvas-end", "is_open"),
)
def toggle_offcanvas_end(n1, is_open):
    return not is_open if n1 else is_open


@app.callback(
    Output("offcanvas-top", "is_open"),
    Input("open-offcanvas-top", "n_clicks"),
    State("offcanvas-top", "is_open"),
)
def toggle_offcanvas_top(n1, is_open):
    return not is_open if n1 else is_open


@app.callback(
    Output("offcanvas-bottom", "is_open"),
    Input("open-offcanvas-bottom", "n_clicks"),
    State("offcanvas-bottom", "is_open"),
)
def toggle_offcanvas_bottom(n1, is_open):
    return not is_open if n1 else is_open

```

--------------------------------

### Update and Deploy Documentation

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/how-to-release.md

Execute this command to deploy the latest documentation changes to the Heroku-hosted site.

```sh
just deploy-docs
```

--------------------------------

### Basic Modal Usage

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/modal.md

Demonstrates the fundamental structure of a modal using Modal, ModalHeader, ModalTitle, ModalBody, and ModalFooter components. Control visibility with the `is_open` prop.

```python
def modal():
    return html.Div([
        dbc.Button("Open modal", id="open", n_clicks=0),
        dbc.Modal(
            [dbc.ModalHeader(dbc.ModalTitle("This is a basic modal")), dbc.ModalBody("This is the modal body"), dbc.ModalFooter(dbc.Button("Close", id="close", className="ms-auto"))],
            id="modal",
            is_open=False,
        ),
    ])


@app.callback(Output("modal", "is_open"), [Input("open", "n_clicks"), Input("close", "n_clicks")], [State("modal", "is_open")])
def toggle_modal(n1, n2, is_open):
    return not is_open
```

--------------------------------

### Simple Tabs Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/tabs.md

Use the `Tabs` component by passing `Tab` components as children. Specify labels with the `label` argument and disable tabs with the `disabled` argument.

```python
import dash_bootstrap_components as dbc

layout = dbc.Tabs(
    [dbc.Tab(label="Tab 1", children=html.P("This is tab 1 content")),
     dbc.Tab(label="Tab 2", children=html.P("This is tab 2 content")),]
)
```

--------------------------------

### Initialize Dash App with Bootstrap Theme and Font Awesome

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/content/docs/themes.md

Initialize your Dash application with the Bootstrap theme and Font Awesome icons. This sets up the basic styling and icon support for your app.

```python
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])
```

--------------------------------

### DropdownMenu Direction

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/dropdown.md

Determines the rendering direction of the dropdown menu relative to the toggle using the `direction` argument. Options include 'up', 'down' (default), 'start', and 'end'.

```python
import dash_bootstrap_components as dbc

dropdown_up = dbc.DropdownMenu(
    label="Dropdown Up",
    direction="up",
    children=[
        dbc.DropdownMenuItem("Item 1", href="#"),
        dbc.DropdownMenuItem("Item 2", href="#"),
    ],
    color="primary",
    className="dropdown",
)

dropdown_down = dbc.DropdownMenu(
    label="Dropdown Down",
    direction="down",
    children=[
        dbc.DropdownMenuItem("Item 1", href="#"),
        dbc.DropdownMenuItem("Item 2", href="#"),
    ],
    color="primary",
    className="dropdown",
)

dropdown_start = dbc.DropdownMenu(
    label="Dropdown Start",
    direction="start",
    children=[
        dbc.DropdownMenuItem("Item 1", href="#"),
        dbc.DropdownMenuItem("Item 2", href="#"),
    ],
    color="primary",
    className="dropdown",
)

dropdown_end = dbc.DropdownMenu(
    label="Dropdown End",
    direction="end",
    children=[
        dbc.DropdownMenuItem("Item 1", href="#"),
        dbc.DropdownMenuItem("Item 2", href="#"),
    ],
    color="primary",
    className="dropdown",
)
```

--------------------------------

### Create and Style Cards in Dash Bootstrap

Source: https://context7.com/dbc-team/dash-bootstrap-components/llms.txt

Illustrates card creation with images, bodies, headers, footers, color variants, outline styles, and horizontal layouts.

```python
import dash_bootstrap_components as dbc
from dash import html

# Basic card with image, body, and button
card = dbc.Card([
    dbc.CardImg(src="/assets/placeholder.png", top=True),
    dbc.CardBody([
        html.H4("Card Title", className="card-title"),
        html.P("Some quick example text.", className="card-text"),
        dbc.Button("Go somewhere", color="primary"),
    ]),
], style={"width": "18rem"})

# Card with header and footer
card_with_header = dbc.Card([
    dbc.CardHeader("Header"),
    dbc.CardBody([
        html.H4("Card Title"),
        html.P("Card content here."),
    ]),
    dbc.CardFooter("Footer"),
], color="primary", inverse=True)

# Outline card
outline_card = dbc.Card(
    dbc.CardBody("An outlined card."),
    color="success",
    outline=True,
)

# Horizontal card layout using grid
horizontal_card = dbc.Card(
    dbc.Row([
        dbc.Col(dbc.CardImg(src="/assets/img.png", className="img-fluid"), md=4),
        dbc.Col(dbc.CardBody([
            html.H5("Card title"),
            html.P("This is a wider card with supporting text."),
        ]), md=8),
    ]),
    className="mb-3",
)

```

--------------------------------

### Styling Tabs with CSS Classes

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/tabs.md

Apply custom styles to tabs and labels using `tab_style`, `label_style`, `tabClassName`, or `labelClassName`. This example uses Bootstrap classes `ms-auto` and `text-success`.

```python
import dash_bootstrap_components as dbc
from dash import html

layout = dbc.Tabs(
    [
        dbc.Tab(
            html.P("This is tab 1 content"),
            label="Tab 1",
            tab_id="tab-1",
            active_label_style={"fontWeight": "bold"},
            label_style={"color": "blue"},
            tab_style={"padding": "1rem"},
        ),
        dbc.Tab(
            html.P("This is tab 2 content"),
            label="Tab 2",
            tab_id="tab-2",
            active_label_style={"fontWeight": "bold"},
            label_style={"color": "red"},
            tab_style={"padding": "1rem"},
            disabled=True,
        ),
        dbc.Tab(
            html.P("This is tab 3 content"),
            label="Tab 3",
            tab_id="tab-3",
            active_label_style={"fontWeight": "bold"},
            label_style={"color": "green"},
            tab_style={"padding": "1rem"},
            tabClassName="ms-auto",
            labelClassName="text-success",
        ),
    ]
)

```

--------------------------------

### Simple Table

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/table.md

Create a basic HTML table with Bootstrap styling using `dbc.Table` and standard HTML elements like `html.Thead`, `html.Tbody`, `html.Tr`, and `html.Td`.

```python
import dash_bootstrap_components as dbc
import dash_html_components as html

table = html.Table([
    html.Thead(
        html.Tr([
            html.Th("Column 1"), html.Th("Column 2")
        ])
    ),
    html.Tbody([
        html.Tr([
            html.Td("Row 1, Cell 1"), html.Td("Row 1, Cell 2")
        ]),
        html.Tr([
            html.Td("Row 2, Cell 1"), html.Td("Row 2, Cell 2")
        ]),
    ]),
])
```

--------------------------------

### Create and Manage Alerts in Dash Bootstrap

Source: https://context7.com/dbc-team/dash-bootstrap-components/llms.txt

Demonstrates static, dismissable, auto-dismissing, and rich-content alerts. Includes a callback to toggle alert visibility.

```python
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html

layout = html.Div([
    # Static colored alerts
    dbc.Alert("This is a success alert!", color="success"),
    dbc.Alert("This is a danger alert!", color="danger"),
    dbc.Alert("This is an info alert!", color="info"),

    # Dismissable alert with fade
    dbc.Alert(
        "Click the × to dismiss me.",
        id="dismissable-alert",
        color="warning",
        dismissable=True,
        fade=True,
        is_open=True,
    ),

    # Auto-dismissing alert (disappears after 3 seconds)
    dbc.Alert(
        "I will disappear in 3 seconds.",
        color="primary",
        duration=3000,
        is_open=True,
    ),

    # Alert with rich content
    dbc.Alert([
        html.H4("Well done!", className="alert-heading"),
        html.P("You successfully read this important alert message."),
        html.Hr(),
        html.P("Whenever you need to, be sure to use margin utilities "
               "to keep things nice and tidy.", className="mb-0"),
    ], color="success"),

    # Button to re-open alert via callback
    dbc.Button("Show alert", id="alert-toggle-btn", n_clicks=0),
])

@app.callback(
    Output("dismissable-alert", "is_open"),
    Input("alert-toggle-btn", "n_clicks"),
    State("dismissable-alert", "is_open"),
)
def toggle_alert(n, is_open):
    if n:
        return not is_open
    return is_open

```

--------------------------------

### Horizontal Collapse Example

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/collapse.md

To achieve a horizontal collapse animation, set the `dimension` prop to `'width'`. Ensure that the content within the collapse component has defined dimensions for proper display.

```python
import dash
from dash import html, dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button(
        "Toggle", id="collapse-button", className="mb-3", n_clicks=0
    ),
    html.Div(
        [
            html.P("This content is collapsible!"),
            html.P("It has a defined width."),
        ],
        id="collapse",
        style={
            "width": "300px",
            "transition": "height 0.35s ease",
            "background-color": "#f0f0f0",
        },
        className="collapse",
    ),
])


@app.callback(
    Output("collapse", "className"),
    Input("collapse-button", "n_clicks"),
)
def toggle_collapse(n, is_open):
    if n:
        return "collapse show" if is_open else "collapse"
    return "collapse show"


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

--------------------------------

### Placeholder Animation

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/placeholder.md

Shows how to apply animations to Placeholders using the `animation` prop with values `glow` or `wave` to enhance the perception of active loading.

```python
import dash_bootstrap_components as dbc

placeholder = dbc.Placeholder(
    size=None,  # None by default
    color=None,  # None by default
    xs=None,  # None by default
    sm=None,  # None by default
    lg=None,  # None by default
    xl=None,  # None by default
    animation="wave",  # None by default
    color_scheme=None,  # None by default
    button=False,  # False by default
    id="placeholder",
    children="Content",
)
```

--------------------------------

### Horizontal Alignment: Fill and Justified

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/nav.md

Demonstrates how to use `fill=True` to make nav items fill available horizontal space, and `justified=True` for equal width items.

```python
import dash_bootstrap_components as dbc

layout = dbc.Nav([
    dbc.NavLink("Link", href="#"),
    dbc.NavLink("Link", href="#"),
    dbc.NavLink("Link", href="#"),
], fill=True, justified=True)
```

--------------------------------

### Button Usage with Callbacks

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/components_page/components/button.md

Shows how to use the `n_clicks` prop of a button as an input for Dash callbacks to trigger actions.

```python
import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=dbc.themes.BOOTSTRAP)

button = dbc.Button("Click me", id="button", n_clicks=0)
output = html.Div(id="output")

@app.callback(Output("output", "children"), Input("button", "n_clicks"))
def update_output(n_clicks):
    return f"Button clicked {n_clicks} times."

app.layout = html.Div([button, output])

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

--------------------------------

### Define theme_demo Macro

Source: https://github.com/dbc-team/dash-bootstrap-components/blob/main/docs/templates/macros/theme-demo.html

Defines a Jinja macro named `theme_demo` that accepts an optional theme name. It renders a basic navigation bar and displays the selected theme's name.

```html
{% macro theme_demo(theme_name="Bootstrap") %}

[Navbar](#)

*   [Home(current)](#)
*   [Link](#)
*   [Dropdown](#)
    
    [Action](#) [Another action](#)
    
    [Something else here](#)
    
*   [Disabled](#)

{{ theme_name }}
-----------------

The {{ theme_name }} style.

Primary Success Warning Danger

{% endmacro %}
```