nonlinear

testing this shit

nonlinear

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active"> <img src="http://placehold.it/500x300" >
      <div class="carousel-caption">
        <p>[Caption for First Image]</p>
      </div>
    </div>
    <div class="item"> <img src="http://placehold.it/500x300">
      <div class="carousel-caption">
        <p>[Caption for Second Image]</p>

nonlinear

<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">[First Title]</a> </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner"> [Content] </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> [Second Title] </a> </div>
    <div id="collapseTwo" class="accordion-body collapse">

nonlinear

<div class="btn-group">
	<a href="#" class="btn">%|</a>
	<a class="btn dropdown-toggle" data-toggle="dropdown">
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
		<li><a href="#">[First Choice]</a></li>
		<li><a href="#">[Second Choice]</a></li>
		<li><a href="#">[Third Choice]</a></li>
	</ul>

nonlinear

<!-- Options:
position: replace .btn-group with .btn-group-vertical
size: .btn-group-lg, .btn-group-sm, or .btn-group-xs
checkbox, radio:
1. add data-toggle="buttons" on div
2. checkbox button: <label class="btn btn-primary"><input type="checkbox">[Title]</label>
3. radio button: <label class="btn btn-primary"><input type="radio">[Title]</label>
 -->
<div class="btn-group">
<!-- buttons here -->

nonlinear

<!-- other options: alert-info, alert-success, alert-warning, alert-danger -->
<div class="alert alert-success fade in">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  <h4>[Title]</h4>[Content]
</div><!-- alert -->

nonlinear

<!-- to change position, add data-placement= top, bottom, left, right -->
<a data-toggle="popover" title="[Popover Title]" data-content="[Popover content]" data-placement="top">[Popover trigger]</a>

nonlinear

<!-- to change position, add data-placement= top, bottom, left, right -->
<a href="#" data-toggle="tooltip" title="[Tooltip Content]">[Tooltip trigger]</a>

nonlinear

<ul id="tab" class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">[Title 1]</a></li>
  <li><a href="#tab2" data-toggle="tab">[Title 2]</a></li>
  <li><a href="#tab3" data-toggle="tab">[Title 3]</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="tab1">
    <p>[Content 1]</p>
  </div><!-- tab-pane -->
  <div class="tab-pane fade" id="tab2">

nonlinear

<div class="dropdown"> 
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    [Title]<i class="glyphicon glyphicon-chevron-down"></i>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">[Title Option]</a></li>
    <li><a href="#">{Second Option]</a></li>
    <li><a href="#">[Third Option]</a></li>
    <li class="divider"></li>
    <li><a href="#">[Fourth Option]</a></li>