Skip to main content Skip to docs navigation
View on GitHub

Blocks

Blocks are a composing metaphor. Build your site up by stacking several blocks on top of each other to provide focused, attention grabbing units of content.

On this page

Examples

A basic block

Use these to package stackable, image driven content.

html 
<div class="block text-center">
  <h1 class="block-title">A basic block</h1>
  <h4 class="text-muted">Use these to package stackable, image driven content.</h4>
  <button class="btn btn-primary mt-1">With a simple button</button>
</div>

Dark

We have several basic block types, including a dark block.

A dark block

Use the dark modifier for working over dark images.

html 
<div class="block block-dark text-center">
  <h1 class="block-title">A dark block</h1>
  <h4 class="text-muted">Use the dark modifier for working over dark images.</h4>
  <button class="btn btn-primary mt-1">With a simple button</button>
</div>

Backgrounds

We’ve also made it easy to integrate embeded content for more interactive block backgrounds.

An embed block

Use block-background to integrate interactive backgrounds.

html 
<div class="block block-dark text-center">
  <div class="block-foreground">
    <h1 class="block-title">An embed block</h1>
    <h4 class="text-muted">Use block-background to integrate interactive backgrounds.</h4>
    <button class="btn btn-outline-secondary mt-1">With a simple button</button>
  </div>
  <div class="block-background">
    <iframe src="https://youtube.com/embed/zpOULjyy-n8?autoplay=1controls=0&disablekb=1&fs=0&loop=1&modestbranding=1" title="YouTube video"></iframe>
  </div>
</div>

Bordered and angle

Use different modifiers like block-bordered and block-angle to experiment with different visual treatments and flows between your blocks.

Join designers already using Bootstrap Extensions.
Get Bootstrap Extensions free forever!

By clicking "get started – free Forever!" I agree to Bootstrap Extensions Terms of service

“Notice that simple inset border above. Isn't it lovely.”

Mark Otto, Huge Nerd
html 
<div class="block text-center">
  <div class="container-fluid">
    <h4 class="mb-4">
      Join designers already using Bootstrap Extensions.<br>
      Get Bootstrap Extensions <strong>free</strong> forever!
    </h4>
    <form class="form-inline">
      <div class="d-flex justify-content-center">
        <input class="form-control mb-3" placeholder="Email address">
        <input class="form-control mb-3 mx-1" type="password" placeholder="Create a Password">
      </div>
      <button class="btn btn-primary mb-3">Get started - free forever</button>
    </form>
    <small class="text-muted">
      By clicking "get started – free Forever!" I agree to Bootstrap Extensions
      <a href="#">Terms of service</a>
    </small>
  </div>
</div>
<div class="block block-bordered text-center">
  <div class="container-fluid">
    <blockquote class="pull-quote">
      <p>
        “Notice that simple inset border above. Isn't it lovely.”
      </p>
      <cite>Mark Otto, Huge Nerd</cite>
    </blockquote>
  </div>
</div>

Fill height and alignment

“Started at the bottom… etc”

Drake, OVO
html 
<div class="block block-fill-height text-center">
  <div class="block-xs-bottom">
    <div class="container-fluid">
     <blockquote class="pull-quote">
        <p>
          “Started at the bottom&hellip; etc”
        </p>
        <cite>Drake, OVO</cite>
      </blockquote>
    </div>
  </div>
</div>

CSS

Sass variables

$block-color:                inherit;
$block-bg:                   inherit;

$block-padding-x:            $spacer * 3.8;
$block-padding-y:            $spacer * 1.9;
$block-transform:            rotate(-2deg);
$block-border-width:         $border-width;
$block-border-color:         rgba($black, .1);

$block-light-color:          $body-color;
$block-light-bg:             $white;
$block-light-border-color:   $block-border-color;

$block-dark-color:           $white;
$block-dark-bg:              $black;
$block-dark-border-color:    rgba($white, .2);

$block-lead-font-size:       $font-size-base * 1.5;
$block-lead-font-size-xs:    $block-lead-font-size * .9;

$block-title-font-size:      $font-size-base * 3;
$block-title-line-height:    $line-height-base * .8;

$block-label-font-weight:    $font-weight-normal;
$block-label-text-transform: uppercase;