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
:warning: 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.
:bulb: 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:bulb: CSS Placement The CSS link must go in the
<head>section of your HTML to ensure styles load before your content appears.
<body> section:bulb: 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>
:bulb: 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.:bulb: 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!
:bulb: 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
:warning: Internet Required Bootstrap CDN links require an active internet connection to work. Make sure you're connected when testing your project!
:information_source: 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>:bulb: 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