• CDN
• Input Groups
• Radio Buttons
• Tabs & Pills
• Modal Dialogs
• Breakpoints
• ~~~
• Bootstrap 3.3 Components
• Bootstrap 3.3 Javascript

CDN

<!-- Version 3.3.7 Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Version 3.3.7 Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Input Groups

 <div class="form-goup">
  <div class="input-group">
   <input type="text" class="form-control" aria-label="Amount (rounded to the nearest dollar)">
   <span class="input-group-addon">.00</span>
  </div>
 </div>

 <div class="input-group">
  <label class='input-group-addon'>X</label>
  <input class="form-control" readonly value="27" />
 </div>

 <div class="form-group input-group">
  <span class="input-group-addon">$</span>
  <input type="text" value="59" name="basic-annual" class="form-control">
  <span class="input-group-addon">.00</span>
 </div>

 <form class="input-group">
  <input class="form-control" name="id" value="0" placeholder="Star ID">
  <span class="input-group-btn">
   <button class="btn btn-primary" type="submit"><i class="icon-reply"></i></button>
  </span>
 </form>

Radio Buttons

<div class="form-group form-border" style="padding: 3px 12px">
<input type="radio" name="dir" value="0">
<label class="control-label">Across</label>
<input type="radio" name="dir" value="1">
<label class="control-label">Down</label>
</div>

$('[name=dir]').eq(1).prop("checked", true).trigger("click");

let dir = $('[name=dir]:checked').val();

Tabs & Pills

 <ul class="nav nav-pills center">
   <li><a data-toggle="tab"href="#pane1">Red</a></li>
   <li><a data-toggle="tab" href="#pane2">Green</a></li>
   <li class="active"><a data-toggle="tab" href="#pane3">Blue</a></li>
 </ul>
 <div class="tab-content">
  <div id="pane1" class="tab-pane" style="background:#f00">pane 1</div>
  <div id="pane2" class="tab-pane" style="background:#0f0">pane 2</div>
  <div id="pane3" class="tab-pane active" style="background:#00f">pane 3</div>
 </div>

 <ul class="nav nav-tabs">
   <li><a data-toggle="tab"href="#paneA">Red</a></li>
   <li><a data-toggle="tab" href="#paneB">Green</a></li>
   <li class="active"><a data-toggle="tab" href="#paneC">Blue</a></li>
 </ul>
 <div class="tab-content">
  <div id="paneA" class="tab-pane fade">Pane A</div>
  <div id="paneB" class="tab-pane fade">Pane B</div>
  <div id="paneC" class="tab-pane active fade in">Pane C</div>
 </div>

Modal Dialogs

Typical markup for a modal dialog

<div class="modal fade" id="dlg-test" tabindex="-1" role="dialog">
 <div class="modal-dialog modal-sm">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title"><i class="icon-user-plus"></i> This is the title</h4>
   </div>
   <div class="modal-body">
    <form action="" method="post">
     <div class="form-group">
      <input type="text" class="form-control" name="field1" placeholder="This is field 1">
     </div>
     <div class="form-group">
      <input type="text" class="form-control" name="field2" placeholder="This is field 2">
     </div>
     <div class="form-group text-center">
      <button type="submit" class="btn primary btn-block">Save</button>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

Launch with data attributes

Test dialog To launch the dialog "automatically" use an anchor tag such as <a href="#" class="btn btn-primary btn-flat" data-toggle="modal" data-target="#dlg-test"> with data-toggle="modal" data-target="#dlg-test" attributes.

Launch programmatically with jQuery

Test dialog To take more control, we give the anchor or button tag an id or class so that we can target it: In this example, we use a button with class="... test-dlg",
<button class="btn btn-primary btn-flat test-dlg">.

Then, we can do things like populate the fields before launching the dialog:

    $('button.test-dlg').click(() => {
        // populate fields
        $('[name=field1]').val('Shane');
        $('[name=field2]').val('Bow');
        $('#dlg-test').modal('show');
        });

Bootstrap 3.3

Breakpoints

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { }

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) { }

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) { }

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) { }

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) { }

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) { }

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) { }

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) { }

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { }

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { }