12:34 AM
<!DOCTYPE html>
<html lang="en">
<head>
<title>W3W Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDN libraries Start-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- CDN libraries END -->
</head>
<body>
<div class="container">
<h2>Bootstrap Button Group</h2>
<p>The .btn-group class help to make a button group</p>
<h4>Horizontal</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Contact</button>
</div>
</div>
</body>
</html>
Result:
Vertical:
<h4>Vertical</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Contact</button>
</div>
Result:
Horizontal with Dropdown Menus:
<h4>Horizontal with Dropdown Menus</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Contact
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Location</a>
<a class="dropdown-item" href="#">Email</a>
</div>
</div>
</div>
Result:
<h4>Vertical</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Contact</button>
</div>
Result:
Horizontal with Dropdown Menus:
<h4>Horizontal with Dropdown Menus</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Contact
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Location</a>
<a class="dropdown-item" href="#">Email</a>
</div>
</div>
</div>
Result:
Horizontal Split Dropdown:
<h4>Horizontal Split Dropdown</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Contact</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Location</a>
<a class="dropdown-item" href="#">Email</a>
</div>
</div>
Result:
Vertical Split Dropdown:
<h4>Vertical Split Dropdown</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Contact
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Location</a>
<a class="dropdown-item" href="#">Email</a>
</div>
</div>
</div>
Result:
0 comments:
Post a Comment