Basic Responsive Web Design with Bootstrap 5 is a foundation course in HTML and CSS followed by Bootstrap 5.3 for responsive layouts, covering the grid system, utilities, components and dark mode. It suits newcomers to web building, UX/UI designers and developers, and you leave with a published responsive landing page, corporate site and blog.
Websites today must look good on phones, tablets and desktops, and writing fully responsive CSS from scratch takes a long time to learn. Bootstrap 5 is a CSS framework that makes responsive layouts quick with its grid system, utility classes and ready-made components, without needing jQuery and with built-in dark mode support. It suits anyone who wants an attractive, standards-based website in a short time.
This new edition first lays the essential HTML and CSS foundations, including page structure, selectors, the box model, Flexbox, Grid and media queries. It then uses Bootstrap 5.3 from the grid system, utilities, components and JavaScript components through to theming and dark mode, and finishes with a workshop that builds a responsive landing page, corporate website and blog and publishes them online. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
Course Details
This course is the 2026 edition of Basic Responsive Web Design with Bootstrap 5, updated for Bootstrap 5.3 with colour modes and dark mode. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Beginner level. Learners write semantic HTML, style pages with CSS, build layouts with Flexbox, Grid and media queries, then use Bootstrap 5.3's grid system, utilities, components and JavaScript components, customise themes and dark mode, and build three responsive websites that are published online. They take home the source code for every lab.
Section 1: Lab: Setting Up Tools and How Websites Are Built
Section 2: Lab: Well-Structured HTML
Section 3: Lab: CSS Fundamentals
Section 4: Lab: Responsive Layout with CSS
Section 5: Lab: Getting Started with Bootstrap 5.3 and the Grid System
Section 6: Lab: Content and Utilities
Section 7: Lab: Layout Components
Section 8: Lab: Bootstrap JavaScript Components
Section 9: Lab: Theming and Dark Mode
Section 10: Workshop: Three Responsive Websites, 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
Responsive web design means designing one page that rearranges itself to suit the screen, whether phone, tablet or desktop, without building separate sites. It relies on the viewport meta tag, which tells mobile browsers to use the real screen width, flexible layouts with Flexbox and Grid, and media queries that change styles at breakpoints. Bootstrap 5.3 speeds this up with its grid system, utility classes and ready-made components.
The most common basic selectors are element selectors such as p or h1, class selectors that start with a dot such as .card, and ID selectors that start with # such as #header. There are also descendant selectors such as nav a for every link in a menu, child selectors using >, attribute selectors such as input[type=email], and pseudo-classes such as :hover and :first-child. When rules conflict, IDs outweigh classes and classes outweigh elements, which is why Bootstrap relies mainly on classes.
Use a nav element with the navbar and navbar-expand-lg classes so the full menu shows from lg screens upwards. Add the site name with navbar-brand and a navbar-toggler button with data-bs-toggle set to collapse and data-bs-target pointing to the id of the menu container, a div with the collapse navbar-collapse classes wrapping the links. Load bootstrap.bundle.min.js so the button can open and close the menu, with no jQuery needed. For a menu that slides in from the side, use offcanvas instead.
It suits people who want to build responsive websites, including UX/UI designers, developers and anyone interested. You should be able to use a computer with Windows or macOS and search for information online. Some web design background helps you learn faster, and HTML and CSS basics are covered before moving on to Bootstrap.
You will be able to set up web development tools, write semantic HTML and CSS with the right selectors, build layouts with Flexbox, Grid and media queries, use the Bootstrap 5.3 grid system and utility classes, use components such as navbars, cards, pagination, modals, offcanvas panels and carousels, apply your organisation's colours and dark mode, and build a responsive landing page, corporate website and blog published online. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Yes. This course can be run in-house for your team, with examples adapted to your work, such as building pages from your own designs, brand colours or content. You can request a quotation from this page or contact us on LINE @itgenius or by phone on 02-570-8449.
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…
Every website we open today, whatever tool or framework built it, ends up in the browser as HTML and CSS. People who understand these two languages can edit pages, adapt templates and talk to development teams with confidence. Yet many beginners learn from…
Web design today has to look good, work on every screen size, load quickly and be easy for a team to keep editing. Writing all the CSS by hand often ends in long files nobody dares to touch, while component-based CSS frameworks make sites look alike and are…
