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>

Create Alerts using CSS

Alerts provide event-based feedback messages for typical user actions.

See the Pen Alerts by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div> 

<div class="alert alert-info" role="alert"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div> 

<div class="alert alert-warning" role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good.</div> 

<div class="alert alert-error" role="alert"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

CSS

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-error {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.alert-error hr {
  border-top-color: #e4b9c0;
}
.alert-error .alert-link {
  color: #843534;
}

Disqus for Twenty Fifteen CSS

Do you want the Disqus comment system WordPress plugin to match your Twenty Fifteen WordPress theme? Use the following CSS:

#disqus_thread {
	background: #fff;
	padding: 3.8461% 7.6923%;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	width: 83.5882%;
	margin: 2em auto;
}

base.css Stylus

Stylus for base.css.

base.css is a collection of CSS for HTML / HTML5 tags and attributes.

The purpose of base.css is to standardize CSS for commonly used HTML tags and attributes. You could use it as is, but should be used as a “base” for your website’s CSS or as a part of a front-end framework you are using. It allows you to build your website’s or web app’s styling faster, as there is no need to rewrite typical CSS for HTML tags and attributes.

Sass Mixin Library

Sass Mixin Library is a simple, lightweight, yet powerful mixin library for Sass.

HOW-TO-USE

Copy the _mixins.scss file and mixins directory to your project. Add the following to your core file or file in which you want mixins to be added:

@import "mixins";

EXAMPLES

Each mixin file located in the mixins directory contains documentation on how-to include the mixin.

Example of implementation can also be found in test.scss.

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 }
* ```