How to get a Button in your HTML page, different styles and classes
By Saurabh SinghIn this tutorial, We are going to discuss buttons, how to get buttons into your HTML page and one of the important things its classes. If you are working in Bootstrap you must know about all the styles and the classes under the topic on which you are working.
get Bootstrap Buttons in your HTML page
So, there are basically eight styles of buttons in Bootstrap. Those are followed as:
- Default (White Background)
- Primary (Blue Background)
- Success (Green Background)
- Info (Sky Blue Background)
- Warning (Orange Background)
- Danger (Red Background)
And I’m styling it inside a head tag in a style tag. This styling is known as internal styling. Styling there means basically changing its position.
Here I’m providing the code to get the button for your HTML page. You can choose it as per your need or you can use it all.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style>
body
{
margin: 0;
font-style: sans-serif;
}
.btn-group
{
position: absolute;
top: 45%;
left: 35%;
}
</style>
</head>
<body>
<div class="btn-group" role="group" aria-label="false">
<button type="button" class="btn btn-default"> Default </button>
<button type="button" class="btn btn-primary"> Primary </button>
<button type="button" class="btn btn-success"> Success </button>
<button type="button" class="btn btn-info"> Info </button>
<button type="button" class="btn btn-warning"> Warning </button>
<button type="button" class="btn btn-danger"> Danger </button>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>
</body>
</html>Now, let’s talk about its classes, which can we use according to our need. There are following classes with their intentions what they really do:
- .btn-lg (to increase the size)
- .btn-md (to increase the but not too much)
- .btn-sm (to decrease the size)
- .btn-xs (to decrease the size little bit more)
- .btn-block (to get a block size button)
- .active (to make it clickable)
- .disabled (to make it unclickable)
I hope you enjoy your time while learning.
You may also learn,
- Open and close Bootstrap modal with jQuery
- List group in Dropdown Menu in Mobile Size or otherwise it appears on Navbar
Thank you!
Leave a Reply