980 Bootstrap [2d]

Getting a consistent look throughout your application makes it more usable (because all components look alike) and even more fun to use.

Important

Work on this lesson in builder mode.

Learning goals

• You can explain what Bootstrap provides — base styles, a responsive grid, ready-made components and utility classes — and when a project benefits from it.
• You can integrate Bootstrap into a Rails app from npm as Sass, without a CDN, and load only the parts you need.
• You can build layouts with Bootstrap's grid utilities, e.g. two columns side by side that stack on small screens.
• You can use Bootstrap's utility classes for spacing, display, flex and text instead of writing custom CSS.
• You can use and adapt Bootstrap's components, and know which of them need JavaScript.
• You can customize Bootstrap's look through its Sass variables before it is loaded.

Resources

Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.

Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.

Bootstrap documentation (5.3)

• 📄 Layout Show archive.org snapshot and the Grid system Show archive.org snapshot — containers, breakpoints, rows and columns; how the container behaves at each breakpoint
• 📄 Utilities Show archive.org snapshot — the utility classes for spacing Show archive.org snapshot , flex Show archive.org snapshot , colors, borders and more; most day-to-day Bootstrap work is utility classes
• 📄 Components you will use in every project: Buttons Show archive.org snapshot , Dropdowns Show archive.org snapshot , Alerts Show archive.org snapshot , Badges Show archive.org snapshot , Forms Show archive.org snapshot , Navbar Show archive.org snapshot and Navs & tabs Show archive.org snapshot , Pagination Show archive.org snapshot — don't memorize them, get a feel for how they're integrated
• 📄 JavaScript Show archive.org snapshot — Bootstrap is mostly CSS, but dropdowns, modals and a few others need its JavaScript
• 📄 Customize Show archive.org snapshot and Sass Show archive.org snapshot — overriding variables Show archive.org snapshot and importing only the parts you need; install via the npm package Show archive.org snapshot

Our material

• ▶️ Arne's talk on customizing Bootstrap 🇩🇪 (in our library: video Show archive.org snapshot , slides)
• 📄 How Studyflix customizes Bootstrap: overriding variables, importing a subset (internal)

Exercises

• Create a branch in your MovieDB repository.
• Add Bootstrap to your project.
  • Note that the bootstrap docs often link files from their CDN so developers can get started quickly. However, we want to serve all CSS ourselves and don't want to depend on external sources.
  • To integrate Bootstrap into your Rails application, install bootstrap npm package Show archive.org snapshot .
  • Import Bootstrap's Sass code Show archive.org snapshot from your stylesheets.
  • Reload your application. It should look slightly different now (because Bootstrap defines base styling like a global font and font size).
• Migrate your application's layout and one screen to Bootstrap.
  • You may need to modify your HTML for some components.
  • Apply a responsive layout using grid classes where appropriate.
  • If you have a navigation, you do not need to make it usable on mobile (if you want a "hamburger menu" you'd need to supply some JavaScript).
• Refactor one of your BEM blocks to use as many Bootstrap variables Show archive.org snapshot as possible. In particular colors, typography, margins and borders should reference Bootstrap variables instead of picking your own values.
• Refactor one of your existing forms to a Bootstrap form
• Style one screen using only utility classes Show archive.org snapshot for spacing, display and text — no custom CSS.
• Build a side-by-side layout with the grid utilities Show archive.org snapshot : two content areas next to each other on wide screens, stacking on narrow screens.