0
0
Bootsrapmarkup~30 mins

Spinner components in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Create a Loading Spinner with Bootstrap
📖 Scenario: You are building a simple web page that shows a loading spinner while content is loading. This spinner will help users know that something is happening in the background.
🎯 Goal: Build a web page with a Bootstrap spinner component centered on the page. The spinner should be visible and use the Bootstrap classes correctly.
📋 What You'll Learn
Use Bootstrap 5 spinner component
Center the spinner horizontally and vertically on the page
Use semantic HTML5 structure
Include necessary meta tags for responsive design
Ensure the spinner has an accessible label for screen readers
💡 Why This Matters
🌍 Real World
Loading spinners are common in websites and apps to show users that content is loading or a process is running.
💼 Career
Knowing how to use Bootstrap components and utilities helps you quickly build responsive and accessible UI elements in professional web projects.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with lang="en", meta charset="UTF-8", and meta viewport tags inside the <head>. Also add a <main> element inside the <body>.
Bootsrap
Need a hint?

Start with a simple HTML5 page structure including <html>, <head>, and <body>. Use lang="en" in the <html> tag for accessibility.

2
Add Bootstrap CSS link
Inside the <head>, add the Bootstrap 5 CSS CDN link: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css using a <link> tag with rel="stylesheet".
Bootsrap
Need a hint?

Use a <link> tag with rel="stylesheet" and the Bootstrap CSS URL as the href.

3
Add the Bootstrap spinner inside <main>
Inside the <main> element, add a <div> with classes spinner-border and text-primary. Add role="status" and inside it add a <span> with class visually-hidden containing the text Loading... for accessibility.
Bootsrap
Need a hint?

Use the Bootstrap spinner classes exactly as shown. The role="status" and visually-hidden span help screen readers.

4
Center the spinner vertically and horizontally
Add Bootstrap utility classes d-flex, justify-content-center, and align-items-center to the <main> element. Also add min-vh-100 to make it fill the full viewport height.
Bootsrap
Need a hint?

Use Bootstrap flexbox utility classes on the <main> tag to center the spinner both vertically and horizontally.