Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Create group button dropdown with dropdown header

Ethan Karla 507 28 Jul 2021

How to create group button dropdown with dropdown header?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

To make a Group Button Dropdown with Dropdown header in Bootstrap see the below example:

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

       <title>Bootstrap Dropdown</title>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>

  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

</head>

<body>

    <div class='container d-flex justify-content-center flex-column align-items-center'>

        <h2>Dropdown Header</h2>

        <p>Group Button Dropdown with Dropdown header</p>

        <div class='btn-group'>

            <button type='button' class='btn btn-outline-danger'>Ferrari</button>

            <button type='button' class='btn btn-outline-success'>Audi</button>

            <button type='button' class='btn btn-outline-primary'>Rolls Royce</button>

            <div class='btn-group'>

                <button type='button' class='btn btn-outline-info dropdown-toggle' data-toggle='dropdown'>

                    Mercedes

                </button>

                <div class='dropdown-menu'>

                    <a class='dropdown-item' href='#'>Mercedes-Benz C-Class</a>

                    <a class='dropdown-item' href='#'>Mercedes-Benz A-Class Limousine</a>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising