From the course: Interactive Dashboards with Plotly and Dash
Unlock this course with a free trial
Join today to access over 25,300 courses taught by industry experts.
Dash Bootstrap themes
From the course: Interactive Dashboards with Plotly and Dash
Dash Bootstrap themes
- [Instructor] Okay, so let's take a look at applying Dash Bootstrap themes to our application. This is going to reduce significantly the amount of custom styling we need to apply. And in many cases, when you're designing your dashboard, you're going to find you need to apply very little custom styling at all. The one thing that I tend to do the most is font alignment and font size. We're going to apply uniform font sizes to different HTML elements, but if we want to make things bigger or center things like titles, we'll need to do that ourselves, but beyond that, Dash Bootstrap themes are incredible. So there are 26 themes available in the Dash Bootstrap components library. All we need to do is when we're instantiating our Dash app, whether we're using Dash or Jupyter Dash, we still have our name argument, but then we just need to specify external style sheets equals and make sure this is a list. You'll get an error if it's not. DBC.themes, and then theme name and caps. But let's…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
Intro to dashboard layouts2m 26s
-
(Locked)
Visual elements and layout options4m 40s
-
(Locked)
Revisiting Dash app layouts3m 54s
-
(Locked)
HTML and markdown7m 17s
-
(Locked)
Assignment: HTML and markdown2m 15s
-
(Locked)
Solution: HTML and markdown2m 28s
-
(Locked)
HTML styles5m 58s
-
(Locked)
Styling interactive elements4m 9s
-
(Locked)
Styling Plotly figures3m 4s
-
(Locked)
Assignment: App styling1m 26s
-
(Locked)
Solution: App styling2m 25s
-
(Locked)
Dash Bootstrap components4m 10s
-
(Locked)
Dash Bootstrap themes5m 1s
-
(Locked)
Demo: Applying a Bootstrap theme4m 27s
-
(Locked)
Grid-based layouts6m 44s
-
(Locked)
Demo: Grid-based layouts5m 54s
-
(Locked)
Multiple tabs3m 45s
-
(Locked)
Demo: Multiple tabs3m 48s
-
(Locked)
Assignment: Building a layout1m 27s
-
(Locked)
Solution: Building a layout3m 10s
-
(Locked)
Key takeaways2m 9s
-
(Locked)
-
-