Skip to content

Instantly share code, notes, and snippets.

@made-by-chris

made-by-chris/bootstrap-basics.html

Created September 5, 2022 10:24
Show Gist options
  • Save made-by-chris/53b3d6112aa8ce1e2a054887c9715a0c to your computer and use it in GitHub Desktop.
Save made-by-chris/53b3d6112aa8ce1e2a054887c9715a0c to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap-basics.html
Raw
bootstrap-basics.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<style>
</style>
<body>
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg" alt="" width="30"
height="24">
</a>
<h1>welcome to my beatufiullj webistes</h1>
</div>
</nav>
<div class="container text-center">
<div class="row mt-5">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src="https://placedog.net/500" class="card-img-top" alt="...">
<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 class="col-12 col-md-6 col-lg-4">
<h1>COL</h1>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h1>COL</h1>
</div>
</div>
<div class="row mt-5">
<div class="col-12 col-md-6 col-lg-4">
<h1>COL</h1>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src="https://placedog.net/500" class="card-img-top" alt="...">
<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>
<div class="row mt-5">
<div class="col-3">
<h1>COL</h1>
</div>
<div class="col-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-3">
<h1>COL</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment