Open In App

Bootstrap 5 Button group Outlined styles

Improve
Improve
Like Article
Like
Save
Share
Report

Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. For the Button group outlined style, we will create a div element with class .btn-group and inside the div element, we will create button elements.

Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. We will use .btn-outline-* class to create the outline button, where * is replaced with the color name.

Button Group Outline Classes:

  • .btn-outline-primary
  • .btn-outline-secondary
  • .btn-outline-success
  • .btn-outline-danger
  • .btn-outline-warning
  • .btn-outline-info
  • .btn-outline-light
  • .btn-outline-dark

 

Syntax:

<div class="btn-group" role="group" 
    aria-label="label content">
      <button type="button" class="btn btn-outline-*">
          Button
      </button>
      ...
</div>

Example 1: In this example, we will create a button group with outline styles using button outline classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap 5 Button group Outlined styles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        rel="stylesheet" integrity=
        "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity=
        "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
      
</head>
  
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Button group Outlined styles</h2>
  
        <div class="btn-group" role="group" 
            aria-label="Basic outlined example">
        <button type="button" class="btn btn-outline-primary">
            Primary Outline Button
        </button>
        <button type="button" class="btn btn-outline-secondary">
            Secondary Outline Button
        </button>
        <button type="button" class="btn btn-outline-success">
            Success Outline Button
        </button>
        <button type="button" class="btn btn-outline-danger">
            Danger Outline Button
        </button>
  
        <button type="button" class="btn btn-outline-warning">
            Warning Outline Button
        </button>
        <button type="button" class="btn btn-outline-info">
            Info Outline Button
        </button>
        <button type="button" class="btn btn-outline-light">
            Light Outline Button
        </button>
        <button type="button" class="btn btn-outline-dark">
            Dark Outline Button
        </button>
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will create an icon button group with outline styles using button outline classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap 5 Button group Outlined styles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
  
    <link rel="stylesheet" href=
</head>
  
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Button Group Outlined styles</h2>
  
        <div class="btn-group" role="group" 
            aria-label="Basic outlined example">
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-home"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-code"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-folder"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-file"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-filter"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-barcode"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-bug"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary">
                <i class="fa fa-gears"></i>
            </button>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/button-group/#outlined-styles



Last Updated : 06 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads