Bootsrapmarkup~30 mins

Button styles and variants in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Button styles and variants

📖 Scenario: You are creating a simple webpage that shows different button styles using Bootstrap. This will help users see how buttons can look with different colors and sizes.

🎯 Goal: Build a webpage with a header and four buttons. Each button uses a different Bootstrap style variant: primary, secondary, success, and danger.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a header with the text 'Bootstrap Button Variants'

Add four buttons with classes: btn-primary, btn-secondary, btn-success, btn-danger

Buttons should have the text: 'Primary', 'Secondary', 'Success', 'Danger'

Use semantic HTML and include lang, charset, and viewport meta tags

💡 Why This Matters

🌍 Real World

Buttons are everywhere on websites and apps. Knowing how to style them with Bootstrap helps you build user-friendly interfaces quickly.

💼 Career

Web developers often use Bootstrap to create consistent and accessible buttons that work well on all devices.

Progress0 / 4 steps

Create the basic HTML structure

Create a basic HTML5 document with lang="en", <head> containing <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1">. Add a <body> with a <header> containing an <h1> with the text Bootstrap Button Variants.

Bootsrap

Need a hint?

Remember to include the lang attribute in the <html> tag and the required meta tags inside <head>.

Add Bootstrap CSS link

Inside the <head>, add the Bootstrap 5 CSS CDN link: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">.

Bootsrap




    
    
    Button styles and variants
    


    
        Bootstrap Button Variants

Need a hint?

Use the official Bootstrap 5 CSS CDN link inside the <head> section.

Add four Bootstrap buttons with different variants

Inside the <body> after the <header>, add four <button> elements with classes btn btn-primary, btn btn-secondary, btn btn-success, and btn btn-danger. The buttons should have the text Primary, Secondary, Success, and Danger respectively.

Bootsrap




    
    
    Button styles and variants
    


    
        Bootstrap Button Variants

Need a hint?

Use the Bootstrap button classes btn plus the variant classes like btn-primary on each button.

Make buttons accessible and add spacing

Add aria-label attributes to each button matching their text (e.g., aria-label="Primary button"). Also, add the Bootstrap class m-2 to each button to add margin spacing around them.

Bootsrap




    
    
    Button styles and variants
    


    
        Bootstrap Button Variants

Need a hint?

Use the aria-label attribute for accessibility and add the Bootstrap margin class m-2 to each button.