Bootstrap button Group
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS GROUP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button group</h3>
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">HOME</button>
<button type="button" class="btn btn-info">CONTACT</button>
<button type="button" class="btn btn-danger">PRODUCT</button>
<button type="button" class="btn btn-success">DOWNLOAD</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Buttongroup size(horizontal)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS GROUP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button group</h3>
<div class="row">
<div class="col-md-6">
<hr>
<div class="btngroup btn-group-lg">
<button type="button" class="btn btn-primary">HOME</button>
<button type="button" class="btn btn-info">CONTACT</button>
<button type="button" class="btn btn-danger">PRODUCT</button>
</div>
<hr>
<div class="btngroup btn-group-sm">
<button type="button" class="btn btn-primary">HOME</button>
<button type="button" class="btn btn-info">CONTACT</button>
<button type="button" class="btn btn-danger">PRODUCT</button>
</div>
<hr>
<div class="btngroup btn-group-xs">
<button type="button" class="btn btn-primary">HOME</button>
<button type="button" class="btn btn-info">CONTACT</button>
<button type="button" class="btn btn-danger">PRODUCT</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Buttongroup size(vertical)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS GROUP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<h3>Bootstrap button group</h3>
<div class="row">
<div class="col-md-6">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">HOME</button>
<button type="button" class="btn btn-info">CONTACT</button>
<button type="button" class="btn btn-danger">PRODUCT</button>
<button type="button" class="btn btn-success">DOWNLOAD</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Buttongroup(Anchor tag)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS GROUP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button group</h3>
<div class="row">
<div class="col-md-6">
<hr>
<div class="btn-group">
<a href="#" class="btn btn-primary">HOME</a>
<a href="#" class="btn btn-primary">CONTACT</a>
<a href="#" class="btn btn-primary">PRODUCT</a>
<a href="#" class="btn btn-primary">DOWNLOAD</a>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Buttongroup(Justified)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS GROUP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button group</h3>
<div class="row">
<div class="col-md-6">
<hr>
<div class="btn-group-justified">
<a href="#" class="btn btn-primary">HOME</a>
<a href="#" class="btn btn-primary">CONTACT</a>
<a href="#" class="btn btn-primary">PRODUCT</a>
<a href="#" class="btn btn-primary">DOWNLOAD</a>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Anchortag(or)Buttontag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS GROUP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button group</h3>
<div class="row">
<div class="col-md-6">
<hr>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-danger">HOME</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">CONTACT</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">PRODUCT</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">DOWNLOAD</button>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
OUTPUT:
Bootstrap Buttongroup Dropdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS GROUP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap button group</h3>
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button class="btn btn-primary">coourses</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">react js</a></li>
<li><a href="#">django</a></li>
<li><a href="#">springboot</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
No comments:
Post a Comment