Bootstrap: Horizontal Align H1 and dropdown button

July 12, 2022

I put a dropdown button beside an H1 tag and I want the dropdown button moved up just a bit because they don’t look aligned right now.

I’m using Bootstrap 5.1.3

<div class="ps-4 pt-4 pe-4" id="profile">
    <div class="dropdown">
        <h1 class="d-inline-block display-1">Cheese</h1>
    
        <button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
    </div>
</div>

>Solution :

You can use Bootstrap’s flexbox class and attributes to align items

https://getbootstrap.com/docs/5.0/utilities/flex/

In this case, I just did center but you can use whatever attribute that gives you the positioning you’re looking for.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<div class="ps-4 pt-4 pe-4" id="profile">
  <div class="d-flex flex-row align-items-center dropdown">
    <h1 class="d-inline-block display-1">Cheese</h1>

    <button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
  </div>
</div>