Dashboards in Python for Beginners using Dash — Responsive Mobile Dashboards with Bootstrap CSS Components

Examples of Bootstrap Components for Responsive Dashboards

Eric Kleppen
The Startup
Published in
15 min readFeb 28, 2020

--

https://www.vecteezy.com/vector-art/173643-spreadsheet-icon-set

Why Responsive Design

Mobile browsing is huge, accounting for roughly half of web traffic worldwide, and will likely remain one of the fastest growing ways to consume web media. Since mobile browsing is prevalent, it is important to understand whether the users of your dashboards will need a responsive design. For example, at my job, I design dashboards for business people that travel and interact with customers. I need to make sure the visualizations and navigation won’t break down if my users need to display the data from their phone or tablet.

https://upload.wikimedia.org/wikipedia/commons/7/7b/Responsive_Web_Design_for_Desktop%2C_Notebook%2C_Tablet_and_Mobile_Phone.png

Although I know enough CSS to style a simple website, I find creating style sheets a little tedious. Dash makes it easy to apply your own style sheets if you’re capable of creating them; however, if you’re unfamiliar with CSS or don’t want to take the time to create your own, Dash can utilize Bootstrap CSS which makes styling and page-layout extremely easy to piece together. Bootstrap is one of the worlds most popular front-end frameworks for creating responsive, mobile friendly sites.

The Completed Dashboard (zoomed out 50% for effect)

Getting into CSS and Dash

In this article, I’ll discuss the foundation of the Bootstrap CSS Grid layout, and look at some interesting dash-bootstrap-components and callbacks like the Accordion, Modal and Jumbotron.

Dash is a framework for Python written on top of Flask, Plotly.js, and React.js. Dash apps are composed of Layouts and Callbacks:

Layout

The layout is made up of a tree of components that describe what the application looks like and how users experience the content.

Callbacks

--

--

Eric Kleppen
The Startup

Product Manager at Kipsu. Learn dashboards at pythondashboards.com Top writer. www.linkedin.com/in/erickleppen01/