DataTables

DataTables

Turn tables into pure awesomeness.

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

    <script type="text/javascript">
        (function () {
            $('#dataTable-example').dataTable();
        })();
    </script>
    

Chosen

Selects

Use the default option, or add multiple to show multiple options at once.


    <select class="form-control chosen">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <select multiple class="form-control chosen">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <script type="text/javascript">
        (function () {
            $('.chosen').chosen();
        })();
    </script>
    

Media Blocks

Media Blocks

Used to show information in a block such as a summary for a article. Can be used with or without an image.

Media Block Title

Wednesday February 26th, 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Media Block Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    <div class="media-block">
        <div class="media-thumbnail">
            <img src="http://placehold.it/300x300">
        </div>
        <div class="media-content">
            <h2 class="media-title"><a href="#">Media Block Title</a></h2>

            <div class="media-meta">Wednesday February 26th, 2014</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="media-block">
        <div class="media-content">
            <h2 class="media-title">Media Block Title</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    

Media Lists

Use this to show a list of information such as a feed from Facebook, Twitter, or a Blog.

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    <div class="media-block-list">
        <ul class="media-list">
            <li class="media">
                <a class="pull-left" href="#">
                    <img src="http://placehold.it/50x50">
                </a>

                <div class="media-body">
                    <h4 class="media-heading"><a href="#">Media heading</a></h4>

                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                </div>
            </li>
            <li class="media">
                <a class="pull-right" href="#">
                    <img src="http://placehold.it/50x50">
                </a>

                <div class="media-body">
                    <h4 class="media-heading"><a href="#">Media heading</a></h4>

                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                </div>
            </li>
            <li class="media">
                <div class="media-body">
                    <h4 class="media-heading">Media heading</h4>

                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                </div>
            </li>
        </ul>
    </div>
    

Section Header

Section Header

Section Header Example

Section Header Example
    <h2 class="section-header">Section Header Example</h2>

    <div class="section-header">Section Header Example</div>
    

Example

Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.

    <input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
    

Usage

Via data attributes

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

Via JavaScript

Call the input mask via javascript:

    $('.inputmask').inputmask({
    mask: '999-99-999-9999-9'
    })
    

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-mask="999-99-999-9999-9".

Name type default description
mask string '' A string of formatting and literal characters, defining the input mask (see below).
placeholder string '_' The character that is displayed where something needs to be typed.

Format

Each typed character needs to match exactly one character in the mask option.

Character Description
9 Number
a Letter
? Alphanumeric
* Any character

Methods

.inputmask(options)

Initializes an input element with an input mask.

Examples

The file input plugin allows you to create a visually appealing file or image input widgets.

File input widgets

Select fileChange Remove
    <div class="fileinput fileinput-new" data-provides="fileinput">
        <div class="input-group">
            <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i>
                <span class="fileinput-filename"></span></div>
            <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span
                    class="fileinput-exists">Change</span><input type="file" name="..."></span>
            <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
        </div>
    </div>
    
Select fileChange ×
    <div class="fileinput fileinput-new" data-provides="fileinput">
        <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span
                class="fileinput-exists">Change</span><input type="file" name="..."></span>
        <span class="fileinput-filename"></span>
        <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
    </div>
    

Image upload widgets

When uploading an image, it's possible to show a thumbnail instead of the filename.

Select imageChange Remove
    <div class="fileinput fileinput-new" data-provides="fileinput">
        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
        <div>
            <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span
                    class="fileinput-exists">Change</span><input type="file" name="..."></span>
            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
        </div>
    </div>
    
Generic placeholder thumbnail
Select imageChange Remove
    <div class="fileinput fileinput-new" data-provides="fileinput">
        <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
            <img data-src="holder.js/100%x100%" alt="...">
        </div>
        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
        <div>
            <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span
                    class="fileinput-exists">Change</span><input type="file" name="..."></span>
            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
        </div>
    </div>
    

Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.


Usage

Add .fileinput to the container. Elements inside the container with .fileinput-new and .fileinput-exists are shown or hidden based on the current state. A preview of the selected file is placed in .fileinput-preview. The text of .fileinput-filename gets set to the name of the selected file.

The file input widget should be placed in a regular <form> replacing a standard <input type="file">. The server side code should handle the file upload as normal.

Via data attributes

Add data-provides="fileinput" to the .fileinput element. Implement a button to clear the file with data-dismiss="fileinput". Add data-trigger="fileinput" to any element within the .fileinput widget to trigger the file dialog.

Via JavaScript

$('.fileinput').fileinput()

Layout

Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width and max-height.

Options

Name type description
name string Use this option instead of setting the name attribute on the <input> element to prevent it from being part of the post data when not changed.

Methods

.fileinput(options)

Initializes a file upload widget.

.fileinput('clear')

Clear the selected file.

.fileinput('reset')

Reset the form element to the original value.

Events

Event Type Description
change.bs.fileinput This event is fired after a file is selected.
clear.bs.fileinput This event is fired when the file input is cleared.
reset.bs.fileinput This event is fired when the file input is reset.

jQuery UI

Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.datepicker.js

See jQuery UI's website for more information on the included modules.

Datepicker

    <div id="datepicker"></div>
    <script type="text/javascript">
        (function () {
            $("#datepicker").datepicker({
                inline: true
            });
        })();
    </script>
    

DateTime Picker

http://trentrichardson.com/examples/timepicker/

Modal Forms

Clean forms inside of a modal.

Demo

    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <form class="form-horizontal" role="form">
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">Email</label>

                            <div class="input-wrap col-sm-8">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-4 control-label">Password</label>

                            <div class="input-wrap col-sm-8">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    

Confirm

    <button type="button" id="confirm-example" class="btn btn-danger">Delete</button>

    <script type="text/javascript">
        (function () {
            $('#confirm-example').click(function (e) {
                $.confirm(function (event) {
                    if (event.confirmed) {
                        alert('Item is ok to delete.');
                    } else {
                        alert('Item is NOT ok to delete.');
                    }
                });
            });
        })();
    </script>
    

Options

Name type default description
title string 'Confirmation' Title of the modal window.
message string|html 'Are you sure?' The message that will appear in the modal body.
button.cancel html|string 'Cancel' Text for the cancel button.
selector string 'body' The container to attach the modal window.
tempate string '' The HTML template used for the modal window.