How do you center text inside a card in bootstrap?

Question

I wrote a code for card in Bootstrap 4. Now I would like to center all the text that is inside the card but I can't find a way on how to do this.

I tried to "text-center" the entire section. I've also tried to use "d-flex" with justifying the content for the entire row/container which didn't work either.

Here's my code :

<section id="jobs">
    <!--Employing cards-->
    <div class="container-fluid container-fluid-shorter py-4 bg-white">

        <!--Assistant card-->

        <div class="row">
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card">
                    <img src="images/assistant.jpg" alt="assistant" class="card-img-top">
                    <div class="card-body">

                        <h4 class="card-title text-capitalize">asistentka</h4>
                        <p class="card-text">
                        <h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
                        <a href="assistant.html" class="btn btn-green mt-5">
                            <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
                        </a>

                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 my-3">
                <div class="card">
                    <img src="images/developer.jpg" alt="developer" class="card-img-top">
                    <div class="card-body">

                        <h4 class="card-title text-capitalize">developer</h4>
                        <p class="card-text">
                        <h5 class="text-grey font-weight-light pb-3 pt-1">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
                        <a href="employerform.html" class="btn btn-green mt-5">
                            <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
                        </a>

                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 my-3 mx-auto">
                <div class="card">
                    <img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
                    <div class="card-body">

                        <h4 class="card-title text-capitalize">obchodník</h4>
                        <p class="card-text">
                        <h5 class="text-grey font-weight-light pb-3 pt-1">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
                        <a href="employerform.html" class="btn btn-green mt-5">
                            <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End of employing cards section-->
</section>

.container-fluid-shorter{
    max-width: 90rem;
}

What am I doing wrong? Thanks to anyone.

do you want to vertically center content in card-body? or entire card? — Nidhin Joseph, Oct 28 '19 at 23:09
Entirely. Both vertically and horizontally. Still trying to do it... — , Oct 28 '19 at 23:24
Exactly what I was trying to accomplish! Thanks Nidhin Joseph. — , Oct 28 '19 at 23:46

score 0 · Accepted Answer · answered Oct 28 '19 at 23:34

Is it something like this you are after? Using flex and then justify-content-center

.card-body {
  flex-direction: column;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section id="jobs">
  <!--Employing cards-->
  <div class="container-fluid container-fluid-shorter py-4 bg-white">

    <!--Assistant card-->

    <div class="row">
      <div class="col-md-6 col-lg-4 my-3">
        <div class="card">
          <img src="images/assistant.jpg" alt="assistant" class="card-img-top">
          <div class="card-body d-flex align-items-center justify-content-center">

            <h4 class="card-title text-capitalize">asistentka</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
              <a href="assistant.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
              </a>

          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 my-3">
        <div class="card">
          <img src="images/developer.jpg" alt="developer" class="card-img-top">
          <div class="card-body d-flex align-items-center justify-content-center">
            <h4 class="card-title text-capitalize">developer</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
              <a href="employerform.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
              </a>

          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 my-3 mx-auto">
        <div class="card">
          <img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
          <div class="card-body d-flex align-items-center justify-content-center">

            <h4 class="card-title text-capitalize">obchodník</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
              <a href="employerform.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
              </a>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!--End of employing cards section-->
</section>

How do you center text inside a card in bootstrap?

1 Answers1