Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML. Make the button and the menu item anchor links .leap-interactive.

 
	<div class="dropdown ">
		<div class="btn-group">
			<button type="button" class="btn btn-primary dropdown-toggle leap-interactive" data-toggle="dropdown">Primary <span class="caret"></span></button> 
			<ul class="dropdown-menu" role="menu">
				<li><a class="leap-interactive" href="#">Action</a></li>
				<li><a class="leap-interactive" href="#">Another action</a></li>
				<li><a class="leap-interactive" href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a class="leap-interactive" href="#">Separated link</a></li>
			</ul>
		</div>
	</div>
	

Button Groups

Wrap a series of buttons with .btn in .btn-group. Make all buttons have the class leap-interactive.

 
	<div class="btn-group">
		<button type="button" class="btn btn-default leap-interactive">Left</button> <button type="button" class="btn btn-default leap-interactive">Middle</button> <button type="button" class="btn btn-default leap-interactive">Right</button> 
	</div>
	

Extend Leapstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default example

By default, Leapstrap's thumbnails are designed to showcase linked images with minimal required markup. Add CSS class leap-interactive and you'll get a border.

 
	<div class="row">
		<div class="col-sm-6 col-md-3">
			<a href="#" class="thumbnail leap-interactive"> <img data-src="holder.js/100%x180" alt="..."> </a> 
		</div>
		... 
	</div>
	

HTML content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

 
	<div class="row">
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail leap-thumbnail leap-interactive" leap-disable-tap="true">
				<img data-src="holder.js/300x200" alt="..."> 
				<div class="caption">
					<h3>
						Thumbnail label
					</h3>
					<p>
						...
					</p>
					<p>
					<a href="#" class="btn btn-primary leap-interactive" role="button">Button</a> <a href="#" class="btn btn-default leap-interactive" role="button">Button</a>
					</p>
				</div>
			</div>
		</div>
	</div>
	

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default media

The default media allow to float a media object (images, video, audio) to the left or right of a content block. Add CSS classes media-leap leap-interactive to get a border on hover.

Generic placeholder image

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
 
	<div class="media media-leap leap-interactive" leap-disable-tap="true">
		<a class="pull-left" href="#"> <img class="media-object" src="..." alt="..."> </a> 
		<div class="media-body">
			<h4 class="media-heading">
				Media heading
			</h4>
			... 
		</div>
	</div>
	

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Examples

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

No default class

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

Dismissable alerts

Build on any alert by adding an optional .alert-dismissable and close button.

Warning! Best check yo self, you're not looking too good.
 
	<div class="alert alert-leap alert-warning alert-dismissable leap-interactive" leap-disable-tap="true">
		<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">&times;</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. 
	</div>
	

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
 
	<div class="alert alert-leap alert-success alert-dismissable leap-interactive" leap-disable-tap="true">
		<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">&times;</button> <a href="#" class="alert-link leap-interactive">...</a> 
	</div>
	<div class="alert alert-leap alert-info alert-dismissable leap-interactive" leap-disable-tap="true">
		<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">&times;</button> <a href="#" class="alert-link leap-interactive">...</a> 
	</div>
	<div class="alert alert-leap alert-warning alert-dismissable leap-interactive" leap-disable-tap="true">
		<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">&times;</button> <a href="#" class="alert-link leap-interactive">...</a> 
	</div>
	<div class="alert alert-leap alert-danger alert-dismissable leap-interactive" leap-disable-tap="true">
		<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">&times;</button> <a href="#" class="alert-link leap-interactive">...</a> 
	</div>
	

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Leap Panel example

Hovering over a leap-panel gives a basic border outline effect.

Leap panel example (hover over me)
 
	<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
		<div class="panel-body">
			Leap panel example (hover over me) 
		</div>
	</div>
	

Panel options

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel heading without title
Panel content

Panel title

Panel content
Panel content
 
	<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
		<div class="panel-heading">
			Panel heading without title
		</div>
		<div class="panel-body">
			Panel content 
		</div>
	</div>
	<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
		<div class="panel-heading">
			<h3 class="panel-title">
				Panel title
			</h3>
		</div>
		<div class="panel-body">
			Panel content 
		</div>
	</div>
	<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
		<div class="panel-body">
			Panel content 
		</div>
		<div class="panel-footer">
			Panel footer
		</div>
	</div>
	

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
 
	<div class="panel panel-primary panel-leap leap-interactive" leap-disable-tap="true">
		...
	</div>
	<div class="panel panel-success panel-leap leap-interactive" leap-disable-tap="true">
		...
	</div>
	<div class="panel panel-info panel-leap leap-interactive" leap-disable-tap="true">
		...
	</div>
	<div class="panel panel-warning panel-leap leap-interactive" leap-disable-tap="true">
		...
	</div>
	<div class="panel panel-danger panel-leap leap-interactive" leap-disable-tap="true">
		...
	</div>
	

Leap well

Use the Leap well as a simple effect on an element to give it a general hover effect.

Hover over me, I'm in a well!
 
	<div class="well well-leap leap-interactive">
		...
	</div>
	

Example

Example heading New

 
	<h3>
		Example heading <span class="label label-default">New</span>
	</h3>
	

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

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> 

Easily highlight new or unread items by adding a <span class="badge"> to links, Leapstrap navs, and more.

 <a class="leap-interactive" href="#">Inbox <span class="badge">42</span></a> 

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.