bmcculley/index.html

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="bmcculley">
    <meta name="generator" content="e42.xyz">
    <title>Narrow Jumbotron Template for Bootstrap 4</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="jumbotron-narrow.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-expand-md navbar-light mb-4">
        <a class="navbar-brand text-muted" href="#">Top navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav ml-auto">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>

      <main role="main" class="container">
        <div class="jumbotron">
          <h1>Jumbotron example</h1>
          <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
          <a class="btn btn-lg btn-outline-primary" href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" role="button">View Bootstrap 4.3 docs</a>
        </div>
      </main>

      <div class="row newsletter">
        <div class="input-group mb-3">
          <input type="email" class="form-control" placeholder="email@example.com" aria-label="email@example.com" aria-describedby="button-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="button-addon2">Sign me up!</button>
          </div>
          <span class="w-100"></span>
          <small id="KeywordsHelpBlock" class=" text-muted">
            Sign up for our newsletter
          </small>
        </div>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <div class="card mb-4">
            <div class="card-body">
              <h4 class="card-title">Subheading</h4>
              <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
            </div>
          </div>

          <div class="card mb-4">
            <div class="card-body">
              <h4 class="card-title">Subheading</h4>
              <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="card mb-4">
            <div class="card-body">
              <h4 class="card-title">Subheading</h4>
              <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
            </div>
          </div>

          <div class="card mb-4">
            <div class="card-body">
              <h4 class="card-title">Subheading</h4>
              <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
            </div>
          </div>
        </div>
      </div>

      <footer class="footer">
        <p>&copy; 2019 Company, Inc.</p>
      </footer>
    </div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

## jumbotron-narrow.css
/* Space out content a bit */
body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar {
	border-bottom: 1px solid var(--light);
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.newsletter,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}

/* Remove border radius from all elements */
.btn,
.jumbotron,
.newsletter .form-control,
.marketing .card {
	border-radius: 0;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  background-color: var(--light);
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px auto;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
  .jumbotron {
    border-bottom: 0;
  }
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="bmcculley">
	<meta name="generator" content="e42.xyz">
	<title>Narrow Jumbotron Template for Bootstrap 4</title>

	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<!-- Custom styles for this template -->
	<link href="jumbotron-narrow.css" rel="stylesheet">
	</head>
	<body>
	<div class="container">
	<nav class="navbar navbar-expand-md navbar-light mb-4">
	<a class="navbar-brand text-muted" href="#">Top navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarCollapse">
	<ul class="navbar-nav ml-auto">
	<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="#">Link</a>
	</li>
	<li class="nav-item">
	<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
	</ul>
	</div>
	</nav>

	<main role="main" class="container">
	<div class="jumbotron">
	<h1>Jumbotron example</h1>
	<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
	<a class="btn btn-lg btn-outline-primary" href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" role="button">View Bootstrap 4.3 docs</a>
	</div>
	</main>

	<div class="row newsletter">
	<div class="input-group mb-3">
	<input type="email" class="form-control" placeholder="email@example.com" aria-label="email@example.com" aria-describedby="button-addon2">
	<div class="input-group-append">
	<button class="btn btn-outline-secondary" type="button" id="button-addon2">Sign me up!</button>
	</div>
	<span class="w-100"></span>
	<small id="KeywordsHelpBlock" class=" text-muted">
	Sign up for our newsletter
	</small>
	</div>
	</div>

	<div class="row marketing">
	<div class="col-lg-6">
	<div class="card mb-4">
	<div class="card-body">
	<h4 class="card-title">Subheading</h4>
	<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
	</div>
	</div>

	<div class="card mb-4">
	<div class="card-body">
	<h4 class="card-title">Subheading</h4>
	<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
	</div>
	</div>
	</div>

	<div class="col-lg-6">
	<div class="card mb-4">
	<div class="card-body">
	<h4 class="card-title">Subheading</h4>
	<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
	</div>
	</div>

	<div class="card mb-4">
	<div class="card-body">
	<h4 class="card-title">Subheading</h4>
	<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
	</div>
	</div>
	</div>
	</div>

	<footer class="footer">
	<p>© 2019 Company, Inc.</p>
	</footer>
	</div>
	<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	</body>
	</html>
	/* Space out content a bit */
	body {
	padding-top: 20px;
	padding-bottom: 20px;
	}

	.navbar {
	border-bottom: 1px solid var(--light);
	}

	/* Everything but the jumbotron gets side spacing for mobile first views */
	.newsletter,
	.marketing,
	.footer {
	padding-right: 15px;
	padding-left: 15px;
	}

	/* Remove border radius from all elements */
	.btn,
	.jumbotron,
	.newsletter .form-control,
	.marketing .card {
	border-radius: 0;
	}

	/* Custom page footer */
	.footer {
	padding-top: 19px;
	color: #777;
	border-top: 1px solid #e5e5e5;
	}

	/* Customize container */
	@media (min-width: 768px) {
	.container {
	max-width: 730px;
	}
	}

	/* Main marketing message and sign up button */
	.jumbotron {
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
	background-color: var(--light);
	}
	.jumbotron .btn {
	padding: 14px 24px;
	font-size: 21px;
	}

	/* Supporting marketing content */
	.marketing {
	margin: 40px auto;
	}

	/* Responsive: Portrait tablets and up */
	@media screen and (min-width: 768px) {
	/* Remove the padding we set earlier */
	.marketing,
	.footer {
	padding-right: 0;
	padding-left: 0;
	}
	.jumbotron {
	border-bottom: 0;
	}
	}