Bootsrapmarkup~15 mins

Importing Bootstrap in projects - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Importing Bootstrap in projects

📖 Scenario: You want to use Bootstrap to make your website look nice and responsive without writing a lot of CSS yourself. Bootstrap is a popular style library that helps you create buttons, grids, and other elements easily.

🎯 Goal: Learn how to add Bootstrap to your HTML project by linking its CSS and JavaScript files correctly so you can use Bootstrap styles and components.

📋 What You'll Learn

Create a basic HTML5 page structure

Add the Bootstrap CSS link in the <head> section

Add the Bootstrap JavaScript bundle before the closing </body> tag

Ensure the page uses semantic HTML and includes the viewport meta tag for responsiveness

💡 Why This Matters

🌍 Real World

Web developers often use Bootstrap to quickly build responsive and visually appealing websites without writing all CSS from scratch.

💼 Career

Knowing how to import and use Bootstrap is a common skill required for front-end web development jobs and helps speed up UI development.

Progress0 / 4 steps

Create the basic HTML5 page structure

Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head>, and <body> tags. Inside the <head>, add a <meta charset="UTF-8"> tag and a <title> with the text Bootstrap Import Example.

Bootsrap




    
    Bootstrap Import Example

Need a hint?

Start with the basic HTML page tags and set the language to English.

Add the viewport meta tag for responsiveness

Inside the <head> section, add the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> to make the page responsive on different devices.

Bootsrap




    
    Bootstrap Import Example

Need a hint?

This tag helps your page look good on phones and tablets by controlling the page width.

Add the Bootstrap CSS link

Inside the <head> section, add the Bootstrap CSS link tag exactly as

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">

Bootsrap




    
    Bootstrap Import Example

Need a hint?

Use the official Bootstrap CDN link to add the CSS file.

Add the Bootstrap JavaScript bundle

Before the closing </body> tag, add the Bootstrap JavaScript bundle script tag exactly as

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+3oU5p6UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

Bootsrap




    
    Bootstrap Import Example

Need a hint?

This script enables Bootstrap's interactive components like modals and dropdowns.