What is the best way to align text in the middle of a card using bootstrap?

I crafted a code to display cards using Bootstrap 4. My goal now is to center all the text inside the card, but I'm facing challenges in achieving this.

I attempted to apply "text-center" to the entire section. I also tried using "d-flex" and justifying content for the whole row/container, but these approaches didn't yield the desired outcome.

Below is my code snippet:

<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 text-center">

                        <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 text-center">

                        <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 text-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">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;
}
.card-body {
    text-align: center;
}

Can anyone guide me on how to achieve the text alignment correctly? Your help would be greatly appreciated. Thank you!

htmlcssbootstrap-4

Answer №1

Are you looking for something like this? Utilizing 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">assistant</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">We are looking for a colleague to work as an assistant in our team. It might be you we're looking for!</h5>
              <a href="assistant.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Find out more</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">We are seeking a colleague for the position of IT Developer (databases, applications, APIs, web services, etc.)</h5>
              <a href="employerform.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Find out more</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">salesperson</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1 text-center">We are looking for a colleague for the position of IT advertising and sales.</h5>
              <a href="employerform.html" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Find out more</h6>
              </a>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display rows in alternating red and green colors?

Currently, I am implementing the react table in my React project. I found valuable resources on how to use it at these links: https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples and also here: https://www.npmjs.com/package/react-tab ...

cssreactjsreact-table

Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height. https://i.sstatic.net/GwFaD.png Table CSS ...

javascriptjqueryhtmlcssdatatables

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

What is the most efficient way to send multiple arrays by selecting checkboxes?

Currently, I am faced with a challenge where I have a selection of items from a list that need to be submitted in the form of three different arrays with distinct values to PHP. These arrays include: Device id, Client comment, and Manufacturer comment. < ...

phphtmlarrayscheckboxsubmit

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Troubleshooting: CSS Styles not loading when passed as property in MUI withStyles

I am currently working on a react component that has a specific style defined as shown below: const StyledInnerItem = withStyles((theme) => ({ bgColor: { backgroundColor: (props) => { console.log('styledInnerItem color: ', props ...

javascriptcssreactjsmaterial-ui

Utilizing Timer Control for Image Rotation in Presentations

I have two sets of images named Div1 and Div2 that need to be displayed in a slideshow. The condition is as follows: For the first seven days, I want the images from the first set, Div1, to appear in the slideshow. Once the seven days are over, the images ...

c#htmlsqlasp.nettimer

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

What is the best way to add content to a TextArea generated by the html helper in MVC 3?

I am attempting to retrieve a List collection of comments from the View using Razor and Microsoft's HTML helper for TextArea (@Html.TextAreaFor). While I can populate individual comments easily, I am unsure how to add the ENTIRE list collection of com ...

c#jqueryhtmlasp.net-mvc-3textarea

Personalized cursor image using jQuery.css()

I have designed a .png image that I want to use as a custom cursor for a particular element with the class "next". Here is the code I am using, but it doesn't seem to be working. Is there anything important that I may have overlooked? $('.next& ...

jquerycss

What is the best way to implement data validation for various input fields using JavaScript with a single function?

Users can input 5 numbers into a form, each with the same ID but a different name. I want to validate each input and change the background color based on the number entered - red for 0-5, green for 6-10. I wrote code to change the color for one input box, ...

javascripthtml

Having difficulty aligning the container div in the center

I'm trying to create a centered grid of full-width buttons, but for some reason, I just can't seem to get the container centered. Any suggestions? Check out the code here - https://jsfiddle.net/a6qo6tzL/ Thank you! <div class="Wrapper"> ...

htmlcsscentering

Troubleshooting Problem with Google Maps CSS

I'm in the process of constructing a website utilizing Foundation and have integrated Google Maps to showcase some markers on it. However, I've noticed that the map control elements in the top left corner (zoom in and zoom out) have disappeared, ...

cssgoogle-mapszurb-foundation

Find the nearest iframe relative to a parent element

I am attempting to find the nearest iframe element to a parent element in order to pinpoint the specific iframe that I want to customize using CSS: <div class ="accroche"> <iframe></iframe> <iframe></iframe> &l ...

javascripthtmlcssiframe

Selecting multiple items in jQuery based on different attributes is a useful feature that

I am looking to choose multiple items based on their data attribute. Each item has a unique data-id. <div class="foo" data-id="1"></div> <div class="foo" data-id="2"></div> <div class=" ...

htmljquery

Encountered an error while attempting to load resource: the server returned a 404 (Not Found) status code when trying to load an image in an

I am looking to dynamically load an image when it is selected from a file picker dialog. The code provided below attempts to achieve this, however, the image does not load into the img tag. <script src="https://cdnjs.cloudflare.com/ajax/libs/jq ...

javascripthtml

Sharing package JSON file dependencies with child engines and addons in Ember.js

I am seeking information on how Ember Js can share the parent app's package.json file dependency (xyz:3.0.0) with child engines and addons without them needing to redeclare the dependencies in their own package.json files. This is to reduce the overal ...

javascripthtmlnpmember.jspackage.json

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

javascriptphphtmlajaxdynamicform

Implementing a PHP function to retrieve rating values when clicking on star icons

I am looking to implement a star rating system for users and update the database values accordingly after each rating. Below is my PHP code snippet: <?php foreach($genres as $genre){ $jsqla = mysql_query("select id,name,rate_score,rate_number,vide ...

phphtmlajax

New jQuery div elements do not have animations when using $(document).on

After creating an animation function that worked well with hovering over squares and leaving a trail, I later needed to add or remove squares based on the page size. Seeking help from here, I discovered my bind animation function wouldn't work on new ...

javascripthtmljquerycss