Bootstrap Panels

July 19, 2014 by Krishna Srinivasan Leave a Comment

In general, panel is representation of information which is sent to user’s display screen in given circumstances. Sometimes we need to put information in box for certain reason or need to put DOM in a box. For those situations, the panel component is very useful. The box will get display with some basic border and padding around the content. Bootstrap provides .panel class within div element.
This tutorial explains following topics which are used with bootstrap panels.

Default Panel
Panel with Heading
Panel with Contextual States
Panel with Tables
Panel with List Groups

The below examples shows the various techniques used for implementing the panels in Bootstrap. If you have any questions about bootstrap panels, please write it in the comments section.

Bootstrap Default Panel

We can create default panel by using the .panel-default class along with base class .panel. The contents are defined within the .panel-body class which is wrapped with div element. The following is an example:

Run Bootstrap Default Panel Example

Bootstrap Panel Heading

We can give heading for the panel by using the .panel-heading class within the div element and use any of the header tags from h1 to h6 to define title for the panel by just wrapping the .panel-title class within the header tags. The following is an example:

Run Bootstrap Panel Heading Example

Bootstrap Panels with Contextual States

We can create different types of panels each with different types of colors by wrapping contextual classes within the div element. Following are the contextual classes which provides more meaningful to panel components.

panel-primary
panel-success
panel-info
panel-warning
panel-danger

Run Bootstrap Contextual States Panel Example

Bootstrap Panel with Table

We can create non bordered table within panel by simply using the .table class with the element <table>. We can also give heading for the table by using the .panel-heading class within the div element and it must be declared before the table class. The .panel-body class is used to add extra border to the top of the table for separation. The following is an example:

Run Bootstrap Panel Table Example

Bootstrap Panel with Listgroups

We can create list group by adding the .list-group class within a panel. To define list group within any panel, we can make use of the .list-group class within unordered list element as shown in the below example:

Run Bootstrap Panel Listgroups Example

Bootstrap Wells

July 19, 2014 by Krishna Srinivasan Leave a Comment

A well is a container which causes simple effect on an element to give an inset effect on the page. To create a well, Bootstrap provides class called .well which can be used with div element.

The below examples shows the various techniques used for implementing the wells in Bootstrap. If you have any questions about bootstrap wells, please write it in the comments section.

Bootstrap Default Well

The following example shows creation of default well by using the class .well within the div element.

Run Bootstrap Default Well Example

Bootstrap Well Sizing

We can make wells with different sizes like larger size well and smaller size well by using .well-lg and .well-sm classes in conjunction with .well class. The following is an example:

Run Bootstrap Sizing Well Example

Bootstrap Progress Bars

July 3, 2014 by Krishna Srinivasan Leave a Comment

In general, the progress bar is a graphical user interface used to visualize progression of computer operation such as file download, file transfer, showing action status to the users or installation of files. For instance, consider a task running within program that might take a while to complete. It provides some indication to user that the task is running, how long it may take to complete, how much work has already been done etc. These are all the activities which can be shown by using the progress bars.

Bootstrap provides progress bars which uses CSS transition and animations to give some effects for various activities as specified in the above paragraph. This tutorial explains following topics which are used with bootstrap progress bars.

Default Progress Bar
Progress Bar with Label
Alternative Progress Bars
Striped Progress Bar
Animated Progress Bar
Stacked Progress Bar

To create progress bar, just wrap the .progress class within the div element and next, inside another div element add .progress-bar class.

The below examples shows the various techniques used for implementing the progress bars in Bootstrap. If you have any questions about bootstrap progress bars, please write it in the comments section.

Bootstrap Default Progress Bar

The following example demonstrates creation of default progress bar:

Run Bootstrap Default Progress Bar Example

Bootstrap Progress Bar with Label

We can create progress bar to show visible percentage by just removing the .sr-only class within progress bar. It will show the percentage level on the progress bar as shown in the below example:

Run Bootstrap Progress Bar Label Example

Bootstrap Alternative Progress Bars

It’s possible to create different types of progress bars each with different colors by simply wrapping those classes with div element. Following are the four types which provide different styles to progress bar:

progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger

Use these classes within div element along with base class .progress-bar class. The following is an example:

Run Bootstrap Alternative Progress Bars Example

Bootstrap Striped Progress Bar

We can create striped effect to progress bars by using the .progress-striped class within div element along with .progress class. The following is an example:

Run Bootstrap Striped Progress Bars Example

Bootstrap Animated Progress Bar

We can animate the stripes from right to left by adding the .active class .progress-bar-striped class within div element. The following is an example:

Run Bootstrap Animated Progress Bars Example

Bootstrap Stacked Progress Bar

We can add multiple progress bars into the same progress bar to stack them by adding all the contextual classes within the .progress class as shown in the following example:

Run Bootstrap Stacked Progress Bars Example

Bootstrap Thumbnails

June 26, 2014 by Krishna Srinivasan Leave a Comment

Bootstrap provides .thumbnail class which is used for creating grid of images, text and more gives thumbnail like styles to images. We require grid of images or videos for creating the good user experience in the web. They are used to show linked images in grids with minimum required markup. Thumbnails are implemented on web pages as smaller copies of the original image and the main purpose of a thumbnail image on a web page is to reduce bandwidth and download time. Bootstrap provides the following ways for creating thumbnails:

Default Thumbnail
Thumbnails with Custom Content

The below examples shows the various techniques used for implementing the thumbnails in Bootstrap. If you have any questions about bootstrap thumbnails, please write it in the comments section.

Bootstrap Default Thumbnail

The following example demonstrates a default thumbnail:

Run Bootstrap Default Thumbnail Example Demo

Bootstrap Thumbnails with Custom Content

We can insert custom content such as heading, paragraph, buttons or any other kind of HTML content to default thumbnails as shown in the following example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Adding Content to Thumbnails</h2>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300×214.jpg"
alt="amazing">
</div>
<div class="caption">
<h3>First Image</h3>
<p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
<p><a href="#" class="btn btn-primary" role="button">View</a>
<a href="#" class="btn btn-success" role="button">Download</a></p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300×300.jpg"
alt="my_image1">
</div>
<div class="caption">
<h3>Second Image</h3>
<p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
<p><a href="#" class="btn btn-primary" role="button">View</a>
<a href="#" class="btn btn-success" role="button">Download</a
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300×210.jpg" alt="my_image2">
</div>
<div class="caption">
<h3>Third Image</h3>
<p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
<p><a href="#" class="btn btn-primary" role="button">View</a>
<a href="#" class="btn btn-success" role="button">Download</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

Above script demonstrates how to add content to the thumbnails in the document. In the default thumbnail section, we have used .thumbnail class within the anchor element. To add content, we use this class within the div element as specified in the script. To give caption for a thumbnail, use caption class along with the div element. We can add content within the div element to describe about thumbnail on the web page.

Run Bootstrap Custom Content Example Demo

Bootstrap Alerts

June 26, 2014 by Krishna Srinivasan Leave a Comment

In general term, alert is a warning for a problem. Alerts provide information about security issues, vulnerabilities and exploits. Alert messages are often used to specify attention of the end users such as warning messages, confirmation messages, error messages etc. Using alert messages we can add dismiss functionality to all alert messages. Bootstrap provides different ways to style messages to the user.

We can create alert message by wrapping with div element along with .alert class and using one of the four contextual classes. Following are the four contextual classes which are used to create different types of alert messages with Bootstrap:

alert-success: To indicate success message.
alert-info: To define informational message.
alert-warning: To indicate warning message.
alert-danger: To specify an error message.

The following example demonstrates use of different techniques used for implementing the alerts in Bootstrap. If you have any questions about bootstrap alerts, please write it in the comments section.

Bootstrap Alert Example

Run Bootstrap Basic Alert Messages Example Demo

Bootstrap Dismissal Alerts

By using above four contextual classes, we can create dismissal alert messages by wrapping within the div element along with .alert base class. To perform this task, just simply add the .alert-dismissable class to the div element as shown in the below example:

Run Bootstrap Dismissal Alert Messages Example Demo

Bootstrap Alerts in Links

By using above four contextual classes, we can create links in alert messages by wrapping within the div element along with .alert base class. Simply add .alert-link class to provide links within any alert as shown in the below example:

Run Bootstrap Links Alert Messages Example Demo

Bootstrap Jumbotron

June 25, 2014 by Krishna Srinivasan Leave a Comment

A Jumbotron is a light weight component which increases size of the headings, width of the viewport to display the key content or information on website or to display highlights of the web page. We can create Jumbotron by using .jumbotron class within the div container.

We can create jumbotron as shown in the following example. If you have any questions about bootstrap jumbotron, please write it in the comments section.

Bootstrap Jumbotron Example

Run Bootstrap Jumbotron Example Demo

We can create jumbotron without rounded corners and to make jumbotron with full width, place the .jumbotron class outside the .container class as shown in the following example:

Run Bootstrap Jumbotron Example Demo

Bootstrap Badges

June 25, 2014 by Krishna Srinivasan Leave a Comment

Badges are small and simple components which are used for displaying important notification to the user such as number of received messages, unread messages, number of friend requests, number of emails found in the inbox of email address etc. Badges are the little numbered icons which appear on the mail and SMS apps when we have new messages. Badges are looks like labels, but small difference is that the corners of the badges are more rounded. These are commonly used in networking websites and email of client.

Bootstrap provides badge class which is used within span element to display unread messages as shown in the following example. If you have any questions about bootstrap badges, please write it in the comments section.

Bootstrap Badges Example

Run Bootstrap Badges Example Demo

Active Nav States

It is possible to place badges in the active states of pills navigation by using badge class within span element to active links as shown in the following example:

The above script displays the badges in the active states of the pills navigations. We can display badge to right side of the page by using the .pull-right class within the badge class.

Run Bootstrap Active Nav States Example Demo

Bootstrap Labels

June 25, 2014 by Krishna Srinivasan Leave a Comment

label represents a caption for an item in a user interface. It is used to add label to a form control like important notes, warning messages etc. We can also create catching labels and annotate text with inline labels. If we want to specify some important note related to its particular concept, then we can make use of inline label in Bootstrap.

Bootstrap Label Example

Bootstrap provides class called .label to display labels on the web page and can be used within span element as shown in the following example. If you have any questions about bootstrap labels, please write it in the comments section.

Above script defines label class to display labels from h1 to h6 as specified within the div element.

Run Bootstrap Label Example Demo

Labels using Modifier Classes

In Bootstrap, we can get different types of variations to change appearance of the inline labels. These can be listed as follows:

label-default
label-primary
label-success
label-info
label-warning
label-danger

The following is an example:

Run Bootstrap Labels Modifier Classes Example Demo

Bootstrap Pagination

June 25, 2014 by Krishna Srinivasan Leave a Comment

Pagination is the process of dividing the content into separate pages and provides pagination links with the multi-page pagination component. Pagination is often used in every web application which is used for displaying limited number of results on results pages.
This tutorial explains following topics which are used with bootstrap pagination:

Default Pagination
Disabled and Active States
Sizing
Pager
Aligned Links
Optional Disabled State

The below examples shows the various techniques used for implementing the pagination in Bootstrap. If you have any questions about bootstrap pagination, please write it in the comments section.

Bootstrap Pagination

Bootstrap Default Pagination

We can create simple pagination with Bootstrap by using the .pagination class as shown in the following example:

Run Bootstrap Default Pagination Example Demo

Disabled and Active States

We can disable the link by using .disabled class for unclickable links which disables hover effect on that link and to indicate current page number to the user by using .active class. The following is an example:

Run Bootstrap Disabled and Active States Example Demo

Sizing Pagination

We can increase the size of pagination to larger or smaller size by adding .pagination-lg or .pagination-sm to .pagination base class as shown in the following example:

Run Bootstrap Sizing Pagination Example Demo

Bootstrap Pager

Sometimes we may require previous and next links or old and new links for simple navigation with light markup and styles to user instead of using complex pagination as discussed above. This can be done by using with .pager class. By default the links are centered. The following is an example of default pager:

Run Bootstrap Pager Example Demo

Aligned Links and Disabled States

By default, the pager links are aligned center as shown in the above section. We can align the previous link to left and next link to right by using .previous and .next classes respectively. It is also possible to disable above links by using .disabled class. The following is an example:

Run Bootstrap Alignment and Disabled State Example Demo

Bootstrap Breadcrumbs

June 25, 2014 by Sutha Kaliannan Leave a Comment

A breadcrumb is navigation feature which reveals the users navigation path in a website or web application. Breadcrumbs typically appear horizontally near the top of a webpage. We use breadcrumb navigation for large web sites that have hierarchically arranged pages.

A web site breaks the site into links of categories and sub categories which allows major categories of information to be linked in sequential order. Breadcrumb navigation is displayed to the user, so that they can easily see exactly where that web page is located within the web site. Breadcrumbs provide links to each previous page that navigates through in order to get to the current page.

We can create breadcrumb by using the class .breadcrumb with an unordered list in Bootstrap.

The below example shows the technique used for implementing the breadcrumbs in Bootstrap. If you have any questions about bootstrap breadcrumbs, please write it in the comments section.

Bootstrap Breadcrumbs Example

The above script uses the class .breadcrumb for creating breadcrumbs in a web site or web application. After executing the script, we will see separator added automatically before the content. Separators are automatically added in CSS through :before and content.

Run Bootstrap Breadcrumbs Demo