From e893515a6e763b5faff3ad3d22bf6bf8919a760d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nacho=20L=C3=B3pez?= <145539062+KrilinZ@users.noreply.github.com> Date: Sat, 1 Aug 2026 17:45:30 +0200 Subject: [PATCH 1/3] docs(readme): rewrite for clarity, SEO and AI answer engines - Fix broken links: breatheco.de badge (404) -> live asset page; Gitpod badge pointed to a repo that does not exist. - Fix 'learnpack download' command: the package slug is bootstrap-exercises, not the repo name. - Fix 'small React application' -> this tutorial is HTML and CSS. - Add an opening summary, 'What will you build', prerequisites, a grading section, common mistakes and an expanded FAQ. - Move title, badges, metadata, install steps, exercise layout and contributors inside so 4geeks.com does not duplicate what the platform already renders. - Use /blob/HEAD/ for the language link so it works on repos whose default branch is main. - No markdown tables: the 4geeks.com renderer does not support them. --- README.md | 154 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 105 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 261a383..40787fb 100644 --- a/README.md +++ b/README.md @@ -1,91 +1,147 @@ -# Bootstrap Exercises Tutorial at 4Geeks Academy - -follow on Twitter - +
-Hi! I'm Alejandro Sanchez @alesanchezr, I'm thrilled to have you here! πŸŽ‰ πŸ˜‚ Learning to code is hard; you need coaching! DM me on Twitter if you have any question. You'll be learning the following concepts: +# Learn Bootstrap 5 from Zero + +Certified by 4Geeks Academy +Auto-graded with LearnPack +Open in Codespaces + +
-## You'll be learning the following concepts: +A free, auto-graded **Bootstrap 5** tutorial: **8 hands-on exercises, about 5 hours**, that take you from adding Bootstrap to a page for the first time to building a responsive grid, a navigation bar, a hero section and a styled form. You write real HTML in your editor, and a test checks each solution the moment you save it. + +## 🎯 What will you learn? + +1. How to add Bootstrap 5 to any website, and when the CDN is enough. +2. How to pick the HTML elements that will receive Bootstrap styles. +3. How the 12-column grid works: each column is about **8.33%** of the row width, and the columns in one row can never add up to more than 12. +4. The components behind most interfaces: navbar, sidebar, hero, buttons, alerts, tables and forms. +5. When to use a Bootstrap utility class instead of writing your own CSS. + +## πŸ‘€ What will you build? + +Eight small pages. Each one is a component you will reuse in real projects: + +1. **Add Bootstrap to your website** β€” link Bootstrap and confirm it is working. +2. **Bootstrap skeleton** β€” the container, row and column structure. +3. **Bootstrap grid** β€” a row split into equal columns, plus a full-width row. +4. **Navbar** β€” a navigation bar that collapses into a menu on small screens. +5. **Sidebar with menu** β€” a vertical menu next to your main content. +6. **Hero section and three boxes** β€” a landing-page header with a three-column feature row. +7. **Buttons, alert and table** β€” the components you need for almost any interface. +8. **Bootstrap forms** β€” a form built with Bootstrap's input and layout classes. + +## πŸŽ“ What do you need before starting? + +Basic **HTML** and **CSS**: tags, classes, and how a stylesheet is applied to a page. You do **not** need previous Bootstrap experience, and you never have to write JavaScript β€” the exercises load Bootstrap's JavaScript bundle for you. + +If HTML or CSS is still shaky, do these first: + +1. [Learn HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course) +2. [Learn CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course) +3. [Learn CSS Layouts](https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises) + +## βœ… How does the automatic grading work? + +Every exercise ships with its own test file. When you save your HTML, the test runs and tells you straight away whether your solution passes, so you never have to guess whether you got it right or compare against a solution by eye. + +> πŸ’‘ The tests are strict on purpose. Treat a failing test as a prompt to review your code, not as a verdict on your solution. + +## πŸ’‘ What mistakes should you avoid? + +- **A row holds 12 column slots, never more.** Each column takes between 1 and 12 slots, and everything inside a single row must add up to 12 or less. Overflowing the row is the most common Bootstrap mistake. +- **Let Bootstrap do the math.** In Bootstrap 5 the plain `.col` class spreads the columns evenly across the 12 slots on its own. You only need `.col-4`, `.col-6` and friends when you want one specific width. +- **`container` and `container-fluid` are not interchangeable.** `container` has a fixed maximum width at each breakpoint; `container-fluid` always spans the full viewport. Swapping one for the other changes the whole page layout. +- **Look for a utility class before writing CSS.** Most of the spacing, colour and alignment you need already exists as a Bootstrap class, and mixing custom CSS in too early is what makes Bootstrap projects hard to maintain. +- **Keep the [official Bootstrap 5 documentation](https://getbootstrap.com/docs/5.0/) open.** These exercises are designed to be solved by looking things up, which is exactly how you will work as a developer. -1. How to apply Bootstrap to your website. +## ❓ Frequently asked questions -2. Selecting HTML Elements from your website to apply the Bootstrap styles. +### How long does it take to learn Bootstrap? -3. Apply Bootstrap classes to those elements. +The basics take about 5 hours: that is the length of this tutorial, covering the grid, the main components and forms across 8 exercises. Getting comfortable enough to build a full page without checking the documentation usually takes a few more projects. -4. Use the most popular Bootstrap rules. +### Which version of Bootstrap does this tutorial use? -5. Learn the most popular Bootstrap tricks. +Bootstrap 5. The exercises use Bootstrap 5 class names and grid behaviour, and link to the official 5.0 documentation. + +### Do I need to know JavaScript to learn Bootstrap? + +No. Everything you write in this tutorial is HTML and Bootstrap classes. The exercises do load Bootstrap's JavaScript bundle from a CDN, which is what makes components like the collapsing navbar work, but you never have to write or read any JavaScript yourself. + +### Do I have to install anything? + +No. The whole tutorial opens in your browser with GitHub Codespaces. Installing [LearnPack](https://github.com/learnpack/learnpack) on your own machine is optional, for when you prefer to work locally. + +### Is this Bootstrap tutorial free? + +Yes, it costs nothing to access and complete, and the code you write is yours. It is part of the curriculum [4Geeks Academy](https://4geeks.com) uses in its coding bootcamp, published publicly so anyone can learn from it. The tutorial material itself is copyrighted rather than open source: see [LICENSE.md](https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial/blob/HEAD/LICENSE.md) before redistributing it. + +### Is Bootstrap still worth learning? + +Yes, if your goal is to build a working, responsive interface quickly without writing a design system from scratch. Bootstrap gives you a grid and a set of tested components out of the box, which is why it is still common in internal tools, prototypes and existing codebases you may be hired to maintain. + #### Before we start... other related tutorials -
    -
  1. Learn HTML
    2. -
  2. Learn HTML Forms
    3. -
  3. Learn CSS
    4. -
  4. Learn CSS Layouts
    5. -
  5. Learn Bootstrap← πŸ”₯ You are here now
    6. -
-Complete selection of autograded CSS exercises, anyone interested in learning CSS! +1. [Learn HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course) +2. [Learn HTML Forms](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises) +3. [Learn CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course) +4. [Learn CSS Layouts](https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises) +5. [Learn Bootstrap](https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial) ← πŸ”₯ You are here now -## One click installation (recommended): +## πŸš€ How to start -You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/bootstrap-exercises-tutorial) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial.git). +Open the exercises in a few seconds with [Codespaces](https://codespaces.new/?repo=4GeeksAcademy/bootstrap-exercises-tutorial) (recommended) or [Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial.git). -> Once you have VSCode open, the LearnPack exercises should start automatically. If exercises don't run automatically you can try typing on your terminal: `$ learnpack start` +> πŸ’‘ Once VSCode opens, the LearnPack exercises should start automatically. If they don't, type `learnpack start` in your terminal. -## Local installation: +## πŸ’» Local installation -Clone the repository in your local environment and follow the steps below: +Clone the repository in your local environment and follow these steps: -1. Install LearnPack, the package manager for learning tutorials and the node compiler plugin for LearnPack, make sure you also have node.js 14+: +1. Install LearnPack, the package manager for learning tutorials, plus the HTML plugin. You need Node.js 14+: ```bash -$ npm i learnpack -g -$ learnpack plugins:install learnpack-html +npm i learnpack -g +learnpack plugins:install learnpack-html ``` -2. Download these particular exercises using LearnPack and `cd` into the folder: +2. Download these exercises with LearnPack and `cd` into the folder: ```bash -$ learnpack download bootstrap-exercises-tutorial -$ cd bootstrap-exercises-tutorial +learnpack download bootstrap-exercises +cd bootstrap-exercises ``` -> Note: Once you finish downloading, you will find an "exercises" folder that contains all the exercises within. - -3. Start the tutorial/exercises by running the following command at the same level where your learn.json file is: +3. Start the tutorial from the same level as your `learn.json` file: ```bash -$ npm i jest@24.8.0 -g -$ learnpack start +npm i jest@24.8.0 -g +learnpack start ``` +## πŸ“š How the exercises are organized - - -## How are the exercises organized? - -Each exercise is a small React application containing the following files: - -1. **index.html:** represents the entry file for the entire exercise. -2. **README.md:** contains exercise instructions. -3. **test.js:** you don't have to open this file, it contains the testing script for the exercise. +Each exercise is a small website containing the following files: -> Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated. +1. **index.html:** the entry file for the entire exercise. +2. **README.md:** the exercise instructions. +3. **test.js:** the grading script, you don't need to open it. -## Contributors +## 🀝 Contributors Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): -1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) πŸ’» (idea) πŸ€”, (build-tests) ⚠️ , (pull-request-review) πŸ€“ -(build-tutorial) βœ… (documentation) πŸ“– +1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) πŸ’», (idea) πŸ€”, (build-tests) ⚠️, (pull-request-review) πŸ€“, (build-tutorial) βœ…, (documentation) πŸ“– This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! -This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro SΓ‘nchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). +This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro SΓ‘nchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). + + From 482c00f401a5d6c749823025526208c8c59fb65b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nacho=20L=C3=B3pez?= <145539062+KrilinZ@users.noreply.github.com> Date: Sat, 1 Aug 2026 19:25:42 +0200 Subject: [PATCH 2/3] docs(readme): add the grid diagram and two result screenshots All three images already exist in .learn/assets, so nothing new is uploaded. They sit in the published part of the file: markdown images survive the 4geeks.com renderer (verified: an asset with 4 markdown images produces 4 tags in its rendered html). Each one carries a long descriptive alt: it is the only part of an image a screen reader or a language model can read. --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 40787fb..0aea241 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,13 @@ A free, auto-graded **Bootstrap 5** tutorial: **8 hands-on exercises, about 5 ho 1. How to add Bootstrap 5 to any website, and when the CDN is enough. 2. How to pick the HTML elements that will receive Bootstrap styles. 3. How the 12-column grid works: each column is about **8.33%** of the row width, and the columns in one row can never add up to more than 12. + +![Bootstrap's 12-column grid: a row of twelve 1-slot columns, then six 2-slot, four 3-slot, three 4-slot, two 6-slot, a 4+8 split, and one full-width 12-slot column](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/grid.png) + 4. The components behind most interfaces: navbar, sidebar, hero, buttons, alerts, tables and forms. + +![Finished exercise 07: Bootstrap buttons in several colours, a dismissible alert, and a striped table](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/07-buttons-alert-and-table-result.png) + 5. When to use a Bootstrap utility class instead of writing your own CSS. ## πŸ‘€ What will you build? @@ -35,6 +41,11 @@ Eight small pages. Each one is a component you will reuse in real projects: 7. **Buttons, alert and table** β€” the components you need for almost any interface. 8. **Bootstrap forms** β€” a form built with Bootstrap's input and layout classes. +This is exercise 06 once you finish it β€” a hero section with a call to action, followed by a three-column feature row, built entirely with Bootstrap classes: + +![Finished exercise 06: a Bootstrap hero section titled Hello, world! with a Learn more button, above three equal columns each with a heading and a View details button](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/06-hero-section-and-three-boxes-result.png) + + ## πŸŽ“ What do you need before starting? Basic **HTML** and **CSS**: tags, classes, and how a stylesheet is applied to a page. You do **not** need previous Bootstrap experience, and you never have to write JavaScript β€” the exercises load Bootstrap's JavaScript bundle for you. From 45e67e2cb54c67a792ea1bcdcdc85678802609db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nacho=20L=C3=B3pez?= <145539062+KrilinZ@users.noreply.github.com> Date: Sat, 1 Aug 2026 19:29:09 +0200 Subject: [PATCH 3/3] fix(readme): keep the images out of the numbered lists An image placed between two list items splits the list in markdown, so the numbering restarted at 1 halfway through 'What will you learn' and 'What will you build'. The images now sit after each list is finished. Verified on the rendered output: 3
    blocks with 5, 8 and 3 items, which is what the source says. --- README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0aea241..e384742 100644 --- a/README.md +++ b/README.md @@ -19,14 +19,12 @@ A free, auto-graded **Bootstrap 5** tutorial: **8 hands-on exercises, about 5 ho 1. How to add Bootstrap 5 to any website, and when the CDN is enough. 2. How to pick the HTML elements that will receive Bootstrap styles. 3. How the 12-column grid works: each column is about **8.33%** of the row width, and the columns in one row can never add up to more than 12. - -![Bootstrap's 12-column grid: a row of twelve 1-slot columns, then six 2-slot, four 3-slot, three 4-slot, two 6-slot, a 4+8 split, and one full-width 12-slot column](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/grid.png) - 4. The components behind most interfaces: navbar, sidebar, hero, buttons, alerts, tables and forms. +5. When to use a Bootstrap utility class instead of writing your own CSS. -![Finished exercise 07: Bootstrap buttons in several colours, a dismissible alert, and a striped table](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/07-buttons-alert-and-table-result.png) +The grid is the part everyone trips on. These are the combinations that add up to 12: -5. When to use a Bootstrap utility class instead of writing your own CSS. +![Bootstrap's 12-column grid showing seven rows of columns that each add up to twelve slots: twelve columns of 1, six of 2, four of 3, three of 4, two of 6, a 4 plus 8 split, and a single full-width column of 12](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/grid.png) ## πŸ‘€ What will you build? @@ -41,10 +39,13 @@ Eight small pages. Each one is a component you will reuse in real projects: 7. **Buttons, alert and table** β€” the components you need for almost any interface. 8. **Bootstrap forms** β€” a form built with Bootstrap's input and layout classes. -This is exercise 06 once you finish it β€” a hero section with a call to action, followed by a three-column feature row, built entirely with Bootstrap classes: +This is exercise 06 once it passes β€” a hero section with a call to action, above a three-column feature row, built entirely with Bootstrap classes and no custom CSS: + +![Finished exercise 06: a Bootstrap hero section headed Hello, world! with introductory text and a Learn more button, above three equal columns that each contain a heading, a paragraph and a View details button](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/06-hero-section-and-three-boxes-result.png) -![Finished exercise 06: a Bootstrap hero section titled Hello, world! with a Learn more button, above three equal columns each with a heading and a View details button](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/06-hero-section-and-three-boxes-result.png) +And this is exercise 07, the components you will reuse in almost any interface: +![Finished exercise 07: a card asking a question with green Yes and red No buttons, a yellow dismissible alert, and a striped table listing Mark Otto, Jacob Thornton and Larry the Bird with their handles](https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/master/.learn/assets/07-buttons-alert-and-table-result.png) ## πŸŽ“ What do you need before starting?