bootstrap tabs and panels


Tabs

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content. If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane

First of all, create a tab list. Add active class to one of the tabs to display it as default. To make the tabs toggleable, add the data-toggle="tab" attribute and a unique id reference to each link.

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#home1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#home2">Menu 2</a></li>
</ul>

Basic Collapsible

Collapsibles are useful when you want to hide and show large amount of content. By default, the collapsible content is hidden. You can add the in class in the container <div> to show the content by default.

The collapse class indicates a collapsible HTML element that will be shown or hidden with the click of a button. To control the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Add the data-target="#id" attribute to connect the button with the collapsible content. While using <a> elements, you can use the href attribute instead of the data-target attribute.

Accordion

Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

A panel is a bordered box with some padding around its content. Panels are created with the panel class and content inside the panel has a panel-body class. The panel-heading class adds a heading to the panel while the panel-footer class adds a footer.

To group many panels together, wrap a <div> with class panel-group. The panel-group class clears the bottom-margin of each panel. Use contextual classes panel-default, panel-primary, panel-success, panel-info, panel-warning or panel-danger to give colors.

<div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Panel Content</div>
    </div> 
</div>     

Add panel heading with data-toggle="collapse" href="#id" to make the panel collapsible. Unique id must be given to each panel where the id wraps the panel body and footer with class panel-collapse along with collapse.

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Panel Heading</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>  

Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

<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="#collapse1">Heading 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Content Goes Here</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Heading 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Content Goes Here</div>
    </div>
  </div>
</div>  

Modal

The Modal is a dialog box/popup window that is displayed on top of the current page.



<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>  

data-toggle="modal" opens the modal window.

data-target="#myModal" points to the id of the modal i.e. the id of the parent <div> of the model.

The modal class identifies the content of <div> as a modal and brings focus to it.

The attribute role="dialog" improves accessibility for people using screen readers.

The modal-dialog class sets the proper width and margin of the modal.

The modal-content class styles the modal.

The modal-header class defines the style for the header of the modal.

The <button> inside the header has a data-dismiss="modal" attribute which closes the modal.

The close class styles the close button and the modal-title class styles the header with a proper line-height.

The modal-body class is used to define the style for the body of the modal.

The modal-footer class defines the style for the footer of the modal.

You can change the size of the modal by adding the modal-sm class for small modals or .modal-lg class for large modals to the <div> with class modal-dialog