Bootstrap
Responsive, ready-made interfaces — fast
The grid system, utilities and ready-made components: buttons, cards, navbars, forms and modals — try every example with a live preview.
- 26 lessons
- 5 chapters
- Arabic & English
Your progress
What's inside
Lessons go from the basics to advanced topics. Read them in order, or jump to what you need.
Chapter 1
Getting Started
- 1Bootstrap IntroductionMeet Bootstrap, the world's most popular CSS framework, and see how its ready-made classes help you build beautiful, responsive pages fast.
- 2Get StartedAdd Bootstrap to a page with two lines from a CDN or install it with npm, and understand what each part of the starter template does.
- 3ContainersContainers are the most basic layout element in Bootstrap. Learn .container, .container-fluid and the responsive containers, and when to use each one.
Chapter 2
Layout
- 4Grid BasicsUnderstand the 12-column grid: containers, rows and columns, equal-width columns, sized columns and nesting.
- 5Responsive GridMake your layout adapt to the screen size: the sm, md, lg, xl and xxl breakpoints, auto-layout columns, offsets, ordering and gutters.
- 6Spacing UtilitiesControl margin and padding with short classes like mt-3 and px-4, and learn centering with mx-auto, responsive spacing and gap.
- 7Display & Flex UtilitiesShow and hide elements by screen size with d-* classes, and arrange content with Flexbox utilities like d-flex, justify-content-between and align-items-center.
- 8RTL & Arabic SupportBuild Arabic, right-to-left sites with dir="rtl", lang="ar" and bootstrap.rtl.min.css, and understand why Bootstrap 5 classes are based on start and end.
Chapter 3
Content
- 9TypographyStyle text with Bootstrap: headings and the .h1–.h6 classes, display headings, the lead paragraph, alignment, weight and size utilities, blockquotes and lists.
- 10Colors & BackgroundsUse Bootstrap's semantic colors for text and backgrounds (text-*, bg-*, text-bg-*), the subtle colors of version 5.3, borders and shadows, and dark mode with data-bs-theme.
- 11ImagesMake images responsive with .img-fluid, add rounded corners and thumbnails, center them, add captions, and control video and image proportions with ratio and object-fit.
- 12TablesTurn HTML tables into clean, readable tables with .table, add striped rows, hover highlighting, borders and colors, and make them responsive with horizontal scrolling.
Chapter 4
Components
- 13Buttons & Button GroupsCreate buttons in different colors, sizes and states with .btn, make them full width, and combine them into groups, toolbars and toggle buttons.
- 14Alerts & BadgesShow success, error and warning messages with alerts, make them dismissible, and use badges for counters and small labels.
- 15CardsA card is a flexible content box: image, title, text, buttons, header and footer. Learn to build cards, arrange them in an equal-height grid and create horizontal cards.
- 16NavbarBuild a responsive navigation bar with a brand, links, a mobile menu button, dropdowns and a search form, and learn to color it and keep it at the top of the page.
- 17FormsStyle form fields with Bootstrap classes like form-control, form-select, checkboxes and switches; lay them out with the grid; and use floating labels and input groups.
- 18Form ValidationShow validation results with clear colors and messages: the was-validated class, invalid-feedback and valid-feedback messages, HTML attributes like required, JavaScript that blocks invalid submissions, and the is-invalid and is-valid classes.
- 19ModalShow a dialog on top of the page to confirm an action or display a form: the component's structure, opening and closing it with data attributes, sizes, centering and scrolling, static backdrops and JavaScript events.
- 20DropdownsCreate click-to-open dropdown menus: their structure, headers and dividers, split buttons, directions and alignment, dark menus and controlling how they close.
- 21Collapse & AccordionShow and hide content with the Collapse component and the buttons that control it, then build an FAQ accordion that opens one section at a time, or several.
- 22CarouselShow images or slides one after another with the Carousel component: structure and the active slide, navigation controls, indicators and captions, crossfade and autoplay.
- 23List Group, Pagination & BreadcrumbDisplay lists elegantly with list groups, split long content into pages with pagination, and show users where they are on the site with breadcrumbs.
- 24Spinners & ToastsKeep users informed with loading spinners, progress bars, toast notifications, and tooltips that need to be enabled with JavaScript.
Chapter 5
Customize & Project
- 25Customizing BootstrapMake your site stand out: add your own CSS after Bootstrap, change CSS variables for the page and for components, switch dark mode with a button, and discover deep customization with Sass.
- 26Project: A Landing PagePut everything you've learned into a real project: a responsive landing page for a coding academy, with a navbar, hero, features, pricing, FAQ, sign-up form and footer.