Saturday, 21 February 2015

Disable input in Bootstrap

                No comments   

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h3 class="head">This page contains some additional helper classes in forms which can be used to make standard level form.
</h3>
<div class="container">
<input class="form-control" type="text" placeholder="Input is disabled here " disabled="true"/>
</div>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>


style.css


.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}


Headers using Bootstrap

                No comments   

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h3 class="head">This page contains Heading with subtitle at right side.
</h3>
<div class="container">
<div class="page-header">
<h1 class="text-center">The Great Politician <small>Mr. Abhishek Awasthi</small></h1>
</div>
</div>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>


style.css

.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}




Glyphicons in Bootstrap

                No comments   

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h3 class="head">This page contains an example of glyphicons which are used to display small images.
</h3>
<h2>I am in Love <span class="glyphicon glyphicon-heart"></span></h2>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>



style.css

.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}


Output:


Dynamic layout in Bootstrap

                No comments   

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>The Great Stories</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12" >
<h2>The Great Beast</h2>
<p>There was a great beast............</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 " >
<h2>The Great Samrat</h2>
<p>There was a great King............</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12" >
<h2>The Great Cricketer</h2>
<p>There was a great cricketer............</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12" >
<h2>The Great Player</h2>
<p>There was a great player............</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12" >
<h2>The Great Wife</h2>
<p>There was a great Wife............</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12" >
<h2>The Great Husband</h2>
<p>There was a great Husband............</p>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>


style.css

.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}

Output on medium devices




Output on smaller  devices




Output on extra small devices



Buttons in Bootstrap

                No comments   

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h3 class="head">This page contains an example of different types of buttons.
</h3>
<div class="container"></div>
<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn-primary btn-xs ">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-primary btn-sm ">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-primary btn-lg ">Button</a>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn-default btn-xs">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-default btn-sm">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-default btn-lg">Button</a>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn-success btn-xs">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-success btn-sm">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-success btn-lg">Button</a>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn-info btn-xs">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-info btn-sm">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-info btn-lg">Button</a>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn-warning btn-xs">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-warning btn-sm">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-warning btn-lg">Button</a>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn-danger btn-xs">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-danger btn-sm">Button</a>
</div>
<div class="col-lg-4">
<a href="#" class="btn btn-danger btn-lg">Button</a>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>




style.css

.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}



Simple form using Bootstrap

                No comments   

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h3 class="head">This page contains a basic form.
</h3>
<div class="container">
<form class="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your Name"/>
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="text" class="form-control" id="age" placeholder="Enter your Age"/>
</div>
<div class="form-group">
<label for="no">Number</label>
<input type="text" class="form-control" id="no" placeholder="Enter your Mobile Number"/>
</div>
<div class="form-group">
<label for="gr">Gender</label>
<input type="text" class="form-control" id="gr" placeholder="Enter your Gender"/>
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="mail" class="form-control" id="mail" placeholder="Enter your E-Mail Id"/>
</div>
<div class="form-group">
<label for="intro">Description</label>
<textarea class="form-control" id="intro" placeholder="Enter something about yourself"></textarea>
</div>
<button type="submit" class="btn btn-info">Submit</button>
<button type="reset" class="btn btn-info">Reset</button>
</form>
</div>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>




style.css


.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}




Friday, 20 February 2015

Badges in Bootstrap

                No comments   

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h3 class="head">This page contains an example of badges.We have seen it many where such as in our mailboxes we mostly see notification that inbox23 means 23 mails are unread there we use this concept.
</h3>
<center><a href="#" class="btn btn-success btn-lg">Inbox <span class="badge">100</span></a></center>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>



style.css

.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}



Grid Layout in Bootstrap

                No comments   

This post explains about grid layout in Bootstrap.We can have at most 12 columns and infinite rows using bootstrap on a page.
col-xs-*  for extra smaller devices
col-sm-* for smaller devices
col-md-* for medium devices
col-lg-* for larger devices

* represents a number between 1-12 since we can ave at most 12 columns
col-xs-2 means this column will span on two columns of bootstrap.


<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h3 class="head">This page contains columns.
In smaller devices such as tablets all four columns will be in the same row
and in extra small devices such as mobile one row contain 2 columns. </h3>
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6 col1">
<h1>Abishek</h1>
</div>
<div class="col-sm-3 col-xs-6 col2" >
<h1>Shashank</h1>
</div>
<div class="col-sm-3 col-xs-6 col3">
<h1>Abhinav</h1>
</div>
<div class="col-sm-3 col-xs-6 col4">
<h1>Atal</h1>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>



Style.css


.col1{
background: red;
}
.col2{
background: green;
}
.col3{
background: yellow;
}
.col4{
background: blue;
}
.head{
background: yellow;
}



Output:






Ad


Jobsmag.inIndian Education BlogThingsGuide

Subscribe

Do you want fresh and hot updates about us? Then subscribe to our Feeds.

Total Pageviews

Popular Posts

Blog Archive

Info