Twitter Bootstrap Inline and Badges in PHP

Introduction

In this article I will explain Twitter Bootstrap Inline and Badges in PHP. Inline label and Badges are very simple. You can use it for creating an inline label, annotation text, eye catching labels and badges.

Example

<html>  

<head>  

<title>Example of Inline Label </title>  

<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">  

</head> 

<body> 

<div class="Container"> 

<div class="Row"> 

<div class="span"> 

<p><span class="label label-Info">Good</span></p> 

<p><span class="label label-Success">Success</span></p> 

<p><span class="label label-Warning">Warning</span></p> 

<p><span class="label label-Important">Important</span></p> 

<p><span class="label label-Info">Info</span></p> 

<p><span class="label label-Inverse">Inverse</span></p> 

</div> 

</div> 

</div> 

</body> 

</html>   

         

Output 

inline.jpg  

This label is present in your "bootstrap.css" on line nunbers 3173 to 3199.

Badges are small and simple components for displaying an indicator or to count some sort of number. This is very useful for mail count and notification etc.

Example

<html>  

<head>   

<title>Example of Badges</title>  

<link href="bootstrap.css" rel="stylesheet">  

</head> 

<body> 

<div class="Container"> 

<div class="Row"> 

<div class="Span"> 

<p><span class="badge">1</span></p> 

<p><span class="badge badge-success">2</span></p> 

<p><span class="badge badge-warning">4</span></p> 

<p><span class="badge badge-important">6</span></p> 

<p><span class="badge badge-info">8</span></p> 

<p><span class="badge badge-inverse">10</span></p> 

</div> 

</div> 

</div> 

</body> 

</html> 

Output

badges.jpg


Similar Articles