5 Nov

Twitter Bootstrap – Buttons

Share Button

Twitter Bootstrap offers lot of options for buttons.

Button usage:
This is my sample html where I will be manipulating various button options.

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>Twitter Bootstrap</title>
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
</head>
<body>
<header>
<div class=”jumbotron”>
<div class=”container”>
<h1>Twitter Bootstrap</h1>
</div> <!– end container –>
</div> <!– end jumbotron –></header>

<div class=”button-area”>
<a href = “” class=”btn”> Button</a>
</div>
<!– end demo-area –>

<!– Latest compiled and minified JavaScript –>
<script src=”http://code.jquery.com/jquery-2.1.0.min.js”></script>
<script src=”http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js”></script>

</body>
</html>

 

Output:

Twitter Bootstrap

Add a button default class
<div class=”button-area”>
<a href = “” class=”btn btn-default”> Button</a>
</div>
Output:

image

<div class=”button-area”>
<a href = “” class=”btn btn-default”> Button</a>
<a href = “” class=”btn btn-primary”> Button</a>
<a href = “” class=”btn btn-success”> Button</a>
<a href = “” class=”btn btn-info”> Button</a>
<a href = “” class=”btn btn-warning”> Button</a>
<a href = “” class=”btn btn-danger”> Button</a>
</div>

 

clip_image001

Button link

<a href = “” class=”btn btn-primary”> Sign in</a>
<a href = “” class=”btn btn-link”> Forgot Password</a>

Button link

Button size

<a href = “” class=”btn btn-info btn-lg”> Button</a>
<a href = “” class=”btn btn-info”> Button</a>
<a href = “” class=”btn btn-info btn-sm”> Button</a>
<a href = “” class=”btn btn-info btn-xs”> Button</a>

image

 

We can use anchor tag, button type or input type for the same purpose and these will look same.

<button type = “button” class=”btn btn-default”> Button</button>
<input type = “submit” class=”btn btn-default” value =”input”></input>
Share Button