Bootstrap Jumbotron Background Cover Image

Add a background image to your jumbotron (hero) in Bootstrap.

See the Pen Bootstrap Jumbotron Background Cover Image by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="jumbotron jumbotron-cover-image">
   <div class="container">
       <h1>Hello, world!</h1>
       <p>...</p>
   </div>
</div>

Add .jumbotron-cover-image CSS class.

CSS

.jumbotron-cover-image {
        position: relative;
        background: #000 url("https://himpfencom.ams3.cdn.digitaloceanspaces.com/codepen-asset-hosting/yeshi-kangrang-276043-unsplash.jpg") center center;
        width: 100%;
        height: 100%;
        background-size: cover;
        color: #fff;
}

You can change the background colour and font colour as needed.

Bootstrap Outline Buttons

See the Pen Bootstrap 4: Outline Buttons by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<button type="button" class="btn btn-primary-outline">Primary</button>

<button type="button" class="btn btn-secondary-outline">Secondary</button>

<button type="button" class="btn btn-info-outline">Info</button>

<button type="button" class="btn btn-success-outline">Success</button>

<button type="button" class="btn btn-warning-outline">Warning</button>

<button type="button" class="btn btn-danger-outline">Danger</button>

Center Align Bootstrap Nav Pills

This tutorial will show you how to center align nav pills in Bootstrap.

HTML

<div class="centered-pills">
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

CSS

.centered-pills { text-align: center } 
.centered-pills ul.nav-pills { display: inline-block }
.centered-pills li { display: inline } 
.centered-pills a { float: left } 
* html .centered-pills ul.nav-pills, *+html .centered-pills ul.nav-pills { display: inline }
* ```