Practice and reinforce the concepts from Lesson 9
In this activity, you will:
Total estimated time: 45-60 minutes
What you'll do: Open the project and familiarize yourself with the interface
⚠️ Important: Before You Start DO NOT DELETE the existing files in the template:
- Package files
- Any other files you didn't create
ONLY EDIT the necessary files.
Bootstrap is a popular CSS framework that helps you build responsive websites quickly. You'll learn how to include Bootstrap via CDN and explore its components.
💡 Tip Always use the official Bootstrap documentation for the most up-to-date information. Bookmark this page for future reference!
<head> section of your HTML file<meta> tags but before any custom CSS💡 CSS Placement The CSS link must go in the
<head>section of your HTML to ensure styles load before your content appears.
<body> section💡 JavaScript Placement JavaScript files go at the end of the
<body>section to avoid blocking page rendering. Your content should always come before the<script>tags.
Example:
<body>
<!-- Your website content goes here -->
<div class="container">
<h1>Welcome to Bootstrap</h1>
<p>This is your content...</p>
</div>
<!-- Bootstrap JavaScript scripts go at the end -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
<head> section<body>class="btn btn-primary")Before using Bootstrap components, ensure your HTML structure looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<!-- Your content goes here -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>
💡 Tip Your HTML should include both CSS and JavaScript CDN links for Bootstrap to work properly. If styles aren't showing, double-check your CDN links!
In your StackBlitz project:
Add a Container (5 minutes)
<div class="container">Create Buttons (5 minutes)
btn btn-primary, btn btn-secondary, btn btn-successbtn-lg or btn-smBuild a Card Component (5 minutes)
Test the Grid System (5 minutes)
<div class="row">col-md-4, col-md-8, etc.💡 Getting Started Start with simple components like buttons and containers before moving to complex layouts. The Bootstrap documentation has copy-paste examples for each component!
💡 Tip Keep the Bootstrap documentation and this presentation bookmarked for future projects. They're invaluable references!
Make sure your Bootstrap project includes:
HTML Structure
<head> section<body>Bootstrap Components (minimum 3)
Layout Requirements
⚠️ Internet Required Bootstrap CDN links require an active internet connection to work. Make sure you're connected when testing your project!
ℹ️ Info Submit Your Work When you have completed your "Introduction to Bootstrap" project, submit it using the link below:
Before submitting, verify:
Bootstrap styles not showing?
<head> sectionJavaScript components not working?
<body>Layout not responsive?
<head>💡 Need Help? If you're stuck, try these resources:
- Review the Bootstrap documentation
- Check the example code in Step 4
- Look at the Bootstrap presentation linked above
- Ask for help in your group discussion