Sunday, August 30, 2015

Bootstrap Tutorial For Beginners 17 - Badges and Labels in Bootstrap









<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse"
                    data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="www.EasyOnlineConverter.com">ProgrammingKnowledge</a>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#"> Home </a></li>
                    <li><a href="#">About</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle"
                           data-toggle="dropdown">
                            Learn <b class="caret"></b>
                            <ul class="dropdown-menu">
                                <li class="dropdown-header">Examples</li>
                                <li>
                                    <a href="#">C++</a>
                                </li>
                                <li><a href="#">Java</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Tutorials</li>
                                <li><a href="#">C++</a></li>
                                <li><a href="#">Java</a></li>
                            </ul>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="jumbotron text-center">
            <h1>Hello World !!!</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
                Pellentesque mattis justo vel augue pretium euismod. Interdum
                et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
                turpis eros.
            </p>
            <button type=button class="btn btn-primary"><span class="glyphicon glyphicon-user" style="font-size:30px ; color:blue"></span> </button>
            <button type=button class="btn btn-success"><span class="glyphicon glyphicon-ok" style="font-size:30px"></span> </button>
        </div>

        <a href="#">Likes <span class="badge">10</span></a>
        <a href="#">Comments <span class="badge">20</span></a>
        <button type="button" class="btn btn-success">Likes <span class="badge">100</span></button>

        <h1>Likes <span class="label label-default">Please</span></h1>
        <h2>Likes <span class="label label-default">Please</span></h2>
        <h3>Likes <span class="label label-default">Please</span></h3>
        <h4>Likes <span class="label label-default">Please</span></h4>
        <h5>Likes <span class="label label-default">Please</span></h5>
        <h6>Likes <span class="label label-default">Please</span></h6>

        <span class="label label-default">Example Text</span>
        <span class="label label-success">Example Text</span>
        <span class="label label-warning">Example Text</span>
        <span class="label label-info">Example Text</span>
        <span class="label label-danger">Example Text</span>

    </div>
    <!-- Fixed footer -->
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-text pull-left">
                <p>copyright ProgrammingKnowledge 2015</p>
            </div>
            <div class="navbar-text pull-right">
                <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript
       plugins) -->
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>






Searches related to Bootstrap Badges and Labels

bootstrap labels size

bootstrap input label

bootstrap label inline

label in bootstrap 3

bootstrap badge color

twitter bootstrap badges

Bootstrap Badges

bootstrap tags

bootstrap formsAdditional Twitter Bootstrap label/button/alert/badge colors
IT Certification Category (English)640x480

Partner Sites

VideoToGifs.com

EasyOnlineConverter.com

SqliteTutorials.com


Top Online Courses From ProgrammingKnowledge

Python Course http://bit.ly/2vsuMaS
Java Coursehttp://bit.ly/2GEfQMf
Bash Coursehttp://bit.ly/2DBVF0C
Linux Coursehttp://bit.ly/2IXuil0
C Course http://bit.ly/2GQCiD1
C++ Coursehttp://bit.ly/2V4oEVJ
PHP Coursehttp://bit.ly/2XP71WH
Android Coursehttp://bit.ly/2UHih5H
C# Coursehttp://bit.ly/2Vr7HEl
JavaFx Coursehttp://bit.ly/2XMvZWA
NodeJs Coursehttp://bit.ly/2GPg7gA
Jenkins Course http://bit.ly/2Wd4l4W
Scala Coursehttp://bit.ly/2PysyA4
Bootstrap Coursehttp://bit.ly/2DFQ2yC
MongoDB Coursehttp://bit.ly/2LaCJfP
QT C++ GUI Coursehttp://bit.ly/2vwqHSZ