Description of the “Dash_bootstrap” project…
Bootstrap
Bootstrap can be used to style the page using the third-party Dash Bootstrap Components package.
dash-bootstrap-components is a component library for use with Plotly Dash.
To use it you must link a Bootstrap v4 compatible stylesheet and incorporate dash-bootstrap-components into the layout of the app.
Links to BootstrapCDN can be used as follows:
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
The full list of available themes is CERULEAN, COSMO, CYBORG, DARKLY, FLATLY, JOURNAL, LITERA, LUMEN, LUX, MATERIA, MINTY, PULSE, SANDSTONE, SIMPLEX, SKETCHY, SLATE, SOLAR, SPACELAB, SUPERHERO, UNITED, YETI.
There is even an theme explorer for a live demo of dash-bootstrap-components using all of the different available themes.
Simply changing the dbc.themes name can change the look of the app instantly.
Bootstrap’s grid system is also available for responding to different sized screens.
The docs list the various bootstrap components that can be used and how to use them in a Dash app.
Tabs
tabs = dbc.Tabs(
[
dbc.Tab(tab1_content, label="Tab 1"),
dbc.Tab(tab2_content, label="Tab 2"),
dbc.Tab(
"This tab's content is never seen", label="Tab 3", disabled=True
),
]
)
Benefits of using Bootstrap
-
Dash Bootstrap Components had a set of themes you can use
-
Bootstrap has a powerful grid system of rows and columns. Therefore you can design the pages more from a user perspective instead on focussing on the screen attributes of pixels and percentages.
-
Responsiveness. Bootstrap handles the various screen sizes that are available. You can finetune behaviour of page elements to control how their sizes changes as the screen size changes.
Every item added to the children parameter of the main html.Div element takes up the full width of the screen and as much screen height as required to display it’s content. The order of the elements in the list also determines the order of the display on the screen.
Bootstrap can be used to define a column which acts as an independent screen, elements will be displayed on top of each other with each element occupying the full width of this mini-screen.
Column widths can be defined in very flexible ways. The grid system divides the screen into 12 columns, a column width can be specified with a number between 1 and 12 inclusive and this allows automatic resizing of the columns while the proportions. Sometimes it might be better to expand the column on smaller screens to make it easier to read. There are 5 possible screen widths :xs for extra small, s for small, md for medium, lg for large and xl for extra large. You can specify the widths of the columns to be different for the different screen sizes.
Col lg = 4, md =12 means that the column takes 4 of the 12 grid columns (1/3) on large screens and 12 of the 12 columns on a medium sized screen.
An offset can also be specified so that the content will start from a specified number of columns from the left. A python dictionary is used for this purpose.
lg ={'size': 6, 'offset' : 4} will shift the content 4 columns from the left on large screens.
Row is used to placed multiple columns next to each other.
`dbc.Row([
dbc.Col(), dbc.Col()
])
- Prebuilt components such as alerts, dropdown menus, buttons, tabs etc
A `Tabs` element allows you to add several `tab` elements. An optional `label` parameter can be used.
- Encoded colours for communication with users. Colours to convey a warning to the user, success, errors etc.
`app = dash.Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP])`
---
App layout with two components.
- A `Dropdown` to select available years, weather stations etc for the user to choose from
- A `Graph` component added to the layout displays an empty chart.
When modifying a component in a callback function you need to provide a `component_id` and `component_property`. Here the `figure` property will be modified. It belongs to the `Graph` component.
---
## Themes for Figures
If you want the figure theme to fit in with the style of the app's theme, change the `template.attribute` under `layout`.
`fig.layout.template = template_name`
Theme names include `ggplot2`, `plotly_dark`, `seaborn`.
The full list available under 'plotly.io.themes`
![]()
Description of the “Dash_bootstrap” project…
Bootstrap
Bootstrap can be used to style the page using the third-party Dash Bootstrap Components package.
dash-bootstrap-components is a component library for use with Plotly Dash.
To use it you must link a Bootstrap v4 compatible stylesheet and incorporate dash-bootstrap-components into the layout of the app.
Links to BootstrapCDN can be used as follows:
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
The full list of available themes is CERULEAN, COSMO, CYBORG, DARKLY, FLATLY, JOURNAL, LITERA, LUMEN, LUX, MATERIA, MINTY, PULSE, SANDSTONE, SIMPLEX, SKETCHY, SLATE, SOLAR, SPACELAB, SUPERHERO, UNITED, YETI.
There is even an theme explorer for a live demo of dash-bootstrap-components using all of the different available themes.
Simply changing the dbc.themes name can change the look of the app instantly.
Bootstrap’s grid system is also available for responding to different sized screens.
The docs list the various bootstrap components that can be used and how to use them in a Dash app.
Tabs
tabs = dbc.Tabs(
[
dbc.Tab(tab1_content, label="Tab 1"),
dbc.Tab(tab2_content, label="Tab 2"),
dbc.Tab(
"This tab's content is never seen", label="Tab 3", disabled=True
),
]
)
Benefits of using Bootstrap
-
Dash Bootstrap Components had a set of themes you can use
-
Bootstrap has a powerful grid system of rows and columns. Therefore you can design the pages more from a user perspective instead on focussing on the screen attributes of pixels and percentages.
-
Responsiveness. Bootstrap handles the various screen sizes that are available. You can finetune behaviour of page elements to control how their sizes changes as the screen size changes.
Every item added to the children parameter of the main html.Div element takes up the full width of the screen and as much screen height as required to display it’s content. The order of the elements in the list also determines the order of the display on the screen.
Bootstrap can be used to define a column which acts as an independent screen, elements will be displayed on top of each other with each element occupying the full width of this mini-screen.
Column widths can be defined in very flexible ways. The grid system divides the screen into 12 columns, a column width can be specified with a number between 1 and 12 inclusive and this allows automatic resizing of the columns while the proportions. Sometimes it might be better to expand the column on smaller screens to make it easier to read. There are 5 possible screen widths :xs for extra small, s for small, md for medium, lg for large and xl for extra large. You can specify the widths of the columns to be different for the different screen sizes.
Col lg = 4, md =12 means that the column takes 4 of the 12 grid columns (1/3) on large screens and 12 of the 12 columns on a medium sized screen.
An offset can also be specified so that the content will start from a specified number of columns from the left. A python dictionary is used for this purpose.
lg ={'size': 6, 'offset' : 4} will shift the content 4 columns from the left on large screens.
Row is used to placed multiple columns next to each other.
`dbc.Row([ dbc.Col(), dbc.Col() ])
- Prebuilt components such as alerts, dropdown menus, buttons, tabs etc
A `Tabs` element allows you to add several `tab` elements. An optional `label` parameter can be used.
- Encoded colours for communication with users. Colours to convey a warning to the user, success, errors etc.
`app = dash.Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP])`
---
App layout with two components.
- A `Dropdown` to select available years, weather stations etc for the user to choose from
- A `Graph` component added to the layout displays an empty chart.
When modifying a component in a callback function you need to provide a `component_id` and `component_property`. Here the `figure` property will be modified. It belongs to the `Graph` component.
---
## Themes for Figures
If you want the figure theme to fit in with the style of the app's theme, change the `template.attribute` under `layout`.
`fig.layout.template = template_name`
Theme names include `ggplot2`, `plotly_dark`, `seaborn`.
The full list available under 'plotly.io.themes`