Skip to content

Instantly share code, notes, and snippets.

@lmullen

lmullen/index.html

Created October 3, 2022 21:15
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 lmullen/e7b2e43f376ba62ac3f97f15b4802ea4 to your computer and use it in GitHub Desktop.
Save lmullen/e7b2e43f376ba62ac3f97f15b4802ea4 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using Bootstrap framework
Raw
index.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">
<title>Demonstration of using BootStrap</title>
<!--
This link adds the CSS from the Bootstrap framework .
https://getbootstrap.com/
-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- This link adds the CSS for Bootstrap Icons
https://icons.getbootstrap.com/#install
-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!--
These links add fonts from Google Fonts
https://fonts.google.com/specimen/IBM+Plex+Serif
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- We can customize many things about Bootstrap using CSS variables
https://getbootstrap.com/docs/5.2/customize/css-variables/
-->
<style>
#homepage-main {
max-width: 1000px;
}
:root {
--bs-body-font-family: 'IBM Plex Serif', serif;
--bs-body-font-size: 1.2rem;
--bs-link-color: orange;
}
</style>
</head>
<body>
<main id="homepage-main" class="container">
<header class="mt-5">
<h1>Personal Website</h1>
</header>
<div class="row">
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio leo, rutrum at arcu a, laoreet pretium arcu. Maecenas dictum est in lectus lobortis porta. Proin vitae urna lectus. Nullam et odio pharetra sapien bibendum aliquam a ac massa. Fusce lacinia, mi a eleifend semper, leo neque tincidunt ex, sed faucibus est nulla maximus tellus. Proin non nisi sed diam vehicula aliquam at vitae massa. Quisque at ex non massa elementum luctus. Morbi mattis rutrum tempor. Etiam sit amet lorem a urna commodo euismod nec vel libero. Nam lacinia mauris metus, vel bibendum purus bibendum et. Aliquam scelerisque imperdiet semper. Maecenas vel sem quis purus porta blandit. Morbi pretium nec massa ac tempor. Etiam a lorem semper, suscipit risus et, euismod mauris. In at elit nec risus efficitur commodo ac a dui.</p>
<p>Integer diam sapien, ornare ut dui at, rutrum dapibus sapien. Sed at ante aliquam, lobortis tortor et, dapibus lacus. Sed in suscipit dui. Suspendisse id hendrerit tortor. Mauris diam mi, porta sagittis cursus vel, sollicitudin vitae lorem. Proin sollicitudin metus eget mauris consectetur, sit amet luctus sapien tristique. Mauris facilisis efficitur lorem, vel varius nisl congue id. Mauris tincidunt elit augue, sed hendrerit erat blandit id. Phasellus vitae feugiat mi, a eleifend massa. Etiam nunc nisl, semper fringilla congue ut, dignissim in lorem. Sed posuere consequat quam eget dapibus. Aenean iaculis pellentesque odio id aliquam. Mauris ut massa sed neque lacinia finibus. Integer sodales lacus magna, sed sollicitudin dolor viverra in. Vestibulum dolor sem, maximus et nunc non, porta fringilla velit.</p>
</div>
<div class="col-md-3">
<h2>Around the internet</h2>
<ul>
<!-- How to add icons:
https://icons.getbootstrap.com/icons/github/ -->
<li><i class="bi bi-github"></i> <a href="https://github.com/lmullen/">GitHub</a></li>
<li><i class="bi bi-bank2"></i><a href="https://rrchnm.org/"> RRCHNM</a></li>
</ul>
<figure>
<img src="https://weblog.lincolnmullen.com/2021/08/20/uploads/2021/76f7352586.jpg" class="rounded img-fluid" alt="Lego grandfather clock">
<figcaption>A Lego grandfather clock</figcaption>
</figure>
</div>
</div>
<!-- This link adds the JavaScript from Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment