How do you center text inside a card in bootstrap? [duplicate] - html

Question

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
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.

Answer 1

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>