Bootstrap Code Play

Learn responsive web design with Bootstrap lessons you can edit and preview. Bootstrap Code Play connects explanations, example code and a playground so you can explore how a change in markup affects a page.

READ, CHANGE, PREVIEW

Choose a topic, read how it works, then tap Try It to open its example in the editor. Change a class, adjust the content or add an element. Open Preview to inspect the result, then return to Code for another experiment.

LEARN THE BUILDING BLOCKS

Practice responsive grids, typography, buttons, alerts, tables and forms. Explore components such as cards, navigation bars, accordions and dialogs in the relevant learning tracks. Guided lessons include steps, challenges and common mistakes to help you understand the code rather than just copy it. Project lessons bring concepts together in examples such as a pricing section and a compact dashboard.

CHOOSE A LEARNING TRACK

Study the bundled Bootstrap 5.3.8 track, or explore Bootstrap 4.6.2 and 3.4.1 for older projects. The older tracks are end of life and are provided for learning and migration. A separate Bootstrap 6 alpha track is experimental; its preview requires internet access and a modern WebView.

KEEP PRACTISING

Search topics or browse by category. Mark lessons complete and see your completion count for each version. Open the playground for your own HTML experiments, save a file, and return to it through Saved Files.

EDIT WITH USEFUL TOOLS

Use syntax highlighting, undo and redo, find and replace, and go to line while working on examples. Save as keeps a separate copy, and Share code sends the editor text through available sharing options.

For students, self-directed learners and developers revisiting responsive layouts, the app offers a practical loop: read an explanation, make a small change and inspect the output.

The app includes advertising. Examples that reference external resources need an internet connection; availability of remote resources can vary.