Skip to content

Instantly share code, notes, and snippets.

@yalin
Created February 3, 2021 10:58
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 yalin/320746ebda76d6652d804cc93285789c to your computer and use it in GitHub Desktop.
Save yalin/320746ebda76d6652d804cc93285789c to your computer and use it in GitHub Desktop.
simple-bootstrap-starterpage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Hello World</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light navbar-expand-md sticky-top bg-warning border rounded" style="margin-top: 10px;margin-bottom: 20px;">
<div class="container"><a class="navbar-brand" href="#">Header Name</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Heading</h5>
</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem lorem, sagittis sit amet sollicitudin at, faucibus vehicula nibh. Aenean ac interdum arcu. Nulla nec scelerisque dolor, eget finibus libero. Phasellus non elementum magna, ut mollis lorem. Maecenas scelerisque placerat feugiat. Quisque et risus id felis viverra tempor. Duis eget neque iaculis, tincidunt sem in, rutrum nisl. Curabitur vel lacus eu felis volutpat blandit ut at sem. Nam sodales mauris erat, non commodo sem porta non. Sed vestibulum ex sit amet risus commodo, a tempor enim sollicitudin. Phasellus pharetra vel metus ut egestas. Mauris venenatis augue dictum justo placerat, vitae consequat dolor vulputate. Nulla aliquam feugiat erat, in tincidunt augue imperdiet ut. Nullam euismod, lacus eu iaculis viverra, justo sem vehicula ex, vel interdum est arcu in dolor. In sed enim sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br><br>Integer id est euismod, efficitur nisl nec, vestibulum purus. Suspendisse potenti. Pellentesque gravida, nisi rhoncus sagittis suscipit, felis metus dapibus orci, non volutpat metus elit sed lectus. Nullam in purus rutrum, malesuada turpis ut, eleifend ante. Morbi interdum vehicula malesuada. Nam malesuada lectus nec maximus rhoncus. Ut at tristique enim. Etiam id ultrices lectus. Integer orci tortor, mattis vel dignissim vel, placerat in enim. Proin elementum leo et augue viverra pharetra. Cras vel blandit lectus, at feugiat felis. Pellentesque interdum varius ultricies. Donec elit ante, faucibus non varius sit amet, sollicitudin aliquam ante. Nullam interdum laoreet magna et condimentum. Etiam sit amet felis diam. Aliquam erat volutpat.<br><br>In vitae blandit sem. Proin dignissim nisl non massa sodales, quis ullamcorper magna elementum. Proin bibendum tortor a enim sagittis, a facilisis sem fringilla. Curabitur ex lorem, egestas a dui mattis, tristique consectetur mi. Aliquam erat volutpat. Cras nibh nisl, auctor id facilisis ut, laoreet ut tellus. Donec a luctus erat, placerat facilisis purus. Curabitur quis ante lectus. Nulla auctor risus nunc, at lobortis nunc eleifend sed. Praesent accumsan ipsum nulla, ut fringilla magna hendrerit nec. Fusce id cursus enim. Proin elementum, leo non volutpat laoreet, lacus neque vehicula nisi, eget sollicitudin nibh leo quis lacus. Ut ullamcorper massa quis ante consectetur consectetur eget et libero. In suscipit mauris vitae sapien placerat mollis. Suspendisse molestie sodales mauris. In et pharetra erat, eu lacinia enim.<br><br>Fusce posuere dignissim massa, ut mattis nisi aliquet vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur semper sem at tellus tempus, eu rutrum nunc fringilla. Integer in tempus nisl. Curabitur nec dui ullamcorper, pretium nisi sed, vestibulum metus. Suspendisse elementum libero eu molestie pellentesque. Nullam eleifend mi sed ligula suscipit iaculis vel ut sapien. Sed cursus nisl eget eros tempor pretium. Nunc justo urna, pulvinar at sagittis fermentum, commodo consequat massa. Phasellus vehicula elit non urna varius porta.<br><br>Mauris hendrerit sodales risus sodales hendrerit. Nulla nec est malesuada ante lacinia sodales eget vitae leo. Cras facilisis in leo non sagittis. In blandit in urna eget efficitur. Aenean at rutrum purus, non congue tortor. Cras imperdiet nunc in libero semper hendrerit. Fusce euismod elit ac ultricies mollis. Donec tincidunt quis neque mattis aliquam. Phasellus ac tempus justo. Vestibulum rutrum malesuada congue. Aenean fringilla accumsan diam vitae rhoncus. In vitae scelerisque quam. Vestibulum ac odio a dui tristique convallis. Sed nec turpis consectetur, efficitur odio in, varius augue. Cras egestas ipsum metus, a viverra mauris hendrerit non.<br><br></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment