Dashboard Design with Bootstrap 5 is a hands-on course in building responsive dashboards with Bootstrap 5.3, from the grid system and components to Chart.js charts, data loaded from JSON and dark mode. It suits developers and anyone who presents data to managers or teams, and you leave with dashboards of all four types published on the web.
A dashboard brings data from many sources onto one page, so managers and teams can see key figures, trends and the status of their work at a glance. A good dashboard is more than attractive charts: it has to order information so it is easy to read, display well on both large screens and phones, and be quick to change when requirements move.
This course builds dashboard pages with Bootstrap 5.3. Learners review the HTML and CSS they need, lay out pages with the grid system, utilities and components such as the navbar, an offcanvas sidebar, cards and tables, and use the JavaScript components. They then create charts with Chart.js, display data loaded from JSON files, add dark mode with color modes and customise the theme with Sass and Vite. The course closes with a workshop that builds all four types of dashboard and publishes them on the web. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
Course Details
This course is the 2026 edition of Dashboard Design with Bootstrap 5. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs. Beginner level. This edition uses Bootstrap 5.3, the current stable release, and adds color modes for dark mode, an offcanvas sidebar, Bootstrap Icons, charts with Chart.js, loading data from JSON and theme customisation with Sass and Vite. Older topics such as the transitions plugin have been removed, and deployment now uses GitHub Pages or Netlify. The workshop that builds all four types of dashboard remains. Every lab uses open source or free tools on the learner's own machine. Learners take home a lab guide, starter files, sample data and templates for all four dashboard types.
Section 1: Understanding Dashboards and Setting Up Tools
Section 2: The HTML and CSS You Need for a Dashboard
Section 3: Lab: Getting Started with Bootstrap 5.3 and the Grid System
Section 4: Utilities, Typography, Tables and Forms
Section 5: Lab: Laying Out a Dashboard with Components
Section 6: JavaScript Components
Section 7: Lab: Creating Charts with Chart.js
Section 8: Showing Real Data on a Dashboard
Section 9: Dark Mode and Your Own Theme
Section 10: Workshop: All Four Dashboard Types, Published
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
There are four main types. Strategic dashboards show long-term headline indicators for executives, analytical dashboards let users explore trends and causes in large datasets, operational dashboards track day-to-day work in near real time, and informational dashboards present facts for a general audience. The right type depends on who is looking and what they need to decide. This course builds all four types with Bootstrap 5.3 and Chart.js in its workshop.
The Bootstrap 5 grid divides the width into 12 columns and is built on Flexbox. You wrap a row in a container, then add columns with col classes that state how many of the 12 they span, so col-md-6 takes half the row from medium screens upwards. With the sm, md, lg, xl and xxl breakpoints, the same markup can show four cards side by side on a large screen and stack them on a phone, and gutter classes control the spacing between columns.
Start by loading Bootstrap's CSS and JavaScript from a CDN or npm. Add a top navbar and a sidebar that becomes an offcanvas panel on small screens, then use the grid to divide the main area into a row of KPI cards followed by space for Chart.js charts and data tables. Next add components such as dropdowns for filters, badges for status and modals for details, and finally test on several screen sizes before publishing.
It suits anyone who builds dashboards for managers or teams, developers who build admin pages, and data analysts and IT staff who produce reports on the web. You should be comfortable with a computer and know some HTML and CSS. JavaScript experience is not required because starter code is provided. Please bring a laptop that can run VS Code and Node.js.
You will be able to design dashboards for their audience, create responsive layouts with the grid and utilities, use Bootstrap 5.3's CSS and JavaScript components, build Chart.js charts from JSON data, add dark mode and a company colour theme, and publish dashboards on the web, with templates for all four dashboard types to reuse. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Yes. It can be run in-house for your team, with examples adapted to the data and KPIs you actually use, such as a sales or work status dashboard in your company's colours. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.
Articles are published in Thai.
Every major browser now supports HTML and CSS features that used to need JavaScript or third-party libraries: forms that validate themselves, dialogs and popovers, styling based on what an element contains with :has(), components that adapt to the space they…
HTML and CSS can now do far more than lay out pages. Much of what once needed large JavaScript libraries, such as tooltips that stay attached to a button, scroll-linked animation, smooth page transitions or reusable components, is now built into the browser.…
A good web page needs a sound structure, works well on both phones and computers, and looks appealing. HTML5 and CSS can do more on their own than many people expect, from forms that check their own input and videos with captions to gradients, shadows and…
