Skip to content

Instantly share code, notes, and snippets.

@joyheron

joyheron/index.html

Last active March 29, 2019 09:32
Show Gist options
  • Save joyheron/8cbf77c7b47ac9d2147ec3b239370e1c to your computer and use it in GitHub Desktop.
Save joyheron/8cbf77c7b47ac9d2147ec3b239370e1c to your computer and use it in GitHub Desktop.
Download ZIP
Layout with CSS example
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar + .container {
margin-top: 2rem;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">My App</a>
</nav>
<main class="container">
<h1>My Layout</h1>
<h2 class="mt-3">One of my Sections</h2>
<div class="card">
<div class="card-body">
My Awesome Content here
</div>
</div>
<h2 class="mt-4">My last section (displayed as cards)</h2>
<div class="card">
<div class="card-body">
<div class="d-sm-flex justify-content-between">
<a href="#">Link to One Thing</a>
<div>
<a class="btn btn-outline-secondary" href="#">One Action</a>
<a class="btn btn-outline-secondary" href="#">Another Action</a>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<div class="d-sm-flex justify-content-between">
<a href="#">Link to Another Thing</a>
<div>
<a class="btn btn-outline-secondary" href="#">One Action</a>
<a class="btn btn-outline-secondary" href="#">Another Action</a>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<div class="d-sm-flex justify-content-between">
<a href="#">Link to Yet Another Thing</a>
<div>
<a class="btn btn-outline-secondary" href="#">One Action</a>
<a class="btn btn-outline-secondary" href="#">Another Action</a>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment