How to align content in Bootstrap 5

April 1, 2022

I have a problem with aligning content in Bootstrap 5. I am new to Web Dev. So, I have a wireframe like an image below.

I wanted to align my content just like the wireframe.

I have tried using a grid. But it won’t align just like the wireframe.

            <section class="value-section container-fluid mt-5">
                <p class="h1 text-center">
                    We look after your pets<br>with our best staffs
                </p>
                <div class="value-section grid">
                    <div class="value-1">
                        <div class="g-col-6">
                            <img class="pet rounded float-start" src="./images/assets/slider-images/dog-slider.webp" alt="Dog">
                        </div>
                    </div>
                    <div class="value-2">
                        <div class="g-col-6">
                            <img class="pet rounded float-start" src="./images/assets/slider-images/cat-slider.webp" alt="Cat">
                        </div>
                    </div>
                    <div class="value-3">
                        <div class="g-col-6">
                            <img class="pet rounded float-end" src="./images/assets/slider-images/small-pet-slider.webp" alt="Small pet e.g rabbit">
                        </div>
                    </div>
                    <div class="value-4">
                        <div class="g-col-6">
                            <img class="pet rounded float-end" src="./images/assets/slider-images/fish-slider.webp" alt="Fish">
                        </div>
                    </div>
                </div>
            </section>

It looks like this
Pict
Can someone help me properly align the content? I put my project on my GitHub. Here is the link to my GitHub.
Thank you 🙂

>Solution :

I made what you want using flex-box .
View in full page.

img{
  width:100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<section class="value-section container-fluid mt-5">
  <p class="h1 text-center">
    We look after your pets<br>with our best staffs
  </p>
  <div class="value-section d-flex justify-content-around mt-5">

    <div class="d-flex justify-content-around flex-column gap-5">
      <div class="value-1">
         <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 1</h4><small>Appropriately optimize corporate</small></div>
          </div>
      </div>
      <div class="value-2">
         <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 2</h4><small>Appropriately optimize corporate</small></div>
          </div>
      </div >
        
      </div>
      <div class="d-flex justify-content-around flex-column gap-5 ">
        <div class="value-3">
          <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 3</h4><small>Appropriately optimize corporate</small></div>
          </div>
        </div>
        <div class="value-4">
           <div class="g-col-6 d-flex">
            <img class="pet rounded float-end" src="https://placekitten.com/640/360" alt="Small pet e.g rabbit">
            <div class="ms-2"><h4>Value 4</h4><small>Appropriately optimize corporate</small></div>
          </div>
        </div>
      </div>
    </div>
</section>