Structuring the Layout and Managing Themes

Given a basic structure of a Dash app with its main elements—the imports, app instantiation, app layout, callbacks, and running the app—we can add a few HTML elements to it. We will now take our app to the next level from a layout perspective. We’ll keep working with the app.layout attribute and control it in a more powerful and flexible way using the Dash Bootstrap Components package.

Dash Bootstrap Components package

Bootstrap is basically a set of tools that abstract away many details for handling the layout of web pages. Here are some of the most important benefits of using it:

• Themes: As we’ll see in a moment, changing the app’s theme is as simple as providing an additional argument while instantiating the app. Dash Bootstrap Components ships with a set of themes that we can select from and/or edit.
• Grid system: Bootstrap provides a powerful grid system so we can think about our pages more from a user perspective (rows and columns) and not have to focus on the screen attributes (pixels and percentages), although we still have access to those low-level details whenever we need to.
• Responsiveness: Having a large number of possible screen sizes makes it almost impossible to properly design page layouts. This is handled for us, and we can also fine-tune the behavior of page elements to control how their sizes change as the screen size changes.
• Prebuilt components: A set of prebuilt components is also provided, which we will be using. Alerts, buttons, drop-down menus, and tabs are some of the components that Bootstrap provides.
• Encoded colors: We also get a set of colors for easy communication with users in case we have a warning, an error, simple information, or more.

Let’s explore these features one by one.

Themes

First, let’s see how easy it is to change the theme of an app. In the same app.py file, add the following import and the new argument to the app creation call: