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 585 28 Jul 2021

How to create group button dropdown with dropdown header?

Ask by Ethan Karla

Updated 28 Jul 2021

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!

MindStick Training

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.