All notes
Bootstrap

Intro

File structure

bootstrap/
 ├── css/
 │   ├── bootstrap.css
 │   ├── bootstrap.min.css
 ├── js/
 │   ├── bootstrap.js
 │   ├── bootstrap.min.js
 └── img/
     ├── glyphicons-halflings.png
     └── glyphicons-halflings-white.png

Examples

Minimum

getBootstrap.com: css.


<!DOCTYPE html>
<html lang="en"><!-- HTML5 doctype -->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile first -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Fluid

GetBootstrap: Fluid.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
          </div>
          <div class="row-fluid">
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
          <div class="row-fluid">
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Company 2013</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

FAQ

Switch to Bootstrap4

www.w3school.com/bootstrap4.

How to exam the version

SO: how to identify bootstrap version.

In the top of the bootstrap.css you should have comments like the below:

/*!
 * Bootstrap v2.3.1

Basics

Images

Embed

The following example creates a responsive video by adding an .embed-responsive-item class to an "iframe" tag (the video will then scale nicely to the parent element). The containing "div" defines the aspect ratio of the video:



<div class="container">
  <h2>Responsive Embed</h2>
  <p>Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio</p>
  <!-- 16:9 aspect ratio -->
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>

  <!-- 4:3 aspect ratio -->
  <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="..."></iframe>
  </div>
</div>

Tables

w3schools.


<table class="table table-hover">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

The contextual classes that can be used are:

Class 	Description
.active 	Applies the hover color to the table row or table cell
.success 	Indicates a successful or positive action
.info 	Indicates a neutral informative change or action
.warning 	Indicates a warning that might need attention
.danger 	Indicates a dangerous or potentially negative action

".table-responsive" class creates a responsive table. The table will then scroll horizontally on small devices (under 768px).


<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Components

getBootstrap.com: components.

Form

getbootstrap.com: components: forms.

To get form button right-align, set class="btn pull-right". See "Helper classes".

Since Bootstrap utilizes the HTML5 doctype, all inputs must have a type attribute.

Layout

Form groups



<form>
  <div class="form-group">
    <label class="col-form-label" for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label class="col-form-label" for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Form rows



<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-legend col-sm-2">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            Option two can be something else and selecting it will deselect option one
          </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            Option three is disabled
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Check me out
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Controls

Selects

getbootstrap.com: CSS.


<!-- Multiple: can select multiple items. -->
<select class="form-control" multiple id="test" name="test">
  <option value="0">item0</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
  <option value="4">item4</option>
</select>

<!-- jQuery -->
console.log(form.find("select#test").val());

Good examples



<form action="/examples/actions/confirmation.php" method="post">
  <h2>Sign Up</h2>
  <p>Please fill in this form to create an account!</p>
  <hr>
  <div class="form-group">
    <div class="row">
      <div class="col-xs-6"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
      <div class="col-xs-6"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
    </div>          
  </div>
  <div class="form-group">
    <input type="email" class="form-control" name="email" placeholder="Email" required="required">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" name="password" placeholder="Password" required="required">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
  </div>        
  <div class="form-group">
    <label class="checkbox-inline"><input type="checkbox" required="required"> I accept the <a href="#">Terms of Use</a> &amp; <a href="#">Privacy Policy</a></label>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
  </div>
</form>

Popovers



<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top/bottom/right/left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top/bottom/right/left
</button>

<!-- Dimissible popover ---------->
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})
<!-- For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute. -->

Customize

stackoverflow: customizing bootstrap popover arrow.



.popover.top > .arrow:after { border-top-color: yourColorHere; }

Tooltips

getbootstrap.com: tooltips.

Quick start



<div class="container">
  <!-- The data-toggle="tooltip" activates the tooltip.
  The title attribute specifies the text that should be displayed inside the tooltip.
  -->
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

  <!-- data-placement: set the position. data-html=true: so the title can have html within. -->
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip(); <!-- Default behaviour: hover to turn on. -->
});
</script>

The HTML markup is regenerated by the tooltip plugin as follow:



<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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
animation;	boolean;	true
container;	string | element | false;	false
html;	boolean;	false
placement;	string | function;	'top'
title;	string | element | function;	''; Default title value if title attribute isn't present.
trigger;	string;	'hover focus';	How tooltip is triggered - click | hover | focus | manual.
offset;	number | string;	0;	Offset of the tooltip relative to its target.

Methods: hide, show, toggle,...

show/hide/toggle, before the shown/hidden.bs.tooltip event occurs.

enable/disable/toggleEnabled.

dispose, Hides and destroys an element’s tooltip.


<div class="container">
  <h3>Popover Methods</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Tooltip Example</a>
  <div>
    <p>Click on the buttons to manually control the tooltip above:</p>
    <button type="button" class="btn btn-primary">Show</button>
    <button type="button" class="btn btn-warning">Hide</button>
    <button type="button" class="btn btn-success">Toggle</button>
    <button type="button" class="btn btn-danger">Destroy</button>
  </div>   
</div>

<script>
$(document).ready(function(){
  $(".btn-primary").click(function(){
    $("[data-toggle='tooltip']").tooltip('show');
  });
  $(".btn-warning").click(function(){
    $("[data-toggle='tooltip']").tooltip('hide');
  });
  $(".btn-success").click(function(){
    $("[data-toggle='tooltip']").tooltip('toggle');
  });
  $(".btn-danger").click(function(){
     $("[data-toggle='tooltip']").tooltip('destroy');
  });
});
</script>

Bugfix: set a new title

SO.



// Instantly creating a tooltip after destroying an old one doesnot work.
// The complete callback passed in destory() is run after the transition (150ms). bootstrap.Tooltip.TRANSITION_DURATION is 150.
$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');

Layout

Grid system

getbootstrap.com: grid.

.container, .container-fluid

Containers provide a means to center your site’s contents. Use ".container" for fixed width or ".container-fluid" for full width.

wcfNote: ".container" uses media breakpoints, but ".container-fluid" doesn't use it, which is the only difference. So when the screen is small enough, they behave as the same; but when the screen is wide enough, the ".container" will hold on to some fixed width (thus the left/right margins are not empty), but the ".container-fluid" will always have 0 left/right margins.

.row

Rows are horizontal groups of columns that ensure your columns are lined up properly: ".row".

You can remove the margin from rows and padding from columns with ".no-gutters" on the ".row".

.col-

Tiers, responsive breakpoints

There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small, "xs"), small ("sm"), medium ("md"), large ("lg"), and extra large ("xl").

Extra small <576px
Small ≥576px
Medium ≥768px
Large ≥992px
Extra large ≥1200px

So in Bootstrap's 12-column grid... SO: what is the difference among col-lg, col-md, col-sm: col-sm-3 is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels) col-md-3 is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels)

For the same size column on all tiers, just set the width for the smallest viewport:



<div class="col-lg-3 col-md-3 col-sm-3">..</div>
<!-- is the same as -->
<div class="col-sm-3">..</div>

<!-- Because col-sm-3 means "3 units on sm and up", unless specifically overridden by a larger tier. -->

Other types



<!-- Variable width content -->
<!-- Using the col-{breakpoint}-auto classes -->

Why the coloums not working

SO: bootstrap rows and columns not working.

I had the exact same problem. I used col-sm-* instead of col-md-* and it works.

wcfNote: if you use col-xs-*, then when web page shrinks to the narrowest (e.g. on phone), the columns will still hold.

Utilities

Spacing

getbootstrap.com: spacing.

{property}{sides}-{size}

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of (wcfNote: $spacer is 1rem):

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer-x * .25 or $spacer-y * .25
2 - (by default) for classes that set the margin or padding to $spacer-x * .5 or $spacer-y * .5
3 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
4 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
5 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

Examples:
mx-3: margin-left, margin-right

Alternatives

Bulma

Bulma: an alternative to Bootstrap.