Bootstrap 5 menús desplegables

Posted on by Rudeus Greyrat

Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. Los menús desplegables son superposiciones contextuales que se pueden alternar para mostrar listas de enlaces y más. Se hacen interactivos con el complemento de JavaScript desplegable de Bootstrap incluido. Se alternan al hacer clic, no al pasar el mouse; esta es una decisión de diseño intencional.
 Sintaxis:

<div class="dropdown"> Contents... <div>

Ejemplo 1: este ejemplo muestra el funcionamiento del menú desplegable con el botón en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
        </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select CS Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Divisor desplegable: la clase .dropdown-divider se usa para dividir la lista del menú desplegable usando una línea horizontal delgada. Este ejemplo muestra el funcionamiento de las tarjetas plegables en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">
                    Physics
                </a>
                <a class="dropdown-item" href="#">
                    Mathematics
                </a>
                <a class="dropdown-item" href="#">
                    Chemistry
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Encabezado desplegable: la clase .dropdown-header se usa para agregar una sección de encabezado dentro de la lista desplegable. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
        </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <strong class="dropdown-header">
                    CS Subjects
                </strong>
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
                <div class="dropdown-divider"></div>
                <strong class="dropdown-header">
                    Other Subjects
                </strong>
                <a class="dropdown-item" href="#">
                    Physics
                </a>
                <a class="dropdown-item" href="#">
                    Mathematics
                </a>
                <a class="dropdown-item" href="#">
                    Chemistry
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Elementos deshabilitados y activos: la clase .active se usa para agregar elementos destacados de la lista. La clase .disabled se usa para deshabilitar la lista de elementos. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item active" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item disabled" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item active" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Posición desplegable: las clases .dropright y .dropleft se utilizan para establecer la posición de la lista desplegable en los lados izquierdo y derecho. 

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
        </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown dropright">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
        </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown dropleft">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Menú desplegable alineado a la derecha: la clase .dropdown-menu-right se usa para establecer la alineación a la derecha del menú desplegable. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Computer Science Subject from List
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Dropup: la clase .dropup se usa en lugar de la clase .dropdown para expandir la lista del menú hacia arriba. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
        </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropup" style="margin-top: 180px;">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subject
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                </a>
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Texto desplegable: la clase .dropdown-item-text se usa para agregar texto sin formato en la lista del menú desplegable. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subject
            </button>
            <div class="dropdown-menu">
                <div class="dropdown-item-text">
                    Data Structure
                </div>
                <div class="dropdown-item-text">
                    Algorithm
                </div>
                <div class="dropdown-item-text">
                    Operating System
                </div>
                <div class="dropdown-item-text">
                    Another Text
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Botones agrupados con un menú desplegable: la clase .btn-group se usa para crear un grupo de botones y la clase .dropdown-menu se usa para crear una lista desplegable. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Programming
            </button>
            <button type="button"
                class="btn btn-success btn-primary">
                Theory
            </button>
            <div class="btn-group">
                <button type="button"
                    class="btn btn-success dropdown-toggle"
                    data-toggle="dropdown">
                    Select Subject
                </button>
                <div class="dropdown-menu">
                    <div class="dropdown-item-text">
                        Data Structure
                    </div>
                    <div class="dropdown-item-text">
                        Algorithm
                    </div>
                    <div class="dropdown-item-text">
                        Operating System
                    </div>
                    <div class="dropdown-item-text">
                        Computer Networks
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Menús desplegables de botones divididos : la clase .dropdown-toggle-split se usa para dividir los botones desplegables. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Programming
            </button>
            <button type="button"
                class="btn btn-success dropdown-toggle
                    dropdown-toggle-split"
                data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    C Programming
                </a>
                <a class="dropdown-item" href="#">
                    C++ Programming
                </a>
                <a class="dropdown-item" href="#">
                    Java Programming
                </a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Theory
            </button>
            <button type="button"
                class="btn btn-success dropdown-toggle
                    dropdown-toggle-split"
                data-toggle="dropdown">
                        </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Operating System
                </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                </a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Select Subject
            </button>
            <button type="button"
                class="btn btn-success dropdown-toggle
                    dropdown-toggle-split"
                data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
                <div class="dropdown-item">
                    Data Structure
                </div>
                <div class="dropdown-item">
                    Algorithm
                </div>
                <div class="dropdown-item">
                    Operating System
                </div>
                <div class="dropdown-item">
                    Computer Networks
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Lista desplegable de grupos de botones verticales: la clase .btn-group-vertical se usa para crear un grupo de botones verticales con una lista desplegable. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="btn-group-vertical">
            <div class="btn-group dropright">
                <button type="button"
                    class="btn btn-success btn-primary">
                    Programming
                </button>
                <button type="button"
                    class="btn btn-success dropdown-toggle
                        dropdown-toggle-split"
                    data-toggle="dropdown">
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                        C Programming
                    </a>
                    <a class="dropdown-item" href="#">
                        C++ Programming
                    </a>
                    <a class="dropdown-item" href="#">
                        Java Programming
                    </a>
                </div>
            </div>
            <div class="btn-group dropright">
                <button type="button"
                    class="btn btn-success btn-primary">
                    Theory
                </button>
                <button type="button"
                    class="btn btn-success dropdown-toggle
                        dropdown-toggle-split"
                    data-toggle="dropdown">
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                        Operating System
                    </a>
                    <a class="dropdown-item" href="#">
                        Computer Networks
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por gurrrung y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *