Leapstrap

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

 
<ul class="pagination">
<li><a class="leap-interactive" href="#">&laquo;</a></li>
<li><a class="leap-interactive" href="#">1</a></li>
<li><a class="leap-interactive" href="#">2</a></li>
<li><a class="leap-interactive" href="#">3</a></li>
<li><a class="leap-interactive" href="#">4</a></li>
<li><a class="leap-interactive" href="#">5</a></li>
<li><a class="leap-interactive" href="#">&raquo;</a></li>
</ul>

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

 
<ul class="pagination">
<li class="disabled"><a class="leap-interactive" href="#">&laquo;</a></li>
<li class="active"><a class="leap-interactive" href="#">1 <span class="sr-only">(current)</span></a></li>
... 
</ul>

You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.

 
<ul class="pagination">
<li class="disabled"><span>&laquo;</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
... 
</ul>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

 
<ul class="pager">
<li><a class="leap-interactive" href="#">Previous</a></li>
<li><a class="leap-interactive" href="#">Next</a></li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

 
<ul class="pager">
<li class="previous"><a class="leap-interactive" href="#">&larr; Older</a></li>
<li class="next"><a class="leap-interactive" href="#">Newer &rarr;</a></li>
</ul>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination. You have two options, you can either not use leap-interactive on the element, or specify leap-disabled-hover="true" and leap-disabled-tap="true"

 
	<ul class="pager">
		<li class="previous disabled"><a class="leap-interactive" href="#" leap-disabled-hover="true" leap-disabled-tap="true">&larr; Older</a></li>
		<li class="next"><a class="leap-interactive" href="#">Newer &rarr;</a></li>
	</ul>

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Leap List items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

14 Cras justo odio 14Dapibus ac facilisis in 14Morbi leo risus 14Porta ac consectetur ac 14Vestibulum at eros

 
	<div class="list-group">
		<a href="#" class="list-group-item active leap-interactive"><span class="badge">14</span> Cras justo odio </a> <a href="#" class="list-group-item leap-interactive"><span class="badge">14</span>Dapibus ac facilisis in</a> <a href="#" class="list-group-item leap-interactive"><span class="badge">14</span>Morbi leo risus</a> <a href="#" class="list-group-item leap-interactive"><span class="badge">14</span>Porta ac consectetur ac</a> <a href="#" class="list-group-item leap-interactive"><span class="badge">14</span>Vestibulum at eros</a> 
	</div>

Custom content

Add nearly any HTML within, even for linked list groups like the one below. Just add leap-interactive to the anchor.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

 
<div class="list-group">
	<a href="#" class="list-group-item active leap-interactive"> 
<h4 class="list-group-item-heading">
	List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</a> <a href="#" class="list-group-item  leap-interactive"> 
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</a> 
</div>

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Customize the collapsing point

Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Multiple navbars require custom code

Multiple nearby navbars with dropdown menus are not supported by default. You will need to override the z-indexes of the dropdown menus yourself. Otherwise, the dropdown menu will display behind the other navbar.

Set dropdown href to be javascript:void(0);, to not trigger anchor actions. (i.e. don't use href="#" where you can use javascript:void(0);.

 <nav class="navbar navbar-default" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
		<button type="button" class="navbar-toggle leap-interactive" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand leap-interactive" href="#">Brand</a> 
	</div>

<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		<ul class="nav navbar-nav">
			<li class="active"><a class="leap-interactive" href="#">Link</a></li>
			<li><a class="leap-interactive" href="#">Link</a></li>
			<li class="dropdown"> <a href="#" class="dropdown-toggle leap-interactive" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
			<ul class="dropdown-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>
				<li class="divider"></li>
				<li><a class="leap-interactive" href="#">One more separated link</a></li>
			</ul>
			</li>
		</ul>
		<form class="navbar-form navbar-left" role="search">
			<div class="form-group">
				<input type="text" class="form-control leap-interactive" placeholder="Search">
			</div>
			<button type="submit" class="btn btn-default leap-interactive">Submit</button> 
		</form>
		<ul class="nav navbar-nav navbar-right">
			<li><a class="leap-interactive" href="#">Link</a></li>
		
		</ul>
	</div>

<!-- /.navbar-collapse -->
	</nav>

Plugin dependency

The responsive navbar requires the collapse plugin to be included in your version of Leapstrap.

Make navbars accessible

Be sure to add a role="navigation" to every navbar to help with accessibility.

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

Add .navbar-fixed-top.

Or add .navbar-fixed-bottom instead.

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ... </nav>

 <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> ... </nav>

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

 body { padding-top: 70px; }

 body { padding-bottom: 70px; }

Make sure to include this after the core Leapstrap CSS.

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

 <nav class="navbar navbar-default navbar-static-top" role="navigation"> ... </nav>

Indicate the current page's location within a navigational hierarchy.

Separators are automatically added in CSS through :before and content. Just add CSS class leap-interactive to make your breadcrumbs leapable.

 
	<ol class="breadcrumb">
		<li><a class="leap-interactive" href="#">Home</a></li>
		<li><a class="leap-interactive" href="#">Library</a></li>
		<li class="active">Data</li>
	</ol>

Available glyphs

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Leapstrap free of cost. As a thank you, we only ask that you to include a link back to Glyphicons whenever possible.

.glyphicon .glyphicon-adjust
.glyphicon .glyphicon-align-center
.glyphicon .glyphicon-align-justify
.glyphicon .glyphicon-align-left
.glyphicon .glyphicon-align-right
.glyphicon .glyphicon-arrow-down
.glyphicon .glyphicon-arrow-left
.glyphicon .glyphicon-arrow-right
.glyphicon .glyphicon-arrow-up
.glyphicon .glyphicon-asterisk
.glyphicon .glyphicon-backward
.glyphicon .glyphicon-ban-circle
.glyphicon .glyphicon-barcode
.glyphicon .glyphicon-bell
.glyphicon .glyphicon-bold
.glyphicon .glyphicon-book
.glyphicon .glyphicon-bookmark
.glyphicon .glyphicon-briefcase
.glyphicon .glyphicon-bullhorn
.glyphicon .glyphicon-calendar
.glyphicon .glyphicon-camera
.glyphicon .glyphicon-certificate
.glyphicon .glyphicon-check
.glyphicon .glyphicon-chevron-down
.glyphicon .glyphicon-chevron-left
.glyphicon .glyphicon-chevron-right
.glyphicon .glyphicon-chevron-up
.glyphicon .glyphicon-circle-arrow-down
.glyphicon .glyphicon-circle-arrow-left
.glyphicon .glyphicon-circle-arrow-right
.glyphicon .glyphicon-circle-arrow-up
.glyphicon .glyphicon-cloud
.glyphicon .glyphicon-cloud-download
.glyphicon .glyphicon-cloud-upload
.glyphicon .glyphicon-cog
.glyphicon .glyphicon-collapse-down
.glyphicon .glyphicon-collapse-up
.glyphicon .glyphicon-comment
.glyphicon .glyphicon-compressed
.glyphicon .glyphicon-copyright-mark
.glyphicon .glyphicon-credit-card
.glyphicon .glyphicon-cutlery
.glyphicon .glyphicon-dashboard
.glyphicon .glyphicon-download
.glyphicon .glyphicon-download-alt
.glyphicon .glyphicon-earphone
.glyphicon .glyphicon-edit
.glyphicon .glyphicon-eject
.glyphicon .glyphicon-envelope
.glyphicon .glyphicon-euro
.glyphicon .glyphicon-exclamation-sign
.glyphicon .glyphicon-expand
.glyphicon .glyphicon-export
.glyphicon .glyphicon-eye-close
.glyphicon .glyphicon-eye-open
.glyphicon .glyphicon-facetime-video
.glyphicon .glyphicon-fast-backward
.glyphicon .glyphicon-fast-forward
.glyphicon .glyphicon-file
.glyphicon .glyphicon-film
.glyphicon .glyphicon-filter
.glyphicon .glyphicon-fire
.glyphicon .glyphicon-flag
.glyphicon .glyphicon-flash
.glyphicon .glyphicon-floppy-disk
.glyphicon .glyphicon-floppy-open
.glyphicon .glyphicon-floppy-remove
.glyphicon .glyphicon-floppy-save
.glyphicon .glyphicon-floppy-saved
.glyphicon .glyphicon-folder-close
.glyphicon .glyphicon-folder-open
.glyphicon .glyphicon-font
.glyphicon .glyphicon-forward
.glyphicon .glyphicon-fullscreen
.glyphicon .glyphicon-gbp
.glyphicon .glyphicon-gift
.glyphicon .glyphicon-glass
.glyphicon .glyphicon-globe
.glyphicon .glyphicon-hand-down
.glyphicon .glyphicon-hand-left
.glyphicon .glyphicon-hand-right
.glyphicon .glyphicon-hand-up
.glyphicon .glyphicon-hd-video
.glyphicon .glyphicon-hdd
.glyphicon .glyphicon-header
.glyphicon .glyphicon-headphones
.glyphicon .glyphicon-heart
.glyphicon .glyphicon-heart-empty
.glyphicon .glyphicon-home
.glyphicon .glyphicon-import
.glyphicon .glyphicon-inbox
.glyphicon .glyphicon-indent-left
.glyphicon .glyphicon-indent-right
.glyphicon .glyphicon-info-sign
.glyphicon .glyphicon-italic
.glyphicon .glyphicon-leaf
.glyphicon .glyphicon-link
.glyphicon .glyphicon-list
.glyphicon .glyphicon-list-alt
.glyphicon .glyphicon-lock
.glyphicon .glyphicon-log-in
.glyphicon .glyphicon-log-out
.glyphicon .glyphicon-magnet
.glyphicon .glyphicon-map-marker
.glyphicon .glyphicon-minus
.glyphicon .glyphicon-minus-sign
.glyphicon .glyphicon-move
.glyphicon .glyphicon-music
.glyphicon .glyphicon-new-window
.glyphicon .glyphicon-off
.glyphicon .glyphicon-ok
.glyphicon .glyphicon-ok-circle
.glyphicon .glyphicon-ok-sign
.glyphicon .glyphicon-open
.glyphicon .glyphicon-paperclip
.glyphicon .glyphicon-pause
.glyphicon .glyphicon-pencil
.glyphicon .glyphicon-phone
.glyphicon .glyphicon-phone-alt
.glyphicon .glyphicon-picture
.glyphicon .glyphicon-plane
.glyphicon .glyphicon-play
.glyphicon .glyphicon-play-circle
.glyphicon .glyphicon-plus
.glyphicon .glyphicon-plus-sign
.glyphicon .glyphicon-print
.glyphicon .glyphicon-pushpin
.glyphicon .glyphicon-qrcode
.glyphicon .glyphicon-question-sign
.glyphicon .glyphicon-random
.glyphicon .glyphicon-record
.glyphicon .glyphicon-refresh
.glyphicon .glyphicon-registration-mark
.glyphicon .glyphicon-remove
.glyphicon .glyphicon-remove-circle
.glyphicon .glyphicon-remove-sign
.glyphicon .glyphicon-repeat
.glyphicon .glyphicon-resize-full
.glyphicon .glyphicon-resize-horizontal
.glyphicon .glyphicon-resize-small
.glyphicon .glyphicon-resize-vertical
.glyphicon .glyphicon-retweet
.glyphicon .glyphicon-road
.glyphicon .glyphicon-save
.glyphicon .glyphicon-saved
.glyphicon .glyphicon-screenshot
.glyphicon .glyphicon-sd-video
.glyphicon .glyphicon-search
.glyphicon .glyphicon-send
.glyphicon .glyphicon-share
.glyphicon .glyphicon-share-alt
.glyphicon .glyphicon-shopping-cart
.glyphicon .glyphicon-signal
.glyphicon .glyphicon-sort
.glyphicon .glyphicon-sort-by-alphabet
.glyphicon .glyphicon-sort-by-alphabet-alt
.glyphicon .glyphicon-sort-by-attributes
.glyphicon .glyphicon-sort-by-attributes-alt
.glyphicon .glyphicon-sort-by-order
.glyphicon .glyphicon-sort-by-order-alt
.glyphicon .glyphicon-sound-5-1
.glyphicon .glyphicon-sound-6-1
.glyphicon .glyphicon-sound-7-1
.glyphicon .glyphicon-sound-dolby
.glyphicon .glyphicon-sound-stereo
.glyphicon .glyphicon-star
.glyphicon .glyphicon-star-empty
.glyphicon .glyphicon-stats
.glyphicon .glyphicon-step-backward
.glyphicon .glyphicon-step-forward
.glyphicon .glyphicon-stop
.glyphicon .glyphicon-subtitles
.glyphicon .glyphicon-tag
.glyphicon .glyphicon-tags
.glyphicon .glyphicon-tasks
.glyphicon .glyphicon-text-height
.glyphicon .glyphicon-text-width
.glyphicon .glyphicon-th
.glyphicon .glyphicon-th-large
.glyphicon .glyphicon-th-list
.glyphicon .glyphicon-thumbs-down
.glyphicon .glyphicon-thumbs-up
.glyphicon .glyphicon-time
.glyphicon .glyphicon-tint
.glyphicon .glyphicon-tower
.glyphicon .glyphicon-transfer
.glyphicon .glyphicon-trash
.glyphicon .glyphicon-tree-conifer
.glyphicon .glyphicon-tree-deciduous
.glyphicon .glyphicon-unchecked
.glyphicon .glyphicon-upload
.glyphicon .glyphicon-usd
.glyphicon .glyphicon-user
.glyphicon .glyphicon-volume-down
.glyphicon .glyphicon-volume-off
.glyphicon .glyphicon-volume-up
.glyphicon .glyphicon-warning-sign
.glyphicon .glyphicon-wrench
.glyphicon .glyphicon-zoom-in
.glyphicon .glyphicon-zoom-out

How to use

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

<span class="glyphicon glyphicon-search"></span>

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

<button type="button" class="btn btn-default btn-lg leap-interactive">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

More Components

Disabled and active states

Default example

Aligned links

Optional disabled state

List group

Leap List items

Custom content

List group item heading

List group item heading

List group item heading

Navbar

Default navbar

Customize the collapsing point

Multiple navbars require custom code

Plugin dependency

Make navbars accessible

Component alignment

Fixed to top / bottom

Body padding required

Static top

Glyphicons

Available glyphs

How to use

Examples

More Components

Pagination

Default pagination

Disabled and active states

Pager

Default example

Aligned links

Optional disabled state

List group

Leap List items

Custom content

List group item heading

List group item heading

List group item heading

Navbar

Default navbar

Customize the collapsing point

Multiple navbars require custom code

Plugin dependency

Make navbars accessible

Component alignment

Fixed to top / bottom

Body padding required

Static top

Breadcrumbs

Glyphicons

Available glyphs

How to use

Examples