Narrow Jumbotron Template for Bootstrap 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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