Bootstrap

champak
Bootstrap
₹2,000.00 ₹300.00
  • 23 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

Bootstrap Button Groups

Button groups in Bootstrap are used for creating groups of buttons whose placement and sizes can be controlled from one place.

A div with class=”btn-group” creates a horizontal button group.,
.btn-group-lg for a large button group or the .btn-group-md for a medium button group


<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Groups</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.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>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-12 " >
<h2>Default Button Group</h2>
<div class="btn-group ">
<button type="button" class="btn btn-primary">Hello</button>
<button type="button" class="btn btn-primary">Hi</button>
<button type="button" class="btn btn-primary">Bye</button>
</div>
</div>

</div>
</div>

<div class="container-fluid">
<div class="row">
<div class="col-sm-12 " >
<h2>Large Button Group</h2>
<div class="btn-group btn-group-lg ">
<button type="button" class="btn btn-primary">Hello</button>
<button type="button" class="btn btn-primary">Hi</button>
<button type="button" class="btn btn-primary">Bye</button>
</div>
</div>

</div>
</div>

<div class="container-fluid">
<div class="row">
<div class="col-sm-12 " >
<h2>Small Button Group</h2>
<div class="btn-group btn-group-sm ">
<button type="button" class="btn btn-primary">Hello</button>
<button type="button" class="btn btn-primary">Hi</button>
<button type="button" class="btn btn-primary">Bye</button>
</div>
</div>

</div>
</div>

</body>
</html>

To create a vertical button group use

btn-group-vertical


<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Groups Vertical</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.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>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-12 " >
<h2>Vertical Button Group</h2>
<div class=" btn-group-vertical">
<button type="button" class="btn btn-primary">Hello</button>
<button type="button" class="btn btn-primary">Hi</button>
<button type="button" class="btn btn-primary">Bye</button>
</div>
</div>

</div>
</div>

</body>
</html>

 

Button groups can be nested.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.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>
</head>
<body>

<div class="container">
<h2>Nested Button Groups can create dropdown menus</h2>

<div class="btn-group">
<button type="button" class="btn btn-primary">Button One</button>
<button type="button" class="btn btn-primary">Button Two</button>

<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<button type="button" class="btn btn-primary">Dropdown One</button>
<button type="button" class="btn btn-primary">Dropdown Two</button>



</div>
</div>


</div>
</div>

</body>
</html>

sdsadsad

 

 

Leave a Reply

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