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>
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.
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>
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
Leave a comment