CodesJava

Easy learning with example program codes

Bootstrap 4 Button Groups Tutorial


Bootstrap provides the facility to group a series of buttons together on a single line in a button group. The .btn-group class is used with

element to create a button group.

Bootstrap 4 Button Groups Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups 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.0.0/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.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap 4 Button Group example</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>
 
</body>
</html>

Try it:

Bootstrap 4 Button Groups Example on jsbin.com

Note: We can use class .btn-group-lg|sm|xs to size all buttons in the group instead of applying button sizes to every button in a group.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups - Set Sizes 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.0.0/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.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap 4 Button Groups - Set Sizes Example</h2>
    <h3>Large Buttons:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Default Buttons:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Small Buttons:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Extra Small Buttons:</h3>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>
 
</body>
</html>

Try it:

Bootstrap 4 Button Groups – Set Sizes Example on jsbin.com

Bootstrap 4 Tutorial

Bootstrap 4 package tutorial.
Bootstrap 4 CDN link tutorial.
Create First Web Page With Bootstrap 4.
Bootstrap 4 Grid System.
Bootstrap 4 grid equal columns example.
Bootstrap 4 grid responsive equal columns.
Bootstrap 4 grid responsive unequal columns.
Bootstrap 4 Jumbotron tutorial.
Bootstrap 4 Full Width Tutorial.
Bootstrap 4 Page Header Tutorial.
Bootstrap 4 Well tutorial.
Bootstrap 4 Alert Tutorial.
Bootstrap 4 Alert Link Tutorial.
Bootstrap 4 Closing Alerts tutorial.
Bootstrap 4 Animated Alerts.
Bootstrap 4 Buttons Style.
Bootstrap 4 Buttons Outline Tutorial.
Bootstrap 4 Buttons Size Tutorial.
Bootstrap 4 Block Level Buttons tutorial.
Bootstrap 4 Buttons States Tutorial.
Bootstrap 4 Button Groups Tutorial.
Bootstrap 4 Vertical Button Groups.
Bootstrap 4 Justified Button Groups.
Bootstrap 4 Nesting Button Groups.
Bootstrap 4 Split Button Dropdowns.
Bootstrap 4 Badges Tutorial.
Bootstrap 4 Basic Progress Bar.
Bootstrap 4 Progress Bar Height.
Bootstrap 4 Progress Bar With Label.
Bootstrap 4 Colored Progress Bars.
Bootstrap 4 Striped Progress Bars.
Bootstrap 4 Animated Progress Bars.
Bootstrap 4 Stacked Progress Bars.
Bootstrap 4 Pagination Tutorial.
Bootstrap 4 Pagination – Active State.
Bootstrap 4 Pagination – Disabled State.
Bootstrap 4 Pagination – Sizing.
Bootstrap 4 Pagination Breadcrumbs.
Bootstrap 4 List Groups Tutorial.
Bootstrap 4 List Group With Linked Items.
Bootstrap 4 Active Item in a List Group.
Bootstrap 4 Disabled Item in a List Group.
Bootstrap 4 Group Contextual Classes.
Bootstrap 4 Basic Panel Tutorial.
Bootstrap 4 Panel Heading Tutorial.
Bootstrap 4 Panel Footer Tutorial.
Bootstrap 4 Cards Tutorial.
Bootstrap 4 Contextual Cards.
Bootstrap 4 Card Titles, Text and Links.
Bootstrap Card Image Tutorial.
Bootstrap Card Image Overlay.
Bootstrap 4 Dropdowns Tutorial.
Bootstrap 4 Dropdowns Divider tutorial.
Bootstrap 4 Dropdowns Header Tutorial.
Bootstrap 4 Dropdowns Active Items.
Bootstrap 4 Dropdowns Disabled Items.
Bootstrap 4 Dropdowns Position Tutorial.
Bootstrap 4 Dropup Tutorial.
Bootstrap 4 Simple Collapsible.
Bootstrap 4 Collapsible Panel Tutorial.
Bootstrap Collapsible List Tutorial.
Bootstrap 4 Stacked Form Tutorial.
Bootstrap 4 Inline Form Tutorial.


Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap