Shortcodes

Shortcodes (8)



YJSG Template Shortcodes


YJSG based templates come with custom shortcodes that can help you present your pages or text in best way possible.
Shortcdes are cross browser compatible starting from IE8.



02

Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Static example

A rendered modal with header, body, and set of actions in the footer.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Usage

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

$('#myModal').modal(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name type default description
backdrop boolean true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
show boolean true Shows the modal when initialized.
remote path false

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

<a data-toggle="modal" href="#remote.html" data-target="#modal">click me</a>

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Manually toggles a modal.

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

$('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide instance method has been called.
hidden This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
$('#myModal').on('hidden', function () {
  // do something…
})

Example in navbar

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Usage

Via data attributes

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

<body data-spy="scroll" data-target=".navbar">...</body>

Via JavaScript

Call the scrollspy via JavaScript:

$('#navbar').scrollspy()
Heads up! Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name type default description
offset number 10 Pixels to offset from top when calculating position of scroll.

Events

Event Description
activate This event fires whenever a new item becomes activated by the scrollspy.

Example tabs

Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>
<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

Events

Event Description
show This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Examples

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions


Usage

Declare class="addtips", data-placement="x" and add title="my title"

<a href="#" class="addtips"  data-placement="top" title="Tooltip on top">Tooltip on top</a>
<a href="#" class="addtips"  data-placement="right" title="Tooltip on right">Tooltip on right</a>
<a href="#" class="addtips"  data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a&gt
<a href="#" class="addtips"  data-placement="left" title="Tooltip on left">Tooltip on left</a>
          

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
animation boolean true apply a css fade transition to the tooltip
html boolean true Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
placement string|function 'top' how to position the tooltip - top | bottom | left | right
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if `title` tag isn't present
trigger string 'hover' how tooltip is triggered - click | hover | focus | manual
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Heads up! Options for individual tooltips can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

<a href="#" class="addtips" title="first tooltip">hover over me</a>

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element's tooltip.

$('#element').tooltip('show')

.tooltip('hide')

Hides an element's tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element's tooltip.

$('#element').tooltip('toggle')

.tooltip('destroy')

Hides and destroys an element's tooltip.

$('#element').tooltip('destroy')

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.

Static popover

Four options are available: top, right, bottom, and left aligned.

 

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

 

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

 

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

 

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

 

No markup shown as popovers are generated from JavaScript and content within a data attribute.

Live demo

<a href="javascript:;" class="yjpopover" title="A Title" data-trigger="click" data-content="Pop content">Title</a>
<a href="javascript:;" class="yjpopover" title="A Title" data-trigger="hover" data-content="Content">Title</a>

Usage

Our templates have built in popover javascript class:

$('.yjpopover').popover(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
animation boolean true apply a css fade transition to the tooltip
html boolean true Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
placement string|function 'right' how to position the popover - top | bottom | left | right
selector string false if a selector is provided, tooltip objects will be delegated to the specified targets
trigger string 'click' how popover is triggered - click | hover | focus | manual
title string | function '' default title value if `title` attribute isn't present
content string | function '' default content value if `data-content` attribute isn't present
delay number | object 0

delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Heads up! Options for individual popovers can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

.popover('toggle')

Toggles an elements popover.

$('#element').popover('toggle')

.popover('destroy')

Hides and destroys an element's popover.

$('#element').popover('destroy')

Example alerts

Add dismiss functionality to all alert messages with this plugin.

Holy guacamole! Best check yo self, you're not looking too good.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this


Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

Event Description
close This event fires immediately when the close instance method is called.
closed This event is fired when the alert has been closed (will wait for css transitions to complete).
$('#my-alert').bind('closed', function () {
  // do something…
})

About

Get base styles and flexible support for collapsible components like accordions and navigation.

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>
<div id="demo" class="collapse in"> … </div>

Usage

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Name type default description
parent selector false If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
toggle boolean true Toggles the collapsible element on invocation

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide method has been called.
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
$('#myCollapsible').on('hidden', function () {
  // do something…
})

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
Heads up! When implementing this carousel, remove the images we have provided and replace them with your own.

Usage

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Name type default description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause string "hover" Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Event Description
slide This event fires immediately when the slide instance method is invoked.
slid This event is fired when the carousel has completed its slide transition.

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

<input type="text" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska""]'>

Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Name type default description
source array, function [ ] The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
items number 8 The max number of items to display in the dropdown.
minLength number 1 The minimum character length needed before triggering autocomplete suggestions
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

<button type="button" class="btn btn-primary yjloadingb" data-loading-text="Loading...">Loading state</button>
if ($(".yjloadingb")){ 
  // button state demo
    $('.yjloadingb')
        .click(function () {
            var btn = $(this)
            btn.button('loading')
            setTimeout(function () {
                btn.button('reset')
            }, 3000)
        });
}

Single toggle

Add data-toggle="button" to activate toggling on a single button.

<button type="button" class="btn" data-toggle="button">Single Toggle</button>

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Usage

Enable buttons via JavaScript:

$('.nav-tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

Heads up! You can enable auto toggling of a button by using the data-toggle attribute.
<button type="button" class="btn" data-toggle="button" >…</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
Heads up! Firefox persists the disabled state across page loads . A workaround for this is to use autocomplete="off".

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

Example

The subnavigation on the right is a live demo of the affix plugin.


Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

<div data-spy="affix" data-offset-top="200">...</div>
Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Methods

.affix('refresh')

When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

$('[data-spy="affix"]').each(function () {
  $(this).affix('refresh')
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name type default description
offset number | function | object 10 Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs).
02

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled
button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  …
</table>

Optional classes

Add any of the follow classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  …
</table>

.table-bordered

Add borders and rounded corners to the table.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  …
</table>

.table-hover

Enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  …
</table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  …
</table>

Optional row classes

Use contextual classes to color table rows.

Class Description
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm
...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
&tt;/table>

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

Legend Example block-level help text here.
<form>
  <legend>Legend</legend>
  <label>Label name</label>
  <input type="text" placeholder="Type something…">
  <span class="help-block">Example block-level help text here.</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</form>

Optional layouts

Included with Bootstrap are three optional form layouts for common use cases.

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

  • Add .form-horizontal to the form
  • Wrap labels and controls in .control-group
  • Add .control-label to the label
  • Wrap any associated controls in .controls for proper alignment
Legend
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

Supported form controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Requires the use of a specified type at all times.

<input type="text" placeholder="Text input">

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

<textarea rows="3"></textarea>

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)


<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

Inline checkboxes

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.


<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

Prepended and appended inputs

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

Default options

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

@

.00
<div class="input-prepend">
  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
</div>

Combined

Use both classes and two instances of .add-on to prepend and append an input.

$ .00
<div class="input-prepend input-append">
  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
</div>

Buttons instead of text

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.


<div class="input-append">
  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
</div>
<div class="input-append">
  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
</div>

Search form

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Search</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here
<span class="input-xlarge uneditable-input">Some value here</span>

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

<div class="form-actions">
  <button type="submit" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn">Cancel</button>
</div>

Help text

Inline and block level support for help text that appears around form controls.

Inline help

Inline help text
<input type="text"><span class="help-inline">Inline help text</span>

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line.
<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Something may have gone wrong
Please correct the error
Username is taken
Woohoo!
<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Something may have gone wrong</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Woohoo!</span>
  </div>
</div>

Add classes to an <img> element to easily style images in any project.

<img src="/web2/..." class="img-rounded">
<img src="/web2/..." class="img-circle">
<img src="/web2/..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

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

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

    Action Action

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

    Action Action

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

    Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

Markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="/web2/images/stories/300x200.jpg" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="/web2/images/stories/300x200.jpg" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Warning! Best check yo self, you're not looking too good.
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

<a href="#" class="close" data-dismiss="alert">×</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

<button type="button" class="close" data-dismiss="alert">×</button>

Dismiss alerts via javascript

Use the alerts jQuery plugin for quick and easy dismissal of alerts.


Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

Contextual alternatives

Add optional classes to change an alert's connotation.

Error or danger

Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
  ...
</div>

Success

Well done! You successfully read this important alert message.
<div class="alert alert-success">
  ...
</div>

Information

Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
  ...
</div>

Examples and markup

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Example

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

Markup

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Options

Align menus to the right and add include additional levels of dropdowns.

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Within a navbar

Within tabs


Usage

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

To keep URLs intact, use the data-target attribute instead of href="#".

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

Call the dropdowns via JavaScript:

$('.dropdown-toggle').dropdown()

Options

None

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.

Examples

Two basic options, along with two more specific variations.

Single button group

Wrap a series of buttons with .btn in .btn-group.

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Multiple button groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

<div class="btn-group btn-group-vertical">
  ...
</div>

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

Requires javascript

Button dropdowns require the Bootstrap dropdown plugin to function.

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.


Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Sizes

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

<div class="btn-group">
  <button class="btn btn-mini">Action</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Lightweight defaults Same markup, different classes

All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

Basic tabs

Take a regular <ul> of links and add .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Basic pills

Take that same HTML, but use .nav-pills instead:

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Disabled state

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Home</a></li>
  ...
</ul>

Component alignment

To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.


Stackable

As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.

Stacked tabs

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

Stacked pills

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Dropdowns

Add dropdown menus with a little extra HTML and the dropdowns javascript plugin .

Tabs with dropdowns

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Pills with dropdowns

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

Nav lists

A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

Example nav list

Take a list of links and add class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  ...
</ul>

Note For nesting within a nav list, include class="nav nav-list" on any nested <ul>.

Horizontal dividers

Add a horizontal divider by creating an empty list item with the class .divider, like so:

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

Tabbable nav

Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

Tabbable example

To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Fade in tabs

To make tabs fade in, add .fade to each .tab-pane.

Tabbable in any direction

Tabs on the bottom

Flip the order of the HTML and add a class to put tabs on the bottom.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Tabs on the left

Swap the class to put tabs on the left.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Tabs on the right

Swap the class to put tabs on the right.

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Examples

A single example shown as it might be displayed across multiple pages.

<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Library</a> <span class="divider">/</span></li>
  <li class="active">Data</li>
</ul>

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

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

Options

Disabled and active states

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

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

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

<div class="pagination">
  <ul>
    <li class="disabled"><span>Prev</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>
<div class="pagination pagination-right">
  ...
</div>

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 href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

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

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

Labels

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
<div class="well">
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!
<div class="well well-large">
  ...
</div>
Look, I'm in a well!
<div class="well well-small">
  ...
</div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

<a class="close" href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"
.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"
.pull-right {
  float: right;
}

.muted

Change an element's color to #999

class="muted"
.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
02

Take advantage of your new template that comes with 361 font icons by Font Awesome and additional 16 YJSG Icons created by wounderful Icons tool from Icomoon .

  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.

How to use

Add any of the class names from above to your <span> element. Bootstrap coders suggest <i> element, but semantically correct markup
should be <span>. It is up to you to decide. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

<span class="icon-search icon-white"></span>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.


Icon examples

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

Buttons

Button group in a button toolbar
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><span class="icon-align-left"></span></a>
<a class="btn" href="#"><span class="icon-align-center"></span></a>
<a class="btn" href="#"><span class="icon-align-right"></span></a>
<a class="btn" href="#"><span class="icon-align-justify"></span></a>
</div>
</div>
Dropdown in a button group
<div class="btn-group">
<a class="btn btn-primary" href="#"><span class="icon-user icon-white"></span> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="icon-pencil"></span> Edit</a></li>
<li><a href="#"><span class="icon-trash"></span> Delete</a></li>
<li><a href="#"><span class="icon-ban-circle"></span> Ban</a></li>
<lspan class="divider"></li>
<li><a href="#"><span class="i"></span> Make admin</a></li>
</ul>
</div>
Small button
<a class="btn btn-small" href="#"><span class="icon-star"></span></a>

Navigation

<ul class="nav nav-list">
<lspan class="active"><a href="#"><span class="icon-home icon-white"></span> Home</a></li>
<li><a href="#"><span class="icon-book"></span> Library</a></li>
<li><a href="#"><span class="icon-pencil"></span> Applications</a></li>
<li><a href="#"><span class="i"></span> Misc</a></li>
</ul>

Form fields

<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><span class="icon-envelope"></span></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
02
SmoothScroll is Mootools class that auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them. For a simple use we have created smoothscroll class yjscroll that can be used on your anchors.

<a class="yjscroll" href="#my_element">Scroll to</a>
<div id="my_element">
	...
</div>

Section 1 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Section 2 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Section 3 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Section 4 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

19
Noviembre

Polaroid:

To create polaroids from your favorite images we have added special CSS3 classes that you can use:

  • yjt_polaroid
  • yjt_polaroid yjt_tilt
  • yjt_polaroid yjt_morph

Polaroids can also use radiusb CSS class:

Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)

Image parent <a... title="My title" will be your polaroid title.

My Image      My Image      My Image


<a href="#" class="yjt_polaroid" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_tilt" title="My Image">
  <img alt="My Image" src="images/stories/260x180.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_tilt radiusb10" title="My Image">
  <img alt="My Image" src="images/stories/260x180.jpg" />
</a>
<a href="#" class="yjt_polaroid radiusb5 yjt_morph" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Polaroid Tilted Group:



Tilted group makes each polaroid tilt to oposite side of it's neighbour:

My Image      My Image      My Image      My Image


<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Image Fade:

Image fade is very useful Javascript ( Mootools lib) trick that you can use to fade out/in your images or even show different background on mouseneter:

For demo pourpose we used inline CSS but as you can see this class is very flexible and you can do some real magic by simply adding few CSS lines in your stylesheet.
You would need to use 2 data-ATTR attributes in order to acheive desired effect:

data-yjt_fadeto="FADE_TO_NUMBER (1 = 100% visible, 0.5 = 50% visible )

date-yjt_fadespeed="TRANSITION SPEED IN MILLISECONDS" (1000 = 1sec )

<a href="#" data-fadeto="0.3" data-fadespeed="300" class="yjt_fade">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" data-fadeto="0"  data-fadespeed="1000" class="yjt_fade" 
style="background:url(images/stories/key.jpg) no-repeat center center;">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Image borders:

There are several image borders that you can use:

  • bthin
  • bthick
  • yjt_border bspace
  • yjt_border bspacethick


Images can also use radiusb CSS class:

Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)

My Image My Image My Image My Image My Image
<img alt="My Image"  class="bthin" src="images/stories/160x120.jpg" />
<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
<span class="yjt_border radiusb8 bthick">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</span>
<span class="yjt_border radiusb8 bspace">
	<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
</span>
<span class="yjt_border radiusb8 bspacethick">
	<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
</span>
16
Noviembre

YJSG 1.0.14 comes with default support for HTML5 video player by using Video.js which also supports Youtube and Vimeo videos. This is a very handy feature that will let you embed video player in any Joomla! content type. We also added  .yjh5v_center  class  that you can use to center your videos within content. For custom skins and more instructions on how to use Videos.js please visit official website.



Default video setup





<video id="default_video" class="video-js vjs-default-skin yjh5v_center" controls width="640" height="264"poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
	<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>

Vimeo video setup



<video id="html5vimeo" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "vimeo"]}'>
	<source src="https://vimeo.com/50700106" type='video/vimeo'>
</video>

Youtube video setup



<video id="html5youtube" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "youtube"]}'>
	<source src="http://www.youtube.com/watch?v=9QscURRuF0g" type='video/youtube'>
</video>
15
Noviembre

Notifications examples:

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

To create notification just add one of these class names to your div:

  • yjtbox yjt_alert
  • yjtbox yjt_warning
  • yjtbox yjt_message
  • yjtbox yjt_note

You can add or remove the box closing button <span class="yjt_close"></span>
<div class="yjtbox yjt_alert">
  <span class="yjt_close"></span>
  <h4 class="yjtboxtitle">This is box title:</h4>
      My Alert...
  </div>
</div>
15
Noviembre

Boxes examples:

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

There are 6 default box class names that you can use:

  • yjtb_red
  • yjtb_green
  • yjtb_yellow
  • yjtb_blue
  • yjtb_gray
  • yjtb_clear

You can also add or remove the box closing button <span class="yjt_close"></span>
<div class="yjtbox yjtb_blue">
<h4 class="yjtboxtitle">This is box title:</h4>
	Lorem ipsum dolor sit amet.... 
</div>

Boxes mix and match:

class="yjtbox yjtb_red radiusb8 dashedb"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_green radiusb10 bordernone"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_yellow dottedb radiusb5"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_blue doubleb radiusb10"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_blue radiusb4 icon-film icon-large"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_green radiusb7 icon-comments" including closing button <span class="yjt_close"></span>

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_yellow radiusb4 nt_warning"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_gray radiusb4 nt_star"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="jtbox yjtb_green radiusb4 nt_plus"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_red radiusb4 nt_minus"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_clear radiusb4 nt_info"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_yellow radiusb4 nt_note"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_blue radiusb4 nt_plus"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_green radiusb4 nt_cam"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_red radiusb4 nt_barcode"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox yjtb_gray radiusb4 nt_calendar"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

class="yjtbox nt_info"

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

Any given box can mix and match multiple class names to acheive desired box styles. You can mix boxes with:

Borders:

  • dashedb
  • dottedb
  • doubleb
  • outsetb
  • ridgeb
  • bordernone

Border radius:

starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)

Notification icons:

  • nt_warning
  • nt_star
  • nt_plus
  • nt_minus
  • nt_info
  • nt_note
  • nt_download
  • nt_cam
  • nt_barcode
  • nt_calendar

220 FontAwesome icons:

YJSG v1.0.14 and up comes with FontAwesome icons that you can combine with any box. You can also add icon-large class to display larger icons as seen in examples above.

Closing button:

Every box can have closing button. Just include <span class="yjt_close"></span> before box title
<div class="yjtbox yjtb_red radiusb8 dashedb">
<h4 class="yjtboxtitle">This is box title:</h4>
	Lorem ipsum dolor sit amet...
</div>