Narrow Jumbotron Template for Bootstrap 4
<!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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment