Quickstart
Installation instructions and basic usage.
Installation
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
Anaconda
You can also install dash-bootstrap-components with conda
through the
conda-forge channel:
conda install -c conda-forge dash-bootstrap-components
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 the r-release
branch of our GitHub repository.
library(devtools)
install_github('facultyai/dash-bootstrap-components@r-release')
The r-release
branch will always point to the latest R release. If you want a specific version you can install it by referencing with a tag of the form rX.X.X
where X.X.X
is the desired version number. For example to install version 0.10.0
you could do
library(devtools)
install_github('facultyai/dash-bootstrap-components@r0.10.0')
To get started make sure you have installed Dash.jl. You can then install DashBootstrapComponents
as follows
pkg> add DashBootstrapComponents
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="julia-release",
))
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 v5 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 v5 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, CDN links to JSDelivr 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)
Once you have imported dash-bootstrap-components with using DashBootstrapComponents
, you can access CDN links through the dbc_themes
named tuple.
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.