In this article am explain how to create Amazing buttons by using Bootstrap.
Output
Procedure:
Step 1: Go to this website http://getbootstrap.com/getting-started/ and download Bootstrap file or Use this Bootstrap CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Step 2: Open NotePad or any text editor, Copy and Past below Code in that text editor and save as in the Html format.(Ex. AmazingButtons.html)
Script
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
Step 3: Now copy and paste the CDN in the Head section or use download script file also. Like Below
Script
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Creating Amazing button Using Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Step 4: To Create Amazing Buttons we are using below Class
- class="btn" is used to create Normal button without any effort
- class="btn btn-default" is used to create White Color Button
- class="btn btn-primary" is used to create Blue Color Button
- class="btn btn-info" is used to create Sky Blue Color Button
- class="btn btn-warning" is used to create Orange color Button
- class="btn btn-success" is used to create Green Color Button
Script:
<body>
<div class="row">
<div class="col-md-2">
<button class="btn">Normal Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-default">Default Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-primary">Primary Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-info">Info Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-warning">Warning Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-success">Success Button </button>
</div>
</div>
</body>
In this example i used to Three Class
- class="row" is used to create row in the webpage
- Before explain class="col-md-2". Inside a row we can have only 12 columns only
- class="col-md-2". md is used to create medium size column
- class="col-sm-2". sm is used to create small size column
- class="col-xs-2". xs is used to create extra small size column
- class="col-lg-2". lg is used to create large size column
- class="col-xl-2". xl is used to create extra large size column
Refer this link to understand columns and rows in bootstrap https://v4-alpha.getbootstrap.com/layout/grid/
Full Script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Creating Amazing button Using Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-2">
<button class="btn">Normal Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-default">Default Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-primary">Primary Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-info">Info Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-warning">Warning Button </button>
</div>
<div class="col-md-2">
<button class="btn btn-success">Success Button </button>
</div>
</div>
</body>
</html>
No comments:
Post a Comment