Quickstart

Installation instructions and basic usage.

Installation

Warning! - These instructions are for installation of legacy versions of dash-bootstrap-components. Please consider updating to the latest stable release.

dash-bootstrap-components can be used with Dash in Python, R or Julia.

PyPI

You can install dash-bootstrap-components with pip:

pip install "dash-bootstrap-components<1"

Anaconda

You can also install dash-bootstrap-components with conda through the conda-forge channel:

conda install -c conda-forge "dash-bootstrap-components<1"

To get started make sure you have installed Dash for R. If you didn't already install it in order to install Dash for R, we also need to make sure that the devtools library is installed.

install.packages("devtools")

You can then install dash-bootstrap-components from our GitHub repository.

library(devtools)
install_github('facultyai/dash-bootstrap-components@r0.13.1')

To get started make sure you have installed Dash.jl. You can then install DashBootstrapComponents as follows

pkg> add DashBootstrapComponents@0.13.1

Or alternatively you can install from source as follows

julia> using Pkg;
julia> Pkg.add(PackageSpec(
           url="https://github.com/facultyai/dash-bootstrap-components",
           rev="jl-0.13.1",
       ))

Basic usage

dash-bootstrap-components is a component library for use with Plotly Dash. If you have not used Dash before, it's strongly recommended you check out the Dash documentation and try building a basic app first.

To use dash-bootstrap-components you must do two things:

Link a Bootstrap v4 compatible stylesheet
Incorporate dash-bootstrap-components into the layout of your app.

Linking a stylesheet

dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.

For convenience, links to BootstrapCDN for standard Bootstrap and each Bootswatch theme are available as part of dash-bootstrap-components and can be used as follows

In Python, each CDN link is available within the dbc.themes submodule and can be used when instantiating the app object.

import dash
import dash_bootstrap_components as dbc

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

Once you have imported dash-bootstrap-components with library(dashBootstrapComponents), the dbcThemes list will be loaded into your global namespace and can be used when instantiating the app object.

library(dash)
library(dashBootstrapComponents)

app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP)

using Dash, DashBootstrapComponents

app = dash(external_stylesheets=[dbc_themes.BOOTSTRAP])

For more information on available themes see the themes documentation

Build the layout

With CSS linked, you can start building your app's layout with our Bootstrap components. See the component documentation for a full list of available components, or try running this minimal example to get started.

This is a minimal Dash app written in 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_server()

This is a minimal Dash app written in R.

library(dash)
library(dashBootstrapComponents)

app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP)

app$layout(dbcContainer(dbcAlert("Hello Bootstrap!", color = "success"),
                        className = "p-5"))

app$run_server(showcase = TRUE)

This is a minimal Dash app written in Julia.

using Dash, DashBootstrapComponents

app = dash(external_stylesheets=[dbc_themes.BOOTSTRAP])

app.layout = dbc_container(
    dbc_alert("Hello Bootstrap!", color="success"),
    className="p-5",
)

run_server(app, "0.0.0.0", 8080)

Examples

Check out these example apps made with dash-bootstrap-components.