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