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

Bootstrap Tutorial For Beginners 16 - Bootstrap Alerts and Wells









<!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>
<div class="well"><h1>This is a well</h1></div>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
This is a danger alert
</div>
<div class="alert alert-success">

<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
This is a success alert
</div>
<div class="alert alert-warning">This is a warning alert</div>
<div class="alert alert-info">This is a info alert</div>

</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 alert

bootstrap alert example

bootstrap alert popup

bootstrap alert auto close

jquery alert

bootstrap alert javascript

bootstrap alert fade out

angular bootstrap alert

bootstrap show alert

Bootstrap wells

How to add space between two wells in bootstrap 3

Bootstrap Tutorials Wells

Wednesday, August 26, 2015

Bootstrap Tutorial For Beginners 15 - Creating Panels











<!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'>
</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>
</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>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">Body of panel</div>
<div class="panel-footer">footer</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">Body of panel</div>
<div class="panel-footer">footer</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">Body of panel</div>
<div class="panel-footer">footer</div>
</div>
</div>
</div>
</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>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</body>
</html>










Bootstrap Panels

How to Create Bootstrap 3 Panels

Panels - - Working examples

Showing all snippets for Bootstrap tagged with panel

Panels - - Working examplesSearches related to Bootstrap panels

bootstrap panels collapse

bootstrap panels drupal

bootstrap panels side by side

bootstrap accordion

bootstrap tables

bootstrap tabs

bootstrap grid

bootstrap themes

Sunday, August 9, 2015

Bootstrap Tutorial For Beginners 11 - Get Started with Font Awesome and ...







<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come
*after* these tags -->
<title>EasyOnlineConverter</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</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>
</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">Click me</button>
<button type=button class="btn btn-success"> thank you</button>
</div>
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/cpp.jpg" alt="C++ tutorial">
</a>
<h3>C++</h3>
<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-danger"> thank you</button>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/java.jpg" alt="Java tutorial">
</a>
<h3>Java</h3>
<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-danger"> thank you</button>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/python.jpg" alt="Python tutorial">
</a>
<h3>Python</h3>
<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-danger"> thank you</button>
</div>
</div>
</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="
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>














Charming social media icons with Font Awesome and CSS3

Font Awesome Colored - Brand And Social Icon

Social Buttons for Bootstrap

Searches related to Font Awesome & Social Icons

font awesome social icons example

font awesome icons download

font awesome icons code

how to use font awesome icons

font awesome icons not showing

font awesome icons wordpress

font awesome icons color change

font awesome icons png

Bootstrap Tutorial For Beginners 12 - Adding Carousel (Image Slider)







<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come
*after* these tags -->
<title>EasyOnlineConverter</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</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>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="mycarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators" >
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg">
<div class="carousel-caption">
<h1>Theme 1</h1>
</div>
</div>
<div class="item ">
<img src="img/2.jpg">
<div class="carousel-caption">
<h1>Theme 2</h1>
</div>
</div>
<div class="item ">
<img src="img/3.jpg">
<div class="carousel-caption">
<h1>Theme 3</h1>
</div>
</div>
</div>
<a class="left carousel-control " href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control " href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="row">
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/cpp.jpg" alt="C++ tutorial">
</a>
<h3>C++</h3>
<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-danger"> thank you</button>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/java.jpg" alt="Java tutorial">
</a>
<h3>Java</h3>
<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-danger"> thank you</button>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail" >
<img src="img/python.jpg" alt="Python tutorial">
</a>
<h3>Python</h3>
<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-danger"> thank you</button>
</div>
</div>
</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="
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>


















Searches related to bootstrap carousel images

bootstrap carousel images not showing

bootstrap carousel images distorted

bootstrap carousel image link

bootstrap carousel image not responsive

bootstrap carousel image aspect ratio

bootstrap carousel image slider

bootstrap carousel image fixed height

bootstrap carousel image scaling

 

© 2013 Klick Dev. All rights resevered.

Back To Top