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

Added first bootstrap code

Browse Source
This commit is contained in:
Mohammad Rameen 2025-05-19 14:55:20 +05:30
parent 0fb716ce91
commit 1b7fa716c5
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Visual Studio Code Projects/11.0+Bootstrap+Intro/11.0 Bootstrap Intro/index.html
View File

@ -8,14 +8,25 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" <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"> integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<style> <style>
/* TODO 4: Use flexbox to center the card in the vertical and horizontal center. */ .flex-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
</style> </style>
</head> </head>
<body> <body>
<div class="flex-container"> <div class="flex-container">
<!-- TODO 2: Add the Bootstrap Prebuilt Card here --> <div class="card" style="width: 18rem;">
<!-- TODO 3: Change the image src to display the flower.jpg image. --> <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> </div>
</body> </body>