Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="bg-light h-100vh position-relative overflow-hidden">

  <div class="p-5 h-100 position-relative z-index-2 overflow-auto  py-3 animated bounceInUp">

    
    <div class="row">
      <h1 class="display-4 p-3">Neat Indicators <span class="text-muted">for a<br> Bootsrap Dashboard</span></h1>
      <!--       Outage warning -->
      <div class="p-2 bg-warning text-black rounded m-3 p-3 shadow-sm text-center position-relative animated flipInX delay-1 overflow-hidden">
        <div class="text-uppercase text-tracked mb-2">Warning</div>
        <i class="decorative-icon fas fa fa-exclamation-circle opacity-25 fa-5x animated infinite pulse slower"></i>
        <pre class="bg-dark text-white rounded p-2"><code>Expected outage<br> in US-EAST-1</code></pre>
      </div>

      <!--       Active users indicator -->
      <div class="p-2 bg-primary text-white rounded m-3 p-3 shadow-lg text-center animated flipInX delay-2">
        <div class="text-uppercase text-tracked opacity-50 mb-2">Right now</div>
        <div class="display-4 text-monospace">90</div>
        <small>active users on site</small>
      </div>

      <!--       Revenue today indicator -->
      <div class="p-2 bg-white rounded p-3 m-3 shadow-sm animated flipInX delay-3">
        <div class="text-uppercase text-tracked text-muted mb-2">
          Revenue today
        </div>
        <div class="badge badge-success text-size-2 text-monospace mx-auto">$98<span class="opacity-50 small">.50</span></div>
        <div class="text-muted small mt-1">
          <span class="text-danger">
      <i class="fas fa fa-long-arrow-alt-down"></i>
      5% 
    </span> vs average
        </div>
      </div>

      <!--       Weekly users indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-4">
        <div class="text-uppercase text-tracked text-muted mb-2">Weekly Users</div>

        <div class="d-flex justify-content-between">
          <div>
            <span class="text-size-2 text-monospace">321</span>k
          </div>
          <div class="text-success pl-3 pt-1">
            <i class="fas fa fa-long-arrow-alt-up"></i> 
            <span class="text-monospace">11%</span>
            <div class="small text-muted">vs last week</div>
          </div>
        </div>
      </div>

      <!--       Bounce rate indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-5">
        <div class="text-uppercase text-tracked text-muted mb-2">Bounce rate</div>

        <div class="d-flex align-items-center text-size-3">
          <i class="fas fa fa-door-open opacity-25 mr-2"></i>
          <div class="text-monospace">
            <span class="text-size-2 ">43</span>%
          </div>
          <i class="fas fa fa-arrow-up text-danger ml-2"></i>
        </div>
      </div>

      <!--       Time on site indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-6">
        <div class="text-uppercase text-tracked text-muted mb-2">avg time on site</div>

        <div class="d-flex align-items-center">
          <i class="fas fa fa-clock opacity-25 mr-2 text-size-3"></i>
          <span class="text-size-2 text-monospace">10</span>
          <span class="text-size-2">m</span>
          <span class="text-size-2 text-monospace">30</span>
          <span class="text-size-2">s</span>
        </div>
        <div class="text-muted small">
          <span class="text-success text-monospace">
            <i class="fas fa fa-long-arrow-alt-up"></i>
            5% 
          </span> vs last week
        </div>
      </div>

      <!--       Sessions by device  -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-7">
        <div class="text-uppercase text-tracked text-muted mb-2">Sessions by device</div>
        <div class="row text-center">
          <div class="col">
            <i class="fas fa fa-mobile mb-2 text-size-2"></i>
            <div class="text-monospace">54%</div>
          </div>
          <div class="col">
            <i class="fas fa fa-tablet opacity-50 mb-2 text-size-2"></i>
            <div class="text-monospace text-secondary">26%</div>
          </div>
          <div class="col">
            <i class="fas fa fa-laptop opacity-25 mb-2 text-size-2"></i>
            <div class="text-monospace text-secondary">20%</div>
          </div>
        </div>
      </div>

      <!--       Top Referrals -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-8">
        <div class="text-uppercase text-tracked text-muted mb-2">Top Referrals</div>

        <div>
          <i class="fas fa fa-caret-up text-success"></i>
          <span class="mx-1 text-monospace">62%</span>
<!--           <i class="fab fa-xs fa-google"></i>  -->
          <a href="#">google</a>
        </div>
        <div class="opacity-75">
          <i class="fas fa fa-caret-down text-danger"></i>
          <span class="text-secondary mx-1 text-monospace">25%<span>
<!--           <i class="fab fa-xs fa-y-combinator"></i>  -->
          <a href="#" >news.ycombinator</a>
        </div>
        <div class="opacity-50">
          <i class="text-muted">–</i>
          <span class="text-secondary mx-1 text-monospace">20%</span>
<!--           <i class="fab fa-xs fa-product-hunt"></i>  -->
          <a href="#" >producthunt</a>
        </div>
      </div>

      <!--       Feedback -->
      <div class="d-flex position-relative overflow-hidden flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-9">
        <div class="text-uppercase text-tracked text-muted mb-2">Latest Feedback</div>
        <i class="fas fa fa-smile opacity-25 fa-5x text-warning decorative-icon"></i>

        <div class="d-flex justify-content-between">
          <div>
            <img class="d-block rounded-circle" width="32" src="https://avatars3.githubusercontent.com/u/2906365?s=460&v=4" />
          </div>
          <div class="pl-3 pt-1">
            Nothing bad to say<br/> at this point 😌
            <a class="d-block mt-1 small opacity-75" href="mailto:hermanstarikov@gmail.com">Write back</a>
          </div>
        </div>
      </div>
          
      <!--       Balance indicator -->
      <div class="p-2 bg-white rounded p-3 m-3 shadow-sm animated flipInX delay-10">
        <div class="text-uppercase text-tracked text-muted mb-2">
          Balance
        </div>
        <div class="text-muted">
          <i class="fas fa fa-long-arrow-alt-up text-success"></i>
          <span class="text-success text-size-2 text-monospace">
            0.02% 
          </span> this month
        </div>
        <span class="small">Stripe:</span>
        <span class="small text-monospace mx-auto">$4,480<span class="opacity-50">.00</span>
        </span>
      </div>
          
      <!--       Health Status indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-11">
        <div class="text-uppercase text-tracked text-muted mb-2">Health status</div>

        <div class="d-flex justify-content-between align-items-center mb-2">
          
          <div>
            <i class="fas fa-database"></i> Database  
          </div>
          <i class="fas fa-circle fa-xs text-danger"></i>
        </div>
        
        <div class="d-flex justify-content-between align-items-center">
          
          <div>
            <i class="fas fa-server"></i> API  
          </div>
          <i class="fas fa-circle fa-xs text-warning animated infinite flash slower"></i>
        </div>
      </div>
      <!--       end of indicators -->
    </div>

    <div class="small mx-3 my-3 text-muted">
      Made with Bootstrap v4.1.2, Font Awesome v5.3.1 and Animate.css v3.7.0
    </div>
  </div>
  <!--    decoarative tachometers-->
  <i class="position-absolute z-index-1 fas fa-tachometer-alt text-secondary opacity-25 not-animated infinite pulse slower" style="bottom: 0.25em; right: -0.5em; font-size: 20em;"></i>
  <i class="position-absolute fas fa-tachometer-alt text-secondary opacity-25 not-animated infinite pulse slower delay-2s" style="bottom: -0.25em; right: 1em; font-size: 15em;"></i>
</div>
              
            
!

CSS

              
                .text-tracked {
  letterspacing: 0.1em;
}

.text-size-2 {
  font-size: 2.25rem;
}
.text-size-3 {
  font-size: 1.5rem;
}

.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}

.decorative-icon {
  position: absolute;
  top: -0.2em;
  right: -0.2em;
}

.h-100vh {
  height: 100vh;
}

.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.delay-1 {
  animation-delay: 0.4s;
}
.delay-2 {
  animation-delay: 0.5s;
}
.delay-3 {
  animation-delay: 0.6s;
}
.delay-4 {
  animation-delay: 0.7s;
}
.delay-5 {
  animation-delay: 0.8s;
}
.delay-6 {
  animation-delay: 0.9s;
}
.delay-7 {
  animation-delay: 1s;
}
.delay-8 {
  animation-delay: 1.1s;
}
.delay-9 {
  animation-delay: 1.2s;
}
.delay-10 {
  animation-delay: 1.3s;
}
.delay-11 {
  animation-delay: 1.4s;
}
              
            
!

JS

              
                
              
            
!
999px

Console