Components

Back to top

This link uses Bootstrap's affix and should be a direct child of the body of the HTML document. It should be near the end. 

<a href="#top" class="back-to-top">
        <i class="glyph glyph-up"></i>
        <span class="sr-only">Back to top</span>
    </a>
  • The following theme classes can be applied to the <a> tag: .theme-default or .theme-alt.

This component must be initialized with JavaScript. It is displayed when the user has scrolled two times to viewport height. 

$(function () {
        var backToTop = $('.back-to-top'),
            threshold = 2 * $(window).height();
    
        // Displayed when we've scrolled 2x the viewport height
        if (backToTop.length === 0 ||
            $(document).height() < threshold) {
            return;
        }
    
        backToTop.affix({
            offset: {
                top: threshold
            }
        });
    
        // Smooth scroll to top
        backToTop.click(function () {
            $('html, body').animate({ scrollTop: 0 }, {
                duration: 750,
                easing: 'swing'
            });
    
            return false; // prevent default href
        });
    });

Rating 

<div class="rating">
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
<div class="rating color-alt">
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Top label
<div class="rating">
        <div class="rating-label rating-label-top">Top label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Top label
<div class="rating color-alt">
        <div class="rating-label rating-label-top">Top label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Left label
<div class="rating">
        <div class="rating-label rating-label-left">Left label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Left label
<div class="rating color-alt">
        <div class="rating-label rating-label-left">Left label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Top label
<div class="rating rating-small">
        <div class="rating-label rating-label-top">Top label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Top label
<div class="rating rating-small color-alt">
        <div class="rating-label rating-label-top">Top label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Left label
<div class="rating rating-small">
        <div class="rating-label rating-label-left">Left label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Left label
<div class="rating rating-small color-alt">
        <div class="rating-label rating-label-left">Left label</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
Right label
<div class="rating rating-small">
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
        <div class="rating-label rating-label-right">Right label</div>
    </div>
Right label
<div class="rating rating-small color-alt">
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 80%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
        <div class="rating-label rating-label-right">Right label</div>
    </div>

User rating

<div class="rating">
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>
<div class="rating color-alt">
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
        </div>
    </div>

Clickable rating

Rate this stuff:
<div class="rating">
        <div class="rating-label rating-label-top">Rate this stuff:</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 70%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <div class="rating-stars-input">
                <button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
                <i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
                <i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
                <i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
                <i class="glyph glyph-star"></i></button>
            </div>
        </div>
    </div>
Rate this stuff:
<div class="rating color-alt">
        <div class="rating-label rating-label-top">Rate this stuff:</div>
        <div class="rating-stars">
            <!-- Background stars -->
            <ul class="rating-stars-background">
                <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <!-- Set the rating percentage as an inline style -->
            <ul class="rating-stars-value" style="width: 70%">
                <li><i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li><li>
                <i class="glyph glyph-star"></i></li>
            </ul>
    
            <div class="rating-stars-input">
                <button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
                <i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
                <i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
                <i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
                <i class="glyph glyph-star"></i></button>
            </div>
        </div>
    </div>

The interaction might be implemented through a MVVM library. This is the jQuery sample of this demo:

$(function () {
        // Star rating
        $('.rating-btn').on('mouseenter', function () {
            var active = $(this);
    
            // Highlight the hovered star and the previous stars
            $(this).prevAll('.rating-btn').addClass('active');
            $(this).addClass('active');
    
            // Remove highlighting of the following stars
            $(this).nextAll('.rating-btn').removeClass('active');
        });
    
        // Remove highlight of all stars when leaving the container
        $('.rating-stars-input').on('mouseleave', function () {
            $(this).find('.rating-btn').removeClass('active');
        });
    });

Labels

Labels inside headings

This is h1 Default

This is h2 Primary

This is h3 Success

This is h4 Info

This is h5 Warning
This is h6 Danger

Labels inside a line of text Default Primary Success Info Warning Danger 

<span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>

Media

Vertical media with the image on top and the caption below. It’s the default behavior and the simplest markup.

Header

Subheader
$1,499.99 $1,299.99 
<figure class="media">
        <div class="media-img ratio-movie">
            <a href="#">
                <img src="#" alt="" />
            </a>
        </div>
        <figcaption class="media-caption">
            <h4 class="media-header">
                <a href="#">Header</a>
            </h4>
            <div class="media-subheader">
                <a href="#">Subheader</a>
            </div>
            <div class="rating rating-small">
                <div class="rating-stars">
                    <ul class="rating-stars-background">
                        <li><i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li>
                    </ul>
    
                    <ul class="rating-stars-value" style="width: 80%">
                        <li><i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li>
                    </ul>
                </div>
            </div>
            <div class="media-price">
                <s>$1,499.99</s> $1,299.99
            </div>
        </figcaption>
    </figure>

Horizontal media with the image to the left and the caption to the right. It uses the grid to layout the elements accurately.

Header

Subheader
$4.99 $3.20 
<figure class="media row">
        <div class="media-img ratio-movie">
            <a href="">
                <img src="#" alt="" />
            </a>
        </div>
        <figcaption class="media-caption col-sm-16">
            <h4 class="media-header">
                <a href="">Header</a>
            </h4>
            <div class="media-subheader">
                <a href="">Subheader</a>
            </div>
            <div class="rating rating-small">
                <div class="rating-stars">
                    <ul class="rating-stars-background">
                        <li><i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li>
                    </ul>
    
                    <ul class="rating-stars-value" style="width: 80%">
                        <li><i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li><li>
                        <i class="glyph glyph-star"></i></li>
                    </ul>
                </div>
            </div>
            <div class="media-price">
                <s>$4.99</s> $3.20
            </div>
        </figcaption>
    </figure>

Media with play glyph

<figure class="media">
        <div class="media-img media-img-has-play ratio-movie">
            <a href="#">
                <img src="#" alt="" />
                <i class="glyph glyph-play"></i>
            </a>
        </div>
    </figure>

Media with play glyph and progress bar

60%

Header

Ends in 6 hours 
<figure class="media">
      <div class="media-img ratio-movie">
        <a href="#">
          <img src="#" alt="" />
          <i class="glyph glyph-play"></i>
        </a>
    
        <div class="progress progress-media">
          <div class="progress-bar" role="progressbar"
          aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
          style="width: 60%;">
          <!-- Accessibility -->
            <span class="sr-only">60%</span>
          </div>
        </div>
      </div>
      <figcaption class="media-caption">
        <h4 class="media-header">
          <a href="#">Header</a>
        </h4>
        <div class="media-price">
          Ends in 6 hours
        </div>
        <div class="rating">
          <div class="rating-stars">
            <ul class="rating-stars-background">
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
            </ul>
            <ul class="rating-stars-value" style="width: 80%">
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
              <li><i class="glyph glyph-star"></i></li>
            </ul>
          </div>
        </div>
      </figcaption>
    </figure>

Media with label

Season 1
60%

Header

Ends in 6 hours 
<figure class="media">
      <div class="media-img media-img-has-label ratio-movie">
        <a href="#">
          <img src="#" alt="" />
        </a>
        <span class="media-img-label">Season 1</span>
        <div class="progress progress-media">
            <div class="progress-bar" role="progressbar"
                aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                style="width: 60%;"></div>
            <!-- Accessibility -->
            <span class="sr-only">60%</span>
        </div>
      </div>
      <figcaption>
        <h4 class="media-header">
          <a href="#">Header</a>
        </h4>
        <div class="media-price">
        Ends in 6 hours
        </div>
      </figcaption>
    </figure>

Forcing image ratio in media elements

<figure class="media">
      <div class="media-img">
          <a href="#">
            <img src="#" alt="" />
          </a>
      </div>
    </figure>
  • Here are the different classes used above (from left-to-right) to set the width-to-height ratio: .ratio-movie, .ratio-1-1, .ratio-16-9 and .ratio-2-1. Apply these classes to the <div class="media-img"> tag.

Tables

Generic Table with Subtitle label

Item Description Price
Gadget Alpha This is the amazing new Gadget Alpha. $0.99
Gadget Bravo Also available is the Gadget Bravo which provides B. $2.99
Gadget Charlie This is the lorem ipsumist Gadget Charlie. $1.99
Gadget Delta Also available is the Gadget Bravo which provides B. $2.99
Gadget Echo Gadget Delta is a solor dit lipsum for consumers. $2.99
Gadget Foxtrot Gadget Echo provides solor dit for professionals. $1.99

Generic Table with Subtitle label (alt theme)

Item Description Price
Gadget Alpha This is the amazing new Gadget Alpha. $0.99
Gadget Bravo Also available is the Gadget Bravo which provides B. $2.99
Gadget Charlie This is the lorem ipsumist Gadget Charlie. $1.99
Gadget Delta Also available is the Gadget Bravo which provides B. $2.99
Gadget Echo Gadget Delta is a solor dit lipsum for consumers. $2.99
Gadget Foxtrot Gadget Echo provides solor dit for professionals. $1.99 
<div class="table-responsive">
    <table class="table">
        <thead>
          <tr>
            <th>Item</th>
            <th>Description</th>
            <th class="text-right">Price</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gadget Alpha</td>
                <td>This is the amazing new Gadget Alpha.</td>
                <td class="text-right">$0.99</td>
            </tr>
            <tr>
                <td>Gadget Bravo</td>
                <td>Also available is the Gadget Bravo which provides B.</td>
                <td class="text-right">$2.99</td>
            </tr>
            <tr>
                <td>Gadget Charlie</td>
                <td>This is the lorem ipsumist Gadget Charlie.</td>
                <td class="text-right">$1.99</td>
            </tr>
            <tr>
                <td>Gadget Delta</td>
                <td>Also available is the Gadget Bravo which provides B.</td>
                <td class="text-right">$2.99</td>
            </tr>
            <tr>
                <td>Gadget Echo</td>
                <td>Gadget Delta is a solor dit lipsum for consumers.</td>
                <td class="text-right">$2.99</td>
            </tr>
            <tr>
                <td>Gadget Foxtrot</td>
                <td>Gadget Echo provides solor dit for professionals.</td>
                <td class="text-right">$1.99</td>
            </tr>
        </tbody>
    </table>
    </div>
  • The following theme classes can be applied to the <table> tag: .theme-default or .theme-alt.

A generic table with bottom borders.

Item Description Price
Gadget Alpha This is the amazing new Gadget Alpha. $0.99
Gadget Bravo Also available is the Gadget Bravo which provides B. $2.99
Gadget Charlie This is the lorem ipsumist Gadget Charlie. $1.99
Gadget Delta Also available is the Gadget Bravo which provides B. $2.99
Gadget Echo Gadget Delta is a solor dit lipsum for consumers. $2.99
Gadget Foxtrot Gadget Echo provides solor dit for professionals. $1.99

A generic table with bottom borders. With Alternate Theme

Item Description Price
Gadget Alpha This is the amazing new Gadget Alpha. $0.99
Gadget Bravo Also available is the Gadget Bravo which provides B. $2.99
Gadget Charlie This is the lorem ipsumist Gadget Charlie. $1.99
Gadget Delta Also available is the Gadget Bravo which provides B. $2.99
Gadget Echo Gadget Delta is a solor dit lipsum for consumers. $2.99
Gadget Foxtrot Gadget Echo provides solor dit for professionals. $1.99 
  <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Item</th>
              <th>Description</th>
              <th class="text-right">Price</th>
            </tr>
          </thead>
            <tbody>
              <tr>
              <td>Gadget Alpha</td>
              <td>This is the amazing new Gadget Alpha.</td>
              <td class="text-right">$0.99</td>
              </tr>
            <tr>
              <td>Gadget Bravo</td>
              <td>Also available is the Gadget Bravo which provides B.</td>
              <td class="text-right">$2.99</td>
            </tr>
            <tr>
              <td>Gadget Charlie</td>
              <td>This is the lorem ipsumist Gadget Charlie.</td>
              <td class="text-right">$1.99</td>
            </tr>
            <tr>
              <td>Gadget Delta</td>
              <td>Also available is the Gadget Bravo which provides B.</td>
              <td class="text-right">$2.99</td>
            </tr>
            <tr>
              <td>Gadget Echo</td>
              <td>Gadget Delta is a solor dit lipsum for consumers.</td>
              <td class="text-right">$2.99</td>
            </tr>
            <tr>
              <td>Gadget Foxtrot</td>
              <td>Gadget Echo provides solor dit for professionals.</td>
              <td class="text-right">$1.99</td>
            </tr>
          </tbody>
        </table>
      </div>
  • The .table-striped class on the <table> tag will give you bottom borders on each row.

Responsive Table

Instead of using a table this component uses a list, the grid and columns to layout its items.

  1. 1
    Link
    Text
    Text
    Text
    Link
  2. 2
    Link
    Text
    Text
    Text
    Link
  3. 3
    Link
    Text
    Text
    Text
    Link 
<ol class="list-items">
        <li class="list-items-row">
            <div class="row">
                <div class="col-md-2">  <!-- if you want more than one column at a narrow viewport-->
                    <strong>1</strong>    <!-- adjust the grid settings appropriately-->
                </div>
                <div class="s-col-6-24">
                    <a>Link</a>
                </div>
                <div class="col-md-4">
                    Text
                </div>
                <div class="col-md-4">
                    Text
                </div>
                <div class="col-md-4">
                    Text
                </div>
                <div class="col-md-4">
                    <a>Link</a>
                </div>
            </div>
        </li>
    </ol>

List items

Instead of using a table this component uses a list, the grid and columns to layout its items. Click on a row to expand or collapse the details.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<ol class="list-items">
        <li class="list-items-row">
            <div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-1">
                <div class="row">
                    <div class="col-md-2">
                        <i class="glyph glyph-add"></i>
                        <i class="glyph glyph-remove"></i>
                        <strong>1</strong>
                    </div>
                    <div class="col-md-6">
                        <a>Link</a>
                    </div>
                    <div class="col-md-4">
                        Text
                    </div>
                    <div class="col-md-4">
                        Text
                    </div>
                    <div class="col-md-4">
                        Text
                    </div>
                    <div class="col-md-4 text-right">
                        <a>Link</a>
                    </div>
                </div>
            </div>
    
            <div class="collapse" id="list-item-line-1">
                <div class="row">
                    <div class="col-md-18 col-md-offset-2">
                        Lorem ipsum dolor sit amet.
                    </div>
                    <div class="col-md-4 text-right">
                        <button class="btn btn-primary btn-sm">Button</button>
                    </div>
                </div>
            </div>
        </li>
    </ol>

Entity list

List items with nested UI as used in the Windows Settings app, with the option to make the items expandable.

Expandable entity list

25.3 MB
25/08/2016
Mail and Calendar
Microsoft Corporation
60%
44.5 MB
25/08/2016
Camera
Microsoft Corporation
Unavailable
25/08/2016
Defender
Microsoft Corporation
Unavailable
25/08/2016
App
Microsoft Corporation
Advanced options
25.3 MB
25/08/2016
Mail and Calendar
Microsoft Corporation
60%
44.5 MB
25/08/2016
Camera
Microsoft Corporation
Unavailable
25/08/2016
Defender
Microsoft Corporation
Unavailable
25/08/2016
App
Microsoft Corporation
Advanced options 
    <div class="entity-list entity-list-expandable">
        <div class="entity-list-item">
            <div class="item-icon">
                <span class="glyph glyph-mail"></span>
            </div>
            <div class="item-content-secondary">
                <div class="content-text-primary">25.3 MB</div>
                <div class="content-text-secondary">25/08/2016</div>
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Mail and Calendar</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60%</span>
                    </div>
                </div>
            </div>
            <div class="item-content-expanded">
                <button class="btn btn-default" disabled="disabled">Uninstall</button>
                <button class="btn btn-default">Move</button>
            </div>
        </div>
        <div class="entity-list-item">
            <div class="item-icon">
                <span class="glyph glyph-camera"></span>
            </div>
            <div class="item-content-secondary">
                <div class="content-text-primary">44.5 MB</div>
                <div class="content-text-secondary">25/08/2016</div>
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Camera</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
            </div>
            <div class="item-content-expanded">
                <button class="btn btn-default" disabled="disabled">Uninstall</button>
                <button class="btn btn-default">Move</button>
            </div>
        </div>
        <div class="entity-list-item">
            <div class="item-icon">
                <span class="glyph glyph-report-hacked"></span>
            </div>
            <div class="item-content-secondary">
                <div class="content-text-primary">Unavailable</div>
                <div class="content-text-secondary">25/08/2016</div>
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Defender</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
            </div>
            <div class="item-content-expanded">
                <button class="btn btn-default" disabled="disabled">Uninstall</button>
                <button class="btn btn-default" disabled="disabled">Move</button>
            </div>
        </div>
        <div class="entity-list-item">
            <div class="item-icon">
                <img src="http://lorempixel.com/30/30/technics"/>
            </div>
            <div class="item-content-secondary">
                <div class="content-text-primary">Unavailable</div>
                <div class="content-text-secondary">25/08/2016</div>
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">App</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
            </div>
            <div class="item-content-expanded">
                <a href="#" class="btn btn-link btn-block">Advanced options</a>
                <button class="btn btn-default">Uninstall</button>
                <button class="btn btn-default">Move</button>
            </div>
        </div>
    </div>

Non-expandable entity list

Mail and Calendar
Microsoft Corporation
Camera
Microsoft Corporation
Defender
Microsoft Corporation
Mail and Calendar
Microsoft Corporation
60%
Unavailable
App
Microsoft Corporation
Mail and Calendar
Microsoft Corporation
Camera
Microsoft Corporation
Defender
Microsoft Corporation
Mail and Calendar
Microsoft Corporation
60%
Unavailable
App
Microsoft Corporation
    <div class="entity-list">
        <div class="entity-list-item">
            <div class="item-icon">
                <span class="glyph glyph-mail"></span>
            </div>
            <div class="item-content-secondary">
                <button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Mail and Calendar</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
            </div>
        </div>
        <div class="entity-list-item">
            <div class="item-icon">
                <span class="glyph glyph-camera"></span>
            </div>
            <div class="item-content-secondary">
                <button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Camera</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
            </div>
        </div>
        <div class="entity-list-item">
            <div class="item-icon">
                <span class="glyph glyph-report-hacked"></span>
            </div>
            <div class="item-content-secondary">
                <button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Defender</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
            </div>
        </div>
        <div class="entity-list-item">
            <div class="item-icon">
                <span class="glyph glyph-mail"></span>
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Mail and Calendar</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="entity-list-item">
            <div class="item-icon">
                <img src="http://lorempixel.com/30/30/technics"/>
            </div>
            <div class="item-content-secondary">
                <div  class="content-text-primary">Unavailable</div>
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">App</div>
                <div class="content-text-secondary">Microsoft Corporation</div>
            </div>
        </div>
    </div>

Entity list Add Item button

Add features
25.3 MB
25/08/2016
Mail and Calendar
Microsoft Corporation
60%
44.5 MB
25/08/2016
Camera
Microsoft Corporation
Unavailable
25/08/2016
Defender
Microsoft Corporation
Unavailable
25/08/2016
App
Microsoft Corporation
Advanced options
Add an item
25.3 MB
25/08/2016
Mail and Calendar
Microsoft Corporation
60%
44.5 MB
25/08/2016
Camera
Microsoft Corporation
Unavailable
25/08/2016
Defender
Microsoft Corporation
Unavailable
25/08/2016
App
Microsoft Corporation
Advanced options 
    <div class="entity-list entity-list-add-item-button">
        <a class="entity-list-item" href="#">
            <div class="item-icon">
                <span class="glyph glyph-add"></span>
            </div>
            <div class="item-content-primary">
                <div class="content-text-primary">Add an item</div>
            </div>
        </a>
    </div>

Pagination

Default

Alt

<nav>
        <ul class="pagination">        
            <li class="pagination-prev">
                <a href="#" aria-label="Previous">
                    <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
                </a>
            </li>
    
            <li><a href="#">1</a></li>
    
            <li class="pagination-ellipsis"><span>&hellip;</span></li>
    
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
    
            <li class="active"><a href="#">7</a></li>
    
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
    
            <li class="pagination-ellipsis"><span>&hellip;</span></li>
    
            <li><a href="#">15</a></li>
    
            <li class="pagination-next">
                <a href="#" aria-label="Next">
                    <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
                </a>
            </li>
        </ul>
    </nav>
  • The following theme classes can be applied to the <ul> tag: .theme-default or .theme-alt.
  • Add a .disabled class to a <li> element to hide it.

Pager

Default

Alt

<nav>
        <ul class="pager">
            <li class="pager-prev">
                <a href="#" aria-label="Previous">
                    <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
                </a>
            </li>
            <li class="pager-next">
                <a href="#" aria-label="Next">
                    <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
                </a>
            </li>
        </ul>
    </nav>
  • The following theme classes can be applied to the <ul> tag: .theme-default or .theme-alt.
  • Add a .disabled class to a <li> element to hide it.

Jumbotron

Also known as Hero, Jumbotron is a lightweight container for different types of content meant to be emphasized at the top of a page. Heros and Jumbotrons jump outside the grid to allow full-bleed, edge to edge display.

Jumbotron has basic defaults designed to be flexibile for different types of content. Use defaults with combinations of text and spacer classes to achieve specific designs (see centered example below).

Xbox for Christmas
Make the holidays special with Xbox

Espresso served best with whole milk. Dripper aromatic sugar beans steamed breve half and half. Pumpkin spice and kopi-luwak seasonal, mug, java lungo mazagran ristretto and body espresso. Macchiato doppio pumpkin spice sit strong bar shop lungo trifecta.

<div class="jumbotron theme-light">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-md-push-12 text-center">
                <img class="img-responsive visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block visible-xl-inline-block" alt="" src="http://dri2.img.digitalrivercontent.net/Storefront/Site/msusa/images/promo/Xbox/en-US-Xbox-Mod-F-360-Console-Holiday15-mobile.png" data-source-index="2">
            </div>
            <div class="col-md-12 col-md-pull-12">
                <div class="type-h3">
                    Xbox for Christmas
                </div>
                <div class="type-sh3">
                    Make the holidays special with Xbox
                </div>
                <p>Espresso served best with whole milk. Dripper aromatic sugar beans steamed breve half and half. Pumpkin spice and kopi-luwak seasonal, mug, java lungo mazagran ristretto and body espresso. Macchiato doppio pumpkin spice sit strong bar shop lungo trifecta.</p>
                <div class="btn-group">
                    <button class="btn btn-primary" href="#">Buy Xbox</button>
                    <button class="btn btn-secondary" href="#">Read more</button>
                </div>
            </div>
        </div>
    </div>
</div>

This is a centered Heading 3

And this is it's Subheading 3
You can create any Hero configuration with the combination of default settings and standard text/spacer classes. Take a look at the marukup to see it in action.
<div class="jumbotron theme-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-24 text-center">
                <h3>This is a centered Heading 3</h3>
                <div class="type-sh3">
                    And this is it's Subheading 3
                </div>
                <div class="col-md-12 col-md-offset-6">
                    <div class="type-p3">You can create any Hero configuration with the combination of default settings and standard text/spacer classes. Take a look at the marukup to see it in action.</div>
                </div>
            </div>
        </div>
    </div>
</div>
  • Do not put .jumbotron inside .container or .container-fluid. Instead, close the container before adding Jumbotron to the page, then follow it by opening a new container afterward if necessary.
  • You can use the .jumbotron and .hero classes interchangably. Microsoft sites call this component Hero which is why the class is offered here.
  • Add theme classes .theme-default, .theme-light, .theme-dark, and .theme-alt at the .jumbotron level.
  • Each theme class has default background-colors because Bootsrap explicitly sets background color for .jumbotron.
Back to top