Skip to content

Instantly share code, notes, and snippets.

@mrmccormack

mrmccormack/index-gutter-blank.html

Last active January 19, 2019 14:39
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 mrmccormack/8a83effdd043c6b345ca0383b20bc9c2 to your computer and use it in GitHub Desktop.
Save mrmccormack/8a83effdd043c6b345ca0383b20bc9c2 to your computer and use it in GitHub Desktop.
Download ZIP
IM215 Bootstrap Gutter CSS
Raw
index-gutter-blank.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Fontawesome links -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<title>????Enter your title here, don't forget!!! </title>
<style>
h3 {
color: green;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Yoda Lives</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fan club</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Members only</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Yoda lives here.</h1>
<p>My first Bootstrap 4.x Yoda Page</p>
<p><small>by Mr. M. - Confederation College</small></p>
<a class="btn btn-primary" href="#" role="button">Yoda's videos &raquo;</a>
</div>
<div class="container">
<div class="row box">
<div class="col-md-4">
<h3>Column 1</h3>
<img class="img-fluid rounded-circle" src="https://assets.entrepreneur.com/content/3x2/2000/20170405204540-empire-yoda.jpeg?width=700&crop=2:1"
alt="yoda">
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-stroopwafel"></i>
</span>
<i class="fas fa-rocket fa-xs"></i>
<i class="fas fa-rocket fa-sm"></i>
<i class="fas fa-rocket fa-lg"></i>
<i class="fas fa-rocket fa-2x"></i>
<p>Lorem ipsum dolor..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt eros sit amet scelerisque
tempus. Cras nec enim vel ipsum lacinia fringilla ornare nec dui. Duis venenatis bibendum lacus, varius
eleifend massa viverra non. Aenean feugiat ante quis imperdiet vestibulum. Nulla pharetra eros at tellus
venenatis, vitae varius urna ultrices. Nunc justo tellus, consequat quis tortor nec, tristique mollis orci.
Pellentesque aliquet purus justo, sit amet euismod ex tempor tristique. Nullam tincidunt dolor non cursus
fermentum. Nunc at mollis massa, non iaculis enim. Nam feugiat, ligula suscipit iaculis aliquet, arcu arcu
scelerisque felis, eu dictum lorem risus et nisi. Aenean tellus ipsum, pharetra vitae arcu sit amet, commodo
laoreet elit. Phasellus interdum dui in diam cursus interdum. Aliquam nec eros ac sem pretium faucibus. Nam
malesuada eros at vestibulum vehicula. In hac habitasse platea dictumst.
</p>
</div>
<div class="col-md-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<div class="col-md-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Raw
index-gutter-solution.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Fontawesome links -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<title>????Enter your title here, don't forget!!! </title>
<style>
h3 {
color: green;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 50px !important;
padding-left: 50px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Yoda Lives</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fan club</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Members only</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Yoda lives here.</h1>
<p>My first Bootstrap 4.x Yoda Page</p>
<p><small>by Mr. M. - Confederation College</small></p>
<a class="btn btn-primary" href="#" role="button">Yoda's videos &raquo;</a>
</div>
<div class="container">
<div class="row box">
<div class="col-md-4">
<h3>Column 1</h3>
<img class="img-fluid rounded-circle" src="https://assets.entrepreneur.com/content/3x2/2000/20170405204540-empire-yoda.jpeg?width=700&crop=2:1"
alt="yoda">
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-stroopwafel"></i>
</span>
<i class="fas fa-rocket fa-xs"></i>
<i class="fas fa-rocket fa-sm"></i>
<i class="fas fa-rocket fa-lg"></i>
<i class="fas fa-rocket fa-2x"></i>
<p>Lorem ipsum dolor..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt eros sit amet scelerisque
tempus. Cras nec enim vel ipsum lacinia fringilla ornare nec dui. Duis venenatis bibendum lacus, varius
eleifend massa viverra non. Aenean feugiat ante quis imperdiet vestibulum. Nulla pharetra eros at tellus
venenatis, vitae varius urna ultrices. Nunc justo tellus, consequat quis tortor nec, tristique mollis orci.
Pellentesque aliquet purus justo, sit amet euismod ex tempor tristique. Nullam tincidunt dolor non cursus
fermentum. Nunc at mollis massa, non iaculis enim. Nam feugiat, ligula suscipit iaculis aliquet, arcu arcu
scelerisque felis, eu dictum lorem risus et nisi. Aenean tellus ipsum, pharetra vitae arcu sit amet, commodo
laoreet elit. Phasellus interdum dui in diam cursus interdum. Aliquam nec eros ac sem pretium faucibus. Nam
malesuada eros at vestibulum vehicula. In hac habitasse platea dictumst.
</p>
</div>
<div class="col-md-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<div class="col-md-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment