<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .fab {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .fab-buttons {
            display: none;
            flex-direction: column;
            align-items: flex-end;
            margin-bottom:20px;
        }
        .fab-buttons .btn {
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="fab">
        <div class="fab-buttons">
            <button class="btn btn-secondary">Buton 1</button>
            <button class="btn btn-secondary">Buton 2</button>
            <button class="btn btn-secondary">Buton 3</button>
            <button class="btn btn-secondary">Buton 4</button>
        </div>
        <button id="mainButton" class="btn btn-primary">+</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#mainButton').click(function() {
                var buttons = $('.fab-buttons');
                if (buttons.css('display') === 'none') {
                    buttons.css('display', 'flex').hide().fadeIn();
                } else {
                    buttons.fadeOut(function() {
                        buttons.css('display', 'none');
                    });
                }
            });
        });
    </script>