Change/Create Button with multiple different sizes using Bootstrap classes in HTML,PHP

How to design buttons in x-small, small, medium, large sizes with Bootstrap CSS.

Bootstrap provide us 4 different type of button classes which is used to change submit button or normal button size so website developer can choose any size according to its requirement. So here is the complete step by step tutorial for Change/Create Button with multiple different sizes using Bootstrap classes in HTML,PHP.

Name list of button change classes :

  1. .btn-xs
  2. .btn-sm
  3. .btn-md
  4. .btn-lg

How to Change/Create Button with multiple different sizes using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for change-button-size.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Change Button Size</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

<h2>Change Button Sizes</h2>

 <button type="button" class="btn btn-info btn-xs">X-Small</button>
 <button type="button" class="btn btn-info btn-sm">Small</button> 
 <button type="button" class="btn btn-info btn-md">Medium</button>
 <button type="button" class="btn btn-info btn-lg">Large</button>
 
 <button type="button" class="btn btn-default btn-xs">X-Small</button>
 <button type="button" class="btn btn-default btn-sm">Small</button> 
 <button type="button" class="btn btn-default btn-md">Medium</button>
 <button type="button" class="btn btn-default btn-lg">Large</button> </br></br>
 
 <button type="button" class="btn btn-success btn-xs">X-Small</button>
 <button type="button" class="btn btn-success btn-sm">Small</button> 
 <button type="button" class="btn btn-success btn-md">Medium</button>
 <button type="button" class="btn btn-success btn-lg">Large</button> 
 
 <button type="button" class="btn btn-primary btn-xs">X-Small</button>
 <button type="button" class="btn btn-primary btn-sm">Small</button> 
 <button type="button" class="btn btn-primary btn-md">Medium</button>
 <button type="button" class="btn btn-primary btn-lg">Large</button> </br></br>
 
 <button type="button" class="btn btn-danger btn-xs">X-Small</button>
 <button type="button" class="btn btn-danger btn-sm">Small</button> 
 <button type="button" class="btn btn-danger btn-md">Medium</button>
 <button type="button" class="btn btn-danger btn-lg">Large</button>
 
 <button type="button" class="btn btn-warning btn-xs">X-Small</button>
 <button type="button" class="btn btn-warning btn-sm">Small</button> 
 <button type="button" class="btn btn-warning btn-md">Medium</button>
 <button type="button" class="btn btn-warning btn-lg">Large</button> </br></br>

 
</div>

</body>
</html>

Screenshot:

Change/Create Button with multiple different sizes using Bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *