How to align btn content vertical align

Question

All button height should be same and button content should be vertically center

.col-md-3{
      margin-bottom:20px;
    }
    .btn{
      border:1px solid #000;
      white-space:initial;
      padding:20px;
      height:100%;
    }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

 
 <div class="container">
    <div class="row align-items-stretch">
      <div class="col-md-3"><a href="#" class="btn btn-block">Fundamentals of Mathematics </a></div>
                            <div class="col-md-3"><a href="#" class="btn btn-block">Fundamentals of Logical Reasoning - I </a></div>
                            <div class="col-md-3"><a href="#" class="btn btn-block link-circle">Fundamentals of Logical Reasoning - II </a></div>
                            
    </div>
    </div>

Add this css in .btn class: "padding: 21px 20px 20px;" – Mohit Gupta Jan 25 '19 at 07:06 — Mohit Gupta, Jan 25 '19 at 07:06

score 1 · Accepted Answer · answered Jan 25 '19 at 07:07

1

Using display:flex; apply this css

.btn
{
  display:flex;
  justify-content:center;
  align-items:center;
}

answered Jan 25 '19 at 07:07

Chandresh Polra

229
1
5

score 1 · Answer 2 · answered Jan 25 '19 at 07:08

1

you need to apply below code to your btn see demo

.btn{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

answered Jan 25 '19 at 07:08

Rahul

4,294
1
10
12

score 0 · Answer 3 · answered Jan 25 '19 at 07:09

0

use class d-flex in order to align content in a row... also can you give a screenshot on how it is, normally bootstrap buttons are of same height, and content center...

answered Jan 25 '19 at 07:09

How to align btn content vertical align

3 Answers3