Arcron-ArchLinux/100-Days-Of-Code
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Bootstrap intro code

Browse Source
This commit is contained in:
Mohammad Rameen 2025-04-19 09:43:53 +05:30
parent 12d52b92a2
commit 0fb716ce91
4 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Visual Studio Code Projects/11.0+Bootstrap+Intro/11.0 Bootstrap Intro/flower.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
Visual Studio Code Projects/11.0+Bootstrap+Intro/11.0 Bootstrap Intro/goal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

22
Visual Studio Code Projects/11.0+Bootstrap+Intro/11.0 Bootstrap Intro/index.html Normal file
View File

@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<style>
/* TODO 4: Use flexbox to center the card in the vertical and horizontal center. */
</style>
</head>
<body>
<div class="flex-container">
<!-- TODO 2: Add the Bootstrap Prebuilt Card here -->
<!-- TODO 3: Change the image src to display the flower.jpg image. -->
</div>
</body>
</html>

35
Visual Studio Code Projects/11.0+Bootstrap+Intro/11.0 Bootstrap Intro/solution.html Normal file
View File

@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<style>
.flex-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="card" style="width: 18rem;">
<img src="./flower.jpg" class="card-img-top" alt="sunflower">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</body>
</html>