Bootstrap Buttons
0 5154
Bootstrap buttons - Multiple class available in bootstrap for button style. You can find default button size, large button size, small button size, extra small button size and many more.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bootstrap Buttons </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!–Bootstrap css file–>
<link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<h1> Bootstrap Button Styles </h1>
<p> The .btn class used for button and .btn-… class used for button color. </p>
<h3> Default button size </h3>
<button type="button" class="btn btn-default"> Default Button </button>
<button type="button" class="btn btn-danger"> Danger Button </button>
<button type="button" class="btn btn-primary"> Primary Button </button>
<button type="button" class="btn btn-info"> Info Button </button>
<button type="button" class="btn btn-success"> Success Button </button>
<button type="button" class="btn btn-warning"> Warning Button </button>
<h3> Large button size </h3>
<button type="button" class="btn btn-default btn-lg"> Default Button </button>
<button type="button" class="btn btn-danger btn-lg"> Danger Button </button>
<button type="button" class="btn btn-primary btn-lg"> Primary Button </button>
<button type="button" class="btn btn-info btn-lg"> Info Button </button>
<button type="button" class="btn btn-success btn-lg"> Success Button </button>
<button type="button" class="btn btn-warning btn-lg"> Warning Button </button>
<h3> Small button size </h3>
<button type="button" class="btn btn-default btn-sm"> Default Button </button>
<button type="button" class="btn btn-danger btn-sm"> Danger Button </button>
<button type="button" class="btn btn-primary btn-sm"> Primary Button </button>
<button type="button" class="btn btn-info btn-sm"> Info Button </button>
<button type="button" class="btn btn-success btn-sm"> Success Button </button>
<button type="button" class="btn btn-warning btn-sm"> Warning Button </button>
<h3> Extra Small button size </h3>
<button type="button" class="btn btn-default btn-xs"> Default Button </button>
<button type="button" class="btn btn-danger btn-xs"> Danger Button </button>
<button type="button" class="btn btn-primary btn-xs"> Primary Button </button>
<button type="button" class="btn btn-info btn-xs"> Info Button </button>
<button type="button" class="btn btn-success btn-xs"> Success Button </button>
<button type="button" class="btn btn-warning btn-xs"> Warning Button </button>
<h3> Full width button size </h3>
<button type="button" class="btn btn-default btn-block"> Default Button </button>
<button type="button" class="btn btn-danger btn-block"> Danger Button </button>
<button type="button" class="btn btn-primary btn-block"> Primary Button </button>
<button type="button" class="btn btn-info btn-block"> Info Button </button>
<button type="button" class="btn btn-success btn-block"> Success Button </button>
<button type="button" class="btn btn-warning btn-block"> Warning Button </button>
<!-Bootstrap js file->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Result:
Share:
Comments
Waiting for your comments