Superfeedr Patterns › Bootstrap Compatibility

Pattern Library Notes

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

Pattern Section: Bootstrap Compatibility

Certain Superfeedr styles have been developed to share their classes with Bootstrap classes, so that UI styled with Bootstrap classes can be embedded in Superfeedr and have a Superfeedr appearance, and can be embedded in other sites using Bootstrap to take on that site’s appearance.

Panel

Equivalent to an SF .box.

Toggle pattern display width
​x
 
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Basic panel example
    </div>
    <div class="panel-footer">Panel footer</div>
</div>
​

Buttons

Equivalent to an SF .button.button--raised, with various state classes.

Toggle pattern display width
 
<button type="button" class="btn btn-default">Normal Button</button>
​
<button type="button" class="btn btn-info">Info Button</button>
​
<button type="button" class="btn btn-primary">Primary Button</button>
​
<button type="button" class="btn btn-success">Success Button</button>
​
<button type="button" class="btn btn-warning">Warning Button</button>
​
<button type="button" class="btn btn-danger">Danger Button</button>
​
<button type="button" class="btn btn-link">Link Button</button>
​

River.news

The ultimate test: this uses Bootstrap classes to build an application styled in the SF way, using our Bootstrap compatibility styles. (Note: application markup is generated by React.)

Toggle pattern display width
 
<div id="content"></div>
​
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="//river.news/js/river.news.min.js"></script>
​