JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy

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.

  1. Default Panel
  2. Panel with Heading
  3. Panel with Contextual States
  4. Panel with Tables
  5. Panel with List Groups

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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:

[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>
</style>
</head>
<body>
<div class="container">
<h2>Default Panel</h2><br>
<div class="panel panel-default">
<div class="panel-body">
This is basic Panel
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Default Panel Example

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:

[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>
</style>
</head>
<body>
<div class="container">
<h2>Panel Heading</h2><br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap Definition</h3>
</div>
<div class="panel-body">
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.
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Panel Heading Example

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

[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>
</style>
</head>
<body>
<div class="container">
<h2>Contextual States Panels</h2><br>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">My Panel</h3>
</div>
<div class="panel-body">
Primary Panel
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">My Panel</h3>
</div>
<div class="panel-body">
Success Panel
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">My Panel</h3>
</div>
<div class="panel-body">
Informational Panel
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">My Panel</h3>
</div>
<div class="panel-body">
Warning Panel
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">My Panel</h3>
</div>
<div class="panel-body">
Danger Panel
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Contextual States Panel Example

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:

[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>
</style>
</head>
<body>
<div class="container">
<h2>Panel Table</h2><br>
<div class="panel panel-default">
<div class="panel-heading">ICC ODIs Rankings</div>
<div class="panel-body">
The table shows ICC Rankings for ODIs updated on 5th June,2014.
</div>
<table class="table">
<thead>
<tr>
<th>Rank</th>
<th>Country</th>
<th>Ratings</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Australia</td>
<td>115</td>
</tr>
<tr>
<td>2</td>
<td>Srilanka</td>
<td>112</td>
</tr>
<tr>
<td>3</td>
<td>India</td>
<td>112</td>
</tr>
<tr>
<td>4</td>
<td>South Africa</td>
<td>109</td>
</tr>
<tr>
<td>5</td>
<td>England</td>
<td>109</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Panel Table Example

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:

[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>
</style>
</head>
<body>
<div class="container">
<h2>Panel Listgroups</h2><br>
<div class="panel panel-default">
<div class="panel-heading">Top Countries</div>
<div class="panel-body">
The following are the top five largest countries in the world.
</div>
<ul class="list-group">
<li class="list-group-item">Russia</li>
<li class="list-group-item">Canada</li>
<li class="list-group-item">United States</li>
<li class="list-group-item">China</li>
<li class="list-group-item">Brazil</li>
</ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Panel Listgroups Example

Bootstrap Panel Listgroups Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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.

[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>
</style>
</head>
<body>
<div class="container">
<h2>Default Well</h2>
<div class="well">
It’s in Well!!!
</div>
</body>
</html>
[/code]

  • Run Bootstrap Default Well Example

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:

[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>
</style>
</head>
<body>
<div class="container">
<h2>Sizing Well</h2>
<div class="well well-lg">
This is in Larger Well!!!
</div>
<div class="well well-sm">
This is in Smaller Well!!!
</div>
</body>
</html>
[/code]

  • Run Bootstrap Sizing Well Example

Bootstrap Sizing Well Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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.

  1. Default Progress Bar
  2. Progress Bar with Label
  3. Alternative Progress Bars
  4. Striped Progress Bar
  5. Animated Progress Bar
  6. Stacked Progress Bar

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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:

[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>Default Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
<span class="sr-only">55% Complete</span>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Default Progress Bar Example

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:

[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>Progress Bar with Label</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">55% Complete</span>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Progress Bar Label Example

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:

[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>Contextual Alternatives of Progress Bar</h2><br>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
80% Complete (Success Bar)
</div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
65% Complete (Info Bar)
</div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-waring" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
50% Complete (Warning Bar)
</div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
30% Complete (Danger Bar)
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Alternative Progress Bars Example

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:

[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>Striped Progress Bars</h2><br>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70% Complete (Success Bar)
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
55% Complete (Info Bar)
</div>
</div><br>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
45% Complete (Warning Bar)
</div>
</div><br>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
30% Complete (Danger Bar)
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Striped Progress Bars Example

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:

[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>Striped Progress Bars</h2><br>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70% Complete (Success Bar)
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
55% Complete (Info Bar)
</div>
</div><br>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
45% Complete (Warning Bar)
</div>
</div><br>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
30% Complete (Danger Bar)
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Animated Progress Bars Example

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:

[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>Stacked Progress Bar</h2><br>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
<span class="sr-only">35% Complete (Success Bar)</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
<span class="sr-only">25% Complete (Info Bar)</span>
</div>
<div class="progress-bar progress-bar-waring" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 15%;">
<span class="sr-only">15% Complete (Warning Bar)</span>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
<span class="sr-only">10% Complete (Danger Bar)</span>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Stacked Progress Bars Example

Bootstrap Stacked Progress Bars Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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:

  1. Default Thumbnail
  2. Thumbnails with Custom Content

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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:

[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>Default Thumbnails</h2>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300×214.jpg" alt="amazing">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300×300.jpg" alt="my_image1">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300×210.jpg" alt="my_image2">
</a>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Default Thumbnail Example Demo

Bootstrap Default Thumbnail Example

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 Custom Content Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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

[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>Alert Messages</h2>
<div class="alert alert-success">Success! message sent successfully.</div>
<div class="alert alert-info">Info! Please read carefully.</div>
<div class="alert alert-warning">Warning! It will delete all the files.</div>
<div class="alert alert-danger">Error! There is error in downloading file. Please try again.</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Basic Alert Messages Example Demo

Bootstrap Basic Alert Messages Example

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:

[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>Dismissal Alert Messages</h2>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Success! message sent successfully.
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Info! Please read carefully.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Warning! It will delete all the files.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Error! There is error in downloading file. Please try again.
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Dismissal Alert Messages Example Demo

Bootstrap Dismissal Alert Messages Example

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:

[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>Links in Alert Messages</h2>
<div class="alert alert-success">
Success! <a href="#" class="alert-link">click to see message.</a>
</div>
<div class="alert alert-info">
Info! <a href="#" class="alert-link">click to see information message.</a>
</div>
<div class="alert alert-warning">
Warning! <a href="#" class="alert-link">click to see warning message.</a>
</div>
<div class="alert alert-danger">
Error! <a href="#" class="alert-link">click to see an error message.</a>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Links Alert Messages Example Demo

Bootstrap Links Alert Messages Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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

[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>Bootstrap Jumbotron</h2>
<div class="jumbotron">
<h2>Welcome to Bootstrap</h2>
<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.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
<p><a href="https://javabeat.net/bootstrap-environment-setup/" target="_blank" class="btn btn-primary btn-lg">Get More Details</a></p>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Jumbotron Example Demo

Bootstrap Jumbotron Demo Example

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:

[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="jumbotron">
<div class="container">
<h2>Welcome to Bootstrap</h2>
<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.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
<p><a href="https://javabeat.net/bootstrap-environment-setup/" target="_blank" class="btn btn-primary btn-lg">Get More Details</a></p>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Jumbotron Example Demo

Bootstrap Jumbotron demo1 Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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

[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>Bootstrap Badges</h2>
<ul class="nav nav-pills"><br>
<li><a href="#">Compose</a></li>
<li ><a href="#">Inbox<span class="badge">12</span></a></li>
<li><a href="#">Sent Mail</a></li>
<li><a href="#">Drafts<span class="badge">8</span></a></li>
<li><a href="#">Trash</a></li>
</ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Badges Example Demo

Bootstrap Badges Example

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:

[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>Active State in Pill</h2>
<ul class="nav nav-pills">
<li><a href="#">Compose</a></li>
<li class="active"><a href="#">Inbox<span class="badge">12</span></a></li>
<li><a href="#">Sent Mail</a></li>
<li><a href="#">Drafts<span class="badge">12</span></a></li>
<li><a href="#">Trash</a></li>
</ul><br>
<h2>Active State in Navigations</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Compose</a></li>
<li class="active"><a href="#">Inbox<span class="badge pull-right">12</span></a></li>
<li><a href="#">Sent Mail</a></li>
<li><a href="#">Drafts<span class="badge pull-right">8</span></a></li>
<li><a href="#">Trash</a></li>
</ul>
</div>
</body>
</html>
[/code]

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 Active Nav States Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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.

[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>
<h2>Bootstrap Label Example</h2>
<div class="container">
<h1>Bootstrap<span class="label label-default">label</span></h1>
<h2>Bootstrap<span class="label label-default">label</span></h2>
<h3>Bootstrap<span class="label label-default">label</span></h3>
<h4>Bootstrap<span class="label label-default">label</span></h4>
<h5>Bootstrap<span class="label label-default">label</span></h5>
<h6>Bootstrap<span class="label label-default">label</span></h6>
</div>
</body>
</html>
[/code]

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

  • Run Bootstrap Label Example Demo

Bootstrap Label Example

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:

[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>Labels with Modifier Classes</h2><br>
<span class="label label-default">Default</span></h1>
<span class="label label-primary">Primary</span></h2>
<span class="label label-success">Success</span></h3>
<span class="label label-info">Info</span></h4>
<span class="label label-warning">Warning</span></h5>
<span class="label label-danger">Danger</span></h6>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Labels Modifier Classes Example Demo

Bootstrap Labels Modifier Classes Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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:

  1. Default Pagination
  2. Disabled and Active States
  3. Sizing
  4. Pager
  5. Aligned Links
  6. Optional Disabled State

also read:

  • Bootstrap Setup
  • Bootstrap Typography
  • Foundation 3 Framework
  • JQuery Tutorials

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:

[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>Default Pagination</h2>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul><br><br>
<ul class="pagination">
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Default Pagination Example Demo

Bootstrap Default Pagination Example

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:

[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>Disabled and Active States</h2>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul><br><br>
<ul class="pagination">
<li class="disabled"><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Disabled and Active States Example Demo

Bootstrap Disabled and Active States Example

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:

[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>Larger Pagination</h2>
<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul><br><br>
<h2>Smaller Pagination</h2>
<ul class="pagination pagination-sm">
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Sizing Pagination Example Demo

Bootstrap Sizing Pagination Example

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:

[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>Bootstrap Pager</h2>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul><br>
<ul class="pager">
<li><a href="#">Older</a></li>
<li><a href="#">Newer</a></li>
</ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Pager Example Demo

Bootstrap Pager Example

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:

[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>Alignment Links</h2>
<ul class="pager">
<li class="previous"><a href="#">&larr; Previous</a></li>
<li class="next"><a href="#">Next &rarr;</a></li>
</ul><br>
<h2>Disabled States</h2>
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Previous</a></li>
<li class="next"><a href="#">Next &rarr;</a></li></ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Alignment and Disabled State Example Demo

Bootstrap Alignment and Disabled State Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

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.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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

[code lang=”xml”]
&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;Bootstrap Example&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quot;&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h2&gt;Bootstrap Breakcrumbs Example&lt;/h2&gt;
&lt;ul class=&quot;breadcrumb&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;active&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sign In&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
[/code]

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

Bootstrap Breadcrumbs Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

  • 1
  • 2
  • Next Page »

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved