HOME HTML CSS Javascript PHP Laravel

Button Groups :

Hello guys ! today we will learn about Button groups in Bootstrap 4 !

Group of three buttons named one , two , three !

For making group of buttons .btn-group class is used . Inside this class all buttons turn into a group of buttons . Button-groups are commonly used in graphical user interfaces to present a seet of mutually exclusive options or actions .

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button-Groups Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 
 <div class="btn-group">
  <button type="button" class="btn btn-success">One</button>
  <button type="button" class="btn btn-warning">Two</button>
  <button type="button" class="btn btn-danger">Three</button>
  </div>

</body>
</html>

Large / small button groups :

Button-groups can be large , small as per requirement . By using lg | sm | xs |md classes .

Large button-groups :

Medium button-groups :

Small button-groups :

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button-Groups Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h2>
  Large button-groups :  
  </h2>
  <div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-success ">One</button>
  <button type="button" class="btn btn-warning">Two</button>
  <button type="button" class="btn btn-danger">Three</button>
  </div>
  <h2>
  Medium button-groups :  
  </h2>
  <div class="btn-group btn-group-md">
  <button type="button" class="btn btn-success ">One</button>
  <button type="button" class="btn btn-warning">Two</button>
  <button type="button" class="btn btn-danger">Three</button>
  </div>
  <h2>
  Small button-groups :  
  </h2>
  <div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-success ">One</button>
  <button type="button" class="btn btn-warning">Two</button>
  <button type="button" class="btn btn-danger">Three</button>
  </div>
</body>
</html>

vertical button-groups :

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button-Group Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <div class="btn-group-vertical">
  <button type="button" class="btn btn-success ">One</button>
  <button type="button" class="btn btn-warning">Two</button>
  <button type="button" class="btn btn-danger">Three</button>
  </div>
 
</body>
</html>

Nesting button-groups :

T1 T2