Free Advanced Web Design Tutorials

Twitter Bootstrap Component

Content

In modal, Twitter Bootstrap provides pop-up windows or modal dialogs by using modal.js.

Code
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  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"><span aria-  hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Modal Component</h4>
	</div>
        <div class="modal-body">
           <p>Awesome.  This Modal is work well.</p>
	</div>			 
	<div class="modal-footer">
	   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	   <button type="button" class="btn btn-primary">Save changes</button>
	</div>
     </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Output
2. Collapse

This element used to expand and collapse content using collapse.js file.

Code
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Accordion 1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Content of Panel 1.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Accordion 2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Content of Panel 2.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Accordion 3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Content Panel 3.
      </div>
    </div>
  </div>
</div>
Output

Accordion 1

Content of Panel 1.

Accordion 2

Content of Panel 2.

Accordion 3

Content Panel 3.
3. Carousal

Carousal is used for creating responsive image or content slider with effective manner using carousal.js file.

Code
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="1.jpg" alt="Image 1">
      <div class="carousel-caption">
        Image 1
      </div>
    </div>
    <div class="item">
      <img src="2.jpg" alt="Image 2">
      <div class="carousel-caption">
        Image 2
      </div>
    </div>
    <div class="item">
      <img src="3.jpg" alt="Image 3">
      <div class="carousel-caption">
        Image 3
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
Output