Bootstrap component : button group

by istiq20

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button Group</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col">
            <h1>Button Group</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-primary">Left</button>
                <button type="button" class="btn btn-primary">Middle</button>
                <button type="button" class="btn btn-success">Right</button>
                <button type="button" class="btn btn-warning">Right</button>
                <button type="button" class="btn btn-dark">Right</button>
                <button type="button" class="btn btn-secondary">Right</button>
                <button type="button" class="btn btn-primary">Right</button>
                <button type="button" class="btn btn-primary">Right</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <h1>Toggle Button</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="btn-group-vertical" role="group" aria-label="Basic checkbox toggle button group">
                <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
                <label class="btn btn-outline-success" for="btncheck1">Checkbox 1</label>

                <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
                <label class="btn btn-outline-danger" for="btncheck2">Checkbox 2</label>

                <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
                <label class="btn btn-outline-warning" for="btncheck3">Checkbox 3</label>
            </div>
        </div>
  ...