Skip to content

Instantly share code, notes, and snippets.

@omundy

omundy/bootstrap-5-starter-template.html

Last active May 5, 2021 17:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save omundy/ffad8d1b2d784d127e30eba0b8b0af31 to your computer and use it in GitHub Desktop.
Save omundy/ffad8d1b2d784d127e30eba0b8b0af31 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap-5-starter-template.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.row>.col,
.row>[class^=col-] {
margin: 10px 0;
padding-top: .75rem;
padding-bottom: .75rem;
border: 1px solid rgba(86, 61, 124, .2);
background-color: rgba(86, 61, 124, .15);
}
</style>
</head>
<body>
<p>Text outside responsive container</p>
<div class="container">
<div class="row">
<h1>Hello, world!</h1>
<p>Text <i>inside</i> responsive container</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
column 1 of 2
</div>
<div class="col">
column 2 of 2
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
column 1 of 2
</div>
<div class="col-12 col-md-6">
column 2 of 2
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
column 1 of 4
</div>
<div class="col-12 col-sm-6 col-lg-3">
column 2 of 4
</div>
<div class="col-12 col-sm-6 col-lg-3">
column 3 of 4
</div>
<div class="col-12 col-sm-6 col-lg-3">
column 4 of 4
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment