Bootstrap 3 - SPLessons

Bootstrap Button Groups

Chapter 13

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Button Groups

Bootstrap Button Groups

shape Description

Bootstrap Button Groups consists of a series of buttons wrapped together on a single line within the button group.

shape Example

Basic example of button group that wraps a series of buttons with .btn in .btn-group is as follows:.

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Button Groups</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
	  <div class="container">
		
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Button Groups </a> </h2>
		
		
		<div class="btn-group" role="group">
		  <button type="button" class="btn btn-default">Left</button>
		  <button type="button" class="btn btn-default">Middle</button>
		  <button type="button" class="btn btn-default">Right</button>
		</div>
		 
	  </div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Output:

Button Group Sizes

shape Description

Class .btn-group-* applies sizes to all buttons in the group at a time instead of applying button sizes to every button in a group.

shape Example

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Button Groups</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
	  <div class="container">
		
			<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Button Group Sizes </a> </h2>
			
			<div class="btn-group btn-group-lg" role="group">
			  <button type="button" class="btn btn-default">Left</button>
			  <button type="button" class="btn btn-default">Middle</button>
			  <button type="button" class="btn btn-default">Right</button>
			</div>
		
	  </div>
		
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Output:

Button toolbar

shape Description

Combines all sets of button groups into a toolbar for a more complex component. Eg: <div class="btn-group"> into a <div class="btn-toolbar">.

shape Example

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Button toolbar</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
	  <div class="container">
		
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Button toolbar </a> </h2>
		<div class="btn-toolbar" role="toolbar">
		  <div class="btn-group" role="group" >
				<button type="button" class="btn btn-default">1</button>
				<button type="button" class="btn btn-default">2</button>
				<button type="button" class="btn btn-default">3</button>
				<button type="button" class="btn btn-default">4</button> 
		  </div>
		  <div class="btn-group" role="group" >
				<button type="button" class="btn btn-default">5</button>
				<button type="button" class="btn btn-default">6</button>
				<button type="button" class="btn btn-default">7</button>
				<button type="button" class="btn btn-default">8</button>
		  </div>
		  <div class="btn-group" role="group">
				<button type="button" class="btn btn-default">9</button>
				<button type="button" class="btn btn-default">10</button>
			 </div>
		</div>
	  
	  </div>
		
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Output:

Vertical Button Groups

shape Description

Bootstrap supports vertical button groups as well.

shape Example

 

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Vertical Button Group</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
  <div class="container">
    
    <h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Vertical Button Group </a> </h2>
	<div class="btn-group-vertical">
	  <button type="button" class="btn btn-primary">SPLessons</button>
	  <button type="button" class="btn btn-primary">Bootstrap</button>
	  <button type="button" class="btn btn-primary">Google</button>
	</div> 
  </div>
   
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

 

Output:

shape Description

Users can place a .btn-group within another .btn-group to make drop down menus mixed with a series of buttons.

shape Example


<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Button toolbar</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
  <div class="container">
    
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Nesting Button Groups & Dropdown Menus </a> </h2>
		
		
		 <div class="btn-group" role="group">
			  <button type="button" class="btn btn-default">1</button>
			  <button type="button" class="btn btn-default">2</button>
				<div class="btn-group" role="group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Dropdown
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
					  <li><a href="#">Dropdown link</a></li>
					  <li><a href="#">Dropdown link</a></li>
					</ul>
				</div>
		</div>

  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Output:

Justified button groups

shape Description

Make a group of buttons stretch at equal sizes to span the entire width of its parent.

shape Example


<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Button toolbar</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
	  <div class="container">
		
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Justified button groups </a> </h2>
		
			<div class="btn-group btn-group-justified" role="group" >
			  <div class="btn-group" role="group">
				<button type="button" class="btn btn-default">Left</button>
			  </div>
			  <div class="btn-group" role="group">
				<button type="button" class="btn btn-default">Middle</button>
			  </div>
			  <div class="btn-group" role="group">
				<button type="button" class="btn btn-default">Right</button>
			  </div>
			</div>
	  </div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  
  </body>
</html>

Output:

Summary

shape Key Points

  • Button Group refers to a group of buttons wrapped on a single line.
  • Justified button group stretches as that of the parent width.