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, но не помогло

