CODEWITHSUNDEEP
bootstrap-4
Mark
Mark

Reputation: 4970

Vertical content alignment across the whole row

I have the following code:

<div class="card text-white bg-primary">
    <div class="card-body pb-0">
      <div class="container h-100">
        <div class="row">
          <div class="col-md-8">
              <h5 class="card-title">Some Title</h5>
          </div>
          <div class="col-md-4">
            <button class="btn btn-primary">Add</button>
            <button class="btn btn-primary">Edit</button>
          </div>
        </div>
      </div>
    </div>

That would look like this:

enter image description here

What I need is to vertically adjust bottoms of texts across the whole row. Preferably using first column as an anchor. Any idea how to do that?

Thanks

Upvotes: 0

Views: 16

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362700

You should zero out the margin bottom on the h5 (mb-0), and then use align-items-center on the row..

  <div class="card text-white bg-primary">
    <div class="card-body py-2">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title mb-0">Some Title</h5>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-primary">Add</button>
                    <button class="btn btn-primary">Edit</button>
                </div>
            </div>
        </div>
   </div>

Demo

Upvotes: 1

Related Questions