Bootstrap Compatibility - Patterns

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

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.

Equivalent to an SF .box.

Toggle pattern display width

<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>

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>

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>

Superfeedr Patterns › Bootstrap Compatibility

Panel

Buttons

River.news