Bootstrapa use cases

Bootstrap core files which you must include in your page (file bootstrap.min.js requires including jQuery library first):

<link href="bootstrap-dist/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-dist/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-dist/bootstrap.min.js"></script>

If you assign btn class and for example btn-default class to any link causes the link to render itself as a button:

<a href="#" class="btn btn-default">Link btn-default</a> - button with grayscale gradient
<a href="#" class="btn btn-primary">Link btn-primary</a> - button with dark blue gradient
<a href="#" class="btn btn-success">Link btn-success</a> - button with green gradient
<a href="#" class="btn btn-info">Link btn-info</a> - button with light blue gradient
<a href="#" class="btn btn-warning">Link btn-warning</a> - button with orange gradient
<a href="#" class="btn btn-danger">Link btn-danger</a> - button with red gradient
<a href="#" class="btn btn-link">Link btn-link</a> - standard link

Link btn-default Link btn-primary Link btn-success Link btn-info Link btn-warning Link btn-danger Link btn-link

Additionally you can assign to links classes changing the size of them:
btn-lg - large size
btn-sm - small size
btn-xs - very small size
Lack of mentioned classes causes link to render in standard size.
btn-lg size standard size btn-sm size btn-xs size

Helper classes that modify button's behavior:
btn-block - button spreads the hole grid width
active - button gains appearance informing that the button is depressed
disabled - button gets unclickable and is displayed in lighten color; btn-block
active disabled

There are two container classes in Bootstrap: "container" oraz "container-fluid". The first creates container of fixed width which is centered on the screen. The latter creates container spreading the hole width of the window which is resized together with window resizing.

The "row" class is used to creating grid. There may be created any number of rows but all of them have to be placed in a container. The good practice is to place all rows inside one container.

Bootstrap provides four kinds of class prfixes that allow you to create columns:

1. col-xs - for very small size screens - screen width < 768 pixels - smartphones
2. col-sm - for small size screens - screen width >= 768 pixels - tablets
3. col-md - for medium size screens- screen width >= 992 pixels - desktops
4. col-lg - for large size screens - screen width >= 1200 pixels - large desktops

"text-center" class centers a text in the container.

Tablets and smartphones can display webpages in a portrait or landscape layout. The tablet's landscape layout acts as a medium size screen (col-md) however its portrait layout acts as small size screen (col-sm). In case of smartphones both display modes are treated as a very small size screen (col-xs). For phablets the landscape layout acts as small size screen (col-sm).

Classes providing column movement:

1. col-xs-offset-
2. col-sm-offset-
3. col-md-offset-
4. col-lg-offset-

Classes providing column movement to the left side:

1. col-xs-pull-
2. col-sm-pull-
3. col-md-pull-
4. col-lg-pull-

Classes providing column movement to the right side:

1. col-xs-push-
2. col-sm-push-
3. col-md-push-
4. col-lg-push-

Example of creating page header together with the subtitle (between tags <small></small>):

<div class="container">
    <div class="page-header">
        <h1>Chapter 1. <small>First meeting with Bootstrap components</small></h1>
    </div>
</div>

Panel creating:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            WARNING
        </div>
        <div class="panel-body">
            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. 
        </div>
        <div class="panel-footer">
            <a href="#" class="btn btn-danger btn-sm">OK</a>
            <a href="#" class="btn btn-default btn-sm">Cancel</a>
        </div>
    </div>
</div>

There are several kinds of panel's color versions:

• panel-default - grey
• panel-primary - blue
• panel-success - green
• panel-info - light-blue
• panel-warning - orange
• panel-danger - light-pink

Exampe of media object:

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://progmar.net.pl/img/marcin_zaleczny_mini.jpg" alt="Marcin Załęczny"/>
    </a>
    <div class="media-body">
        <h4 class="media-heading">Fantastic work!</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </div>
</div>

Example of miniatures:

<div class="col-xs-3">
    <div class="thumbnail">
        <img src="/img/marcin_zaleczny_mini.jpg">
        <div class="caption">
            <h3>Marcin Załęczny</h3>
            <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.</p>
            <p><a href="#" class="btn btn-primary">More</a></p>
        </div>
    </div>
</div>

Example of simple lists (highlighted and non-highlighted):

<div class="row">
    <div class="col-xs-3">
        <ul class="list-group">
            <li class="list-group-item">Received <span class="badge">14</span></li>
            <li class="list-group-item">Sent <span class="badge">4</span></li>
            <li class="list-group-item">Drafts <span class="badge">7</span></li>
            <li class="list-group-item">Removed <span class="badge">24</span></li>
            <li class="list-group-item">Spam <span class="badge">134</span></li>
        </ul>
    </div>

    <div class="col-xs-3">
        <div class="list-group">
            <a href="#" class="list-group-item" style="color:#333">Received <span class="badge">14</span></a>
            <a href="#" class="list-group-item" style="color:#333">Sent <span class="badge">4</span></a>
            <a href="#" class="list-group-item" style="color:#333">Drafts <span class="badge">7</span></a>
            <a href="#" class="list-group-item" style="color:#333">Removed <span class="badge">24</span></a>
            <a href="#" class="list-group-item" style="color:#333">Spam <span class="badge">134</span></a>
        </div>
    </div>
</div>

List elements can be coloured by assigning following classes to them:

• list-group-item-success
• list-group-item-info
• list-group-item-warning
• list-group-item-danger

for example:

<a href="#" class="list-group-item list-group-item-success">Received <span class="badge">14</span></a>

Received 14

List elements can be filled not only by plain text but by headers and text. Below is the example of complex list:

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">Header</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Header</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Header</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Header</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at magna posuere neque euismod euismod. Quisque ac commodo augue. Ut ut est id lectus varius feugiat ut eu nulla.</p>
    </a>
</div>

If we assign "active" class to any list element the it will be exposed with blue color:

<a href="#" class="list-group-item active">element</a>

element

Navigation tabs:

<ul class="nav nav-tabs">
    <li class="active"><a href="#">About us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Interesting webpages</a></li>
</ul>

• About us
• News
• Interesting webpages

Navigation buttons:

<ul class="nav nav-pills">
    <li class="active"><a href="#">About us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Interesting webpages</a></li>
</ul>

• About us
• News
• Interesting webpages

The nav class is common for both tabs and buttons.

If we assign the "nav-stacked" class then the buttons wil be placed vertically:

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">About us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Interesting webpages</a></li>
</ul>

• About us
• News
• Interesting webpages

Horizontal navigation menu in the footer:

<nav class="nav-footer">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">About us</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Interesting webpages</a></li>
    </ul>
</nav>

Navigation bar with dropdown menu:

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Sitepoint</a>
        </div>
        
        <div class="collapse navbar-collapse" id="mynavbar-content">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Main page</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About us <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Administration</a></li>
                        <li><a href="#">Developers team</a></li>
                        <li><a href="#">Designers team</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Investors</a></li>
                        <li><a href="#">Partners</a></li>
                    </ul>
                </li>
                <li><a href="#">Prcelist</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Write to us</a></li>
            </ul>
        </div>
    </div>
</div>

Breadcrumb navigation:

<ol class="breadcrumb">
    <li><a href="#">Main page</a></li>
    <li><a href="#">About us</a></li>
    <li class="active">About the author</li>
</ol>

1. Main page
2. About us
3. About the author

Label example:

<h3>Bootstrap - label example! <span class="label label-default">News</span></h3>

Label label-default News

Color classes for labels:

• label-default - gray
• label-primary - blue
• label-success - green
• label-info - light-blue
• label-warning - orange
• label-danger - red

Use example of glyphicon:

<h1><span class="glyphicon glyphicon-heart"></span></h1>

Frame example:

<div class="well">
    <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>

There are following extra classes for frames:

• well-lg - large inner padding
• well-sm - small inner padding

Badge example (badges are mainly used for displaying numbers):

<span class="badge">23</span>
<a href="#" class="btn btn-primary btn-lg">Received <span class="badge">23</span></a>

23
Received 23

Forms:
Every field label and the input element requires div element with assigned "form-group" class:

<form class="form">
    <div class="form-group">
        <label for="nameField">Name</label>
        <input type="text" class="form-control" id="nameField" placeholder="Your name" />
    </div>
</form>

Name

"form-control" class assigned to the input element makes it spread all over the container width.

More complex form:

<form class="form">
    <div class="form-group">
        <label for="nameField">Name</label>
        <input type="text" class="form-control" id="nameField" placeholder="Your name" />
    </div>

    <div class="form-group">
        <label for="emailField">E-mail</label>
        <input type="email" class="form-control" id="emailField" placeholder="Your e-mail" />
    </div>

    <div class="form-group">
        <label for="phoneField">Phone</label>
        <input type="text" class="form-control" id="phoneField" placeholder="Your telephone number" />
    </div>

    <div class="form-group">
        <label for="descField">Description</label>
        <textarea type="text" class="form-control" id="descField" placeholder="Your notes"></textarea>
    </div>
    
    <button type="submit" class="btn btn-primary">Send</button>
    <button type="reset" class="btn btn-default">Reset</button>
</form>

Name

E-mail

Phone

Description

Send Reset

Form with horizontal layout of field's labels:

<form class="form-horizontal">
    <div class="form-group">
        <label for="nameField" class="col-xs-2">Name</label>
        <div class="col-xs-10">
            <input type="text" class="form-control" id="nameField" placeholder="Your name" />
        </div>
    </div>

    <div class="form-group">
        <label for="emailField" class="col-xs-2">E-mail</label>
        <div class="col-xs-10">
            <input type="email" class="form-control" id="emailField" placeholder="Your e-mail" />
        </div>
    </div>

    <div class="form-group">
        <label for="phoneField" class="col-xs-2">Phone</label>
        <div class="col-xs-10">
            <input type="text" class="form-control" id="phoneField" placeholder="Your telephone number" />
        </div>
    </div>

    <div class="form-group">
        <label for="descField" class="col-xs-2">Description</label>
        <div class="col-xs-10">
            <textarea type="text" class="form-control" id="descField" placeholder="Your notes"></textarea>
        </div>
    </div>
    
    <div class="col-xs-10 col-xs-offset-2">
        <button type="submit" class="btn btn-primary">Send</button> <button type="reset" class="btn btn-default">Reset</button>
    </div>    
</form>

Name

E-mail

Phone

Description

Send Reset

One line form:

<div class="well well-sm">
    <form class="form-inline">
        <div class="form-group">
            <input type="email" class="form-control" id="emailField" placeholder="Enter your e-mail">
        </div>
        
        <div class="form-group">
            <input type="password" class="form-control" id="passwordField" placeholder="Enter password">
        </div>
        
        <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
        </div>
                
        <div class="radio">
            <label>
              <input type="radio" value="m" name="plec"> Male
            </label>
            <label>
              <input type="radio" value="k" name="plec"> Female
            </label>
        </div>
        
        <button type="submit" class="btn btn-primary">Register</button>
    </form>
</div>

Helper classes for form input elements:

• has-success - element is green
• has-error - element is red
• has-warning - element is brown

for example:

<form class="form">
    <div class="form-group has-success">
        <label for="nameField1">Name</label>
        <input type="text" class="form-control" id="nameField1" placeholder="Your name" />
    </div>
    <div class="form-group has-error">
        <label for="nameField2">Name</label>
        <input type="text" class="form-control" id="nameField2" placeholder="Your name" />
    </div>
    <div class="form-group has-warning">
        <label for="nameField3">Name</label>
        <input type="text" class="form-control" id="nameField3" placeholder="Your name" />
    </div>
</form>

Name

Name

Name

Additionally you may use following classes for changing input size:

• input-lg - element larger then default
• input-sm - element smaller then default

for example:

<form class="form">
    <div class="form-group has-success">
        <label for="nameField1">Name</label>
        <input type="text" class="form-control input-lg" id="nameField1" placeholder="Your name" />
    </div>
    <div class="form-group has-error">
        <label for="nameField2">Name</label>
        <input type="text" class="form-control" id="nameField2" placeholder="Your name" />
    </div>
    <div class="form-group has-warning">
        <label for="nameField3">Name</label>
        <input type="text" class="form-control input-sm" id="nameField3" placeholder="Your name" />
    </div>
</form>

Name

Name

Name

Dropdown menu outside the navbar:

<div class="dropdown">
    <a data-toggle="dropdown" data-target="#" href="#">
        Menu <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Link 1.</a></li>
        <li><a href="#">Link 2.</a></li>
        <li><a href="#">Link 3.</a></li>
        <li><a href="#">Link 4.</a></li>
    </ul>
</div>

Menu with buttons:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Main page</a></li>
  <li class="dropdown" id="myDropdown">
        <a class="myDropdownHandle" data-toggle="dropdown" data-target="#" href="http://www.google.com">
            Profile <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1.</a></li>
            <li><a href="#">Link 2.</a></li>
            <li><a href="#">Link 3.</a></li>
            <li><a href="#">Link 4.</a></li>
        </ul>
  </li>
  <li><a href="#">Messages</a></li>
</ul>

• Main page
• Profile
  • Link 1.
  • Link 2.
  • Link 3.
  • Link 4.
• Messages

Connecting event handlers for opening/closing the menu:

$(document).ready(function(){
    $('#myDropdown').on('show.bs.dropdown', function () {
       console.log("Opening the menu...");
    });

    $('#myDropdown').on('shown.bs.dropdown', function () {
       console.log('Menu opened...');
    });

    $('#myDropdown').on('hide.bs.dropdown', function () {
       console.log('Closing the menu...');
    });

    $('#myDropdown').on('hidden.bs.dropdown', function () {
       console.log('Menu closed...');
    });
    
    // automatic opening the menu after the page is loaded
    $('.myDropdownHandle').dropdown('toggle');
});

Connect events for the menu above

Arrow down :

<span class="caret"></span>

or :

<span class="glyphicon glyphicon-chevron-down"></span>

Display the message:

<div class="alert alert-success">
    Transaction was successfully executed.
</div>

Other colors for the message are available by applying classes before:

• alert-success
• alert-info
• alert-danger
• alert-warning

Message box with close button:

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">×</button>
    Transaction was successfully executed. Go to <a href="#" class="alert-link">your account</a>.
</div>

If we want to insert link into the message then we have to apply "alert-link" class to it. The color of the link will be adjusted to the message box color.
You can close the message box from javascript by following call:

$('.alert').alert('close');

Close message box above
With message boxes are connected following events:

• close.bs.alert - fired just before the box is closed
• closed.bs.alert - fired after the box is closed

Options controls:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="checkbox"> Option 1.
    </label>
    <label class="btn btn-default">
        <input type="checkbox"> Option 2.
    </label>
    <label class="btn btn-default">
        <input type="checkbox"> Option 3.
    </label>
</div>

Example:

Option togglers (there may be depressed only one element of button group with the same value of name attribute):

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-info" id="mybutton1">
        <input type="radio" name="options"> Option 1.
    </label>
    <label class="btn btn-info" id="mybutton2">
        <input type="radio" name="options"> Option 2.
    </label>
    <label class="btn btn-info" id="mybutton3">
        <input type="radio" name="options"> Option 3.
    </label>
</div>

Example:

Toggling the button with the Javascript:

$('#mybutton1').button('toggle');

Press the first button

Example of changing button's accessibility for the time of loading some data (and restoring its state after data is loaded): Load data

$('#myLoadingButton').click(function() {
    $this = $(this)
    $this.button('loading');
    setTimeout(function() { $this.button('reset'); }, 3000);
    //setTimeout(function() { $this.button('complete'); }, 3000);
});

Tabs with connected panels:

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Main page</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>
<!-- Panels  -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="home">
          <h3>Main page</h3>
    </div>
    <div class="tab-pane fade" id="profile">
          <h3>User profile</h3>
    </div>
    <div class="tab-pane fade" id="messages">
          <h3>Alerts centre</h3>
    </div>
    <div class="tab-pane fade" id="settings">
          <h3>Settings panel</h3>
    </div>
</div>

• Main page
• Profile
• Messages
• Settings

Tabs plugin handles following events:

• show.bs.tab - just before the tab is opened
• shown.bs.tab - after the tab was opened

Accordion ("in" class makes the specified element roll-down):

<div class="panel-group" id="accordion">

    <!-- Panel 1 -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Accordion, item 1.
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
              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>
      </div>
    </div>

    <!-- Panel 2 -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            Accordion, item 2.
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body">
              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>
      </div>
    </div>

    <!-- Panel 3 -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            Accordion, item 3.
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">
              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>
      </div>
    </div>
  </div>

<script type="text/javascript">
    // makes that every accordion item with class "collapse" will not roll-up other items after it was clicked
    $('.collapse').collapse({
        toggle: false
    });

    // toggles state of all accordion items with class "collapse"
    $('.collapse').collapse('toggle');

    // roll down all accordion items with class "collapse"
    $('.collapse').collapse('show');
    
    // roll up all accordion items with class "collapse"
    $('.collapse').collapse('hide');
</script>

Events connected with collapse plugin:

• show.bs.collapse - fired just before item rolls down
• shown.bs.collapse - fired after item rolls down
• hide.bs.collapse - fired just before item rolls up
• hidden.bs.collapse - fired after item rolls up

for example:

$('.collapse').on('show.bs.collapse', function() {
    console.log('Item is about to roll down');
});

Tooltip: Show tooltip

<button type="button" class="btn btn-warning tooltipButton" data-toggle="tooltip" data-placement="bottom" title="This is a short message for tooltip">Show tooltip</button>

Available values for tooltip parameters:

• data-toggle = tooltip
• data-placement = left | right | top | bottom
• title = tooltip text

To make tooltip to work you must enable it in javascript:

$('.tooltipButton').tooltip();

Options of tooltip function:

• $('.tooltipButton').tooltip({animation: true}); - animation of tooltip showing / hiding
• $('.tooltipButton').tooltip({html: true}); - value of title attribute will be treated as html code
• $('.tooltipButton').tooltip({placement:'right'}); - tooltip's placement (left|right|top|bottom|auto)
• $('.tooltipButton').tooltip({title:'tekst'}); - tooltip text
• $('.tooltipButton').tooltip({trigger:'hover'}); - specify event that fires tooltip. Available values: click | focus | hover | manual. This values may be concatenated, for example: 'click hover' or 'click hover focus'
• $('.tooltipButton').tooltip({delay:'300'}); - delay in milliseconds for tooltipa showing
• $('.tooltipButton').tooltip({container:'body'}); - container that will be parent for tooltip's content
• $('.tooltipButton').tooltip('show'); - showing tooltipa
• $('.tooltipButton').tooltip('hide'); - hiding tooltipa
• $('.tooltipButton').tooltip('toggle'); - toggle tooltip's visibility
• $('.tooltipButton').tooltip('destroy'); - removes tooltip from the container. After tooltip is removed it cannot be used

Events connected with tooltip:

• show.bs.tooltip - fired just before tooltip is shown
• shown.bs.tooltip - fired after tooltip is shown
• hide.bs.tooltip - fired when tooltip is about to hide
• hidden.bs.tooltip - fired after tooltip is hidden

for example:

$('.tooltipButton').on('show.bs.tooltip', function() {
    console.log('Tooltip is about to show');
});

Popovers: Click me to display the popover!

<button type="button" class="btn btn-danger popoverButton" data-toggle="popover" data-placement="bottom" data-content="Lorem Ipsum Dolor." title="This is a popover">Click me to display the popover!</button>

Available parameter values:

• data-toggle = popover
• data-placement = left | right | top | bottom
• title = popover's caption
• data-content = popover's content

You must first initialize popover before you can use it:

$('.popoverButton').popover();

Popover function takes the same parameters as the tooltip function for tooltips.

Events connected with popovers:

• show.bs.popover - fired just before popover is shown
• shown.bs.popover - fired after popover is shown
• hide.bs.popover - fired when popover is about to hide
• hidden.bs.popover - fired after popover is hidden

for example.:

$('.popoverButton').on('show.bs.popover', function() {
    console.log('Popover is about to show');
});

Bootsrap picture carousel:

<div id="planesCarousel" class="carousel slide" data-ride="carousel" style="width:640px">

  <!-- Handles -->
  <ol class="carousel-indicators">
      <li data-target="#planesCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#planesCarousel" data-slide-to="1"></li>
      <li data-target="#planesCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Slide container -->
  <div class="carousel-inner">
      <div class="item active">
          <img src="/progmar.net.pl/img/demo/samoloty/mysliwiec_01.jpg">
          <div class="carousel-caption">
              <h3>Fighter 1</h3>
              <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.</p>
          </div>
      </div>

      <div class="item">
          <img src="/progmar.net.pl/img/demo/samoloty/mysliwiec_02.jpg">
          <div class="carousel-caption">
              <h3>Fighter 2</h3>
              <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.</p>
          </div>
      </div>

      <div class="item">
          <img src="/progmar.net.pl/img/demo/samoloty/mysliwiec_03.jpg">
          <div class="carousel-caption" >
              <h3>Fighter 3</h3>
              <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.</p>
          </div>
      </div>
  </div>

  <!-- Left/Right controls -->
  <a class="left carousel-control" href="#planesCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#planesCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

You can configure your carousel in Javascript:

var options = {
...
};
$('#planesCarousel').carousel(options);

Available options:

• interval: 1000 - time in milliseconds, after which slides change
• pause: 'hover' - it causes preventing slides change if mouse pointer is hovered the slide
• wrap: true - it causes looping to the first slide after last slide is about to change

Events connected with carousel:

• slide.bs.carousel - fired just before slide is changed
• slid.bs.carousel - fired after slide was changed

for example:

$('#planesCarousel').on('slide.bs.carousel', function() {
    console.log("Slide is about to change");
});

Button which allow to display modal dialog box: Show modal dialog box

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Show modal dialog box
</button>

Below there is a html source code for modal dialog. It should be placed as a child of body element:

<div class="modal fade" id="myModal">
      <div class="modal-dialog">
          <div class="modal-content">
              <!-- Caption -->
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">×</button>
                  <h4 class="modal-title">Hello again!</h4>
              </div>
              <!-- Content -->
              <div class="modal-body">
                  <h1>Dear users!</h1>
              </div>
              <!-- Footer -->
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save</button>
              </div>
          </div>
      </div>
</div>

If we don't assign helper class responsible for size of the modal dialog to element "modal-dialog", then the element will be of size 600px. Available helper classes:

• modal-lg - window of size 900px
• modal-sm - window of size 300px

Modal dialog box can be displayed from within javascript:

var options = {
    backdrop: true,
    keyboard: false,
    show: true,
    remote: false
}
$('#myModal').modal(options);

Modal method can have following options:

• backdrop - boolean value or string 'static'. Boolean value defines if there should be displayed gray half opacity div of size entire window below the modal box. By setting value of 'static' we cause that we cannot close modal dialog box by clicking somewhere outside modal box.
• keyboard - if true then modal dialog box can be closed by pressing ESC key.
• show - this value is responsible for showing/hiding the modal dialog.
• remote - if true and the element which drives modal box showing is a then the page specified in its href attribute will be loaded to dialog modal-body element.

Events connected with modal dialog boxes:

• show.bs.modal - fired just before modal dialog is shown
• shown.bs.modal - fired after modal dialog box is shown
• hide.bs.modal - fired just before modal dialog is hidden
• hidden.bs.modal - fired after modal dialog is hidden
• loaded.bs.modal - fired after the remote content was loaded into modal-body

for example.:

$('#myModal').on('show.bs.modal', function() {
    console.log('Modal dialog is about to show');
});