bootstrap расположение элементов внутри drop-down menu

необходимо сделать так, чтобы элементы внутри меню располагались посередине, т.к. иначе съезжают совсем за пределы рамки. вообще чекбоксы уже выровнены и меня устраивает, но текст не получается сместить. как на него повлиять?

необходимо поставить надписи рядом с чек-боксами

необходимо поставить надписи рядом с чек-боксами

код:

<div class="container">
    <div class="row">
            <div class="col">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Купить или снять
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="Buy">
                            <label class="form-check-label" for="Buy">Купить</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="Rent">
                            <label class="form-check-label" for="Rent">Снять</label>
                        </div>
                    </div>
                </div>
            </div>
        <div class="col">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Количество комнат
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="Studio">
                            <label class="form-check-label" for="Studio">Студия</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="OneRoom">
                            <label class="form-check-label" for="OneRoom">1</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="TwoRooms">
                            <label class="form-check-label" for="TwoRooms">2</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="ThreeRooms">
                            <label class="form-check-label" for="ThreeRooms">3</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="FourRooms">
                            <label class="form-check-label" for="FourRooms">4</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="FiveRooms">
                            <label class="form-check-label" for="FiveRooms">5</label>
                        </div>
                    </div>
                </div>
            </div>

пыталась сделать через id, но не помогло


Ответы (0 шт):