Challenge & Quiz: Applying Basic Bootstrap Concepts
Task: Enhancing Portfolio Showcase with Bootstrap Classes
- Step 1: Add the appropriate class to the provided
divelement to create a global container. - Step 2: Add the appropriate class to the provided
divelement to create a row within the container. - Step 3: Add the appropriate classes to the provided
divelements to create columns for each portfolio item. Ensure that the columns are responsive and adjust their width accordingly. (Please remember that there are threedivelements at this step.). - Step 4: Style the portfolio item titles by adding appropriate classes to the given
h2elements. Center the titles within their respective columns. - Step 5: Make the portfolio item descriptions legible and appropriately sized by adding suitable classes to the provided
pelements. Set the font size tofs-6.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge 2</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- Step 1 -->
<div class="________">
<!-- Step 2 -->
<div class="________">
<!-- Step 3 -->
<div class="________">
<div class="portfolio-item">
<img
width="128px"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/4333ab1f-0a72-431c-b9d0-73a7592739d4/section-3/Biz+Buddy.png"
alt="Biz Buddy"
/>
<div class="description">
<!-- Step 4 -->
<h2 class="________ ________">Biz Buddy</h2>
<!-- Step 5 -->
<p class="________">
Business partner, mentor, or trusted advisor in the world of
entrepreneurship.
</p>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="________">
<div class="portfolio-item">
<img
width="128px"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/4333ab1f-0a72-431c-b9d0-73a7592739d4/section-3/Fresh+Perspective.png"
alt="Fresh Perspective"
/>
<div class="description">
<!-- Step 4 -->
<h2 class="________ ________">Fresh Perspective</h2>
<!-- Step 5 -->
<p class="________">
Open up new possibilities and shed light on different angles of
a situation.
</p>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="________">
<div class="portfolio-item">
<img
width="128px"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/4333ab1f-0a72-431c-b9d0-73a7592739d4/section-3/Road+Remodel.png"
alt="Road Remodel"
/>
<div class="description">
<!-- Step 4 -->
<h2 class="________ ________">Road Remodel</h2>
<!-- Step 5 -->
<p class="________">
Improve the surface, drainage, signage, lighting, and other
infrastructure to enhance safety and functionality
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* Custom CSS can be added here */
.portfolio-item {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
transition: all 0.3s ease-in-out;
}
.portfolio-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.portfolio-item img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.portfolio-item .description {
margin-top: 10px;
}
1. How many columns does Bootstrap's grid system divide the page into?
2. Which class wraps and centers the content within a fixed-width container?
3. What classes are used to create a horizontal group of columns in the grid system?
4. What do the classes sm, md, lg, and xl represent?
5. What classes are used for styling headings with different sizes?
6. What classes are used to align text elements?
7. Which class is used to vertically stack buttons together?
8. Which class is applied to checkbox and radio button inputs within a form-check container to ensure consistent styling?
9. How does Bootstrap's grid system contribute to form layout organization?
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 8
