-1

I want to align the image to center each text. Below is my code. I tried it using container,. but it doesn't work.

and below is the picture.

enter image description here

  <section id="features">
    <!-- <div class="container-fluid"> -->

    <div class="row justify-content-center">
      <div class="col-md-4 col-sm-12 title-text">
        <img src="images/feature1.png" alt="feature1">
        <h3 class="features-title">Food Listing.</h3>
        <p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
      </div>
      <div class="col-md-4 col-sm-12 title-text">
        <img src="images/feature2.png" alt="feature2">
        <h3 class="features-title">Matchmaking</h3>
        <p class="features-prgrph">Find people in your area looking for food.</p>
      </div>

      <div class="col-md-4 col-sm-12 title-text">
        <img src="images/feature3.png" alt="feature3">
        <h3 class="features-title">Request System.</h3>
        <p class="features-prgrph">Request food from other users with a few taps.</p>
      </div>
    </div>
    
    <!-- </div> -->
  </section>
Rokey Z
  • 67
  • 7

2 Answers2

1

Try this,

Add text-center each one like this,

<div class="col-md-4 col-sm-12 title-text text-center">

Code:

  <section id="features">
    <!-- <div class="container-fluid"> -->

    <div class="row justify-content-center"> 
      <div class="col-md-4 col-sm-12 title-text text-center">
        <img src="images/feature1.png" alt="feature1">
        <h3 class="features-title">Food Listing.</h3>
        <p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
      </div>
      <div class="col-md-4 col-sm-12 title-text text-center">
        <img src="images/feature2.png" alt="feature2">
        <h3 class="features-title">Matchmaking</h3>
        <p class="features-prgrph">Find people in your area looking for food.</p>
      </div>

      <div class="col-md-4 col-sm-12 title-text text-center">
        <img src="images/feature3.png" alt="feature3">
        <h3 class="features-title">Request System.</h3>
        <p class="features-prgrph">Request food from other users with a few taps.</p>
      </div>
    </div>

    <!-- </div> -->
  </section>

Output:

enter image description here

HoRiz
  • 706
  • 4
  • 15
0

Add the class text-center in the div with the class title-text.

Mathys Deshaies
  • 19
  • 2