Boostrap 5, How can I add multiple elements in a column-CodePudding

I have this Bootstrap 5 code that shows some images like in this link in a grid, the images are affected by a few CSS code.

#projects img {
  width: 100%;
  height: 100%;
}

<section id="projects">
            <div >
                <h4 >Mis Proyectos</h4>
                <div >
                    <div >
                        <img
                        src="./images/cardcomponent.png" 
                        alt="card component"
                        
                        >
                    </div>
                    <div >
                        <img
                        src="./images/yardsale.png" 
                        alt="yard sale"
                        
                        >
                    </div>
                    <div >
                        <img
                        src="./images/qrcard.png" 
                        alt="web developer"
                        
                        >
                    </div>
                    <div >
                      <img
                        src="./images/cardcomponent.png" 
                        alt="web developer"
                        
                        >
                    </div>
                </div>
            </div>
        </section>

I want to add a title <h6></h6> to each image.

<div >
    <h6>Title</h6>
    <img
    src="./images/cardcomponent.png" 
    alt="card component"
    
    >
</div>

But for some reason, the title isn't included or recognized in the column, showing something like this, while this is similar to what i want to do.

CodePudding user response：

Div with text-center class makes all the text align at the center inside of it. but since you just want your <h4> tag align at the center only then just remove text-center class from that div and add it to <h4> tag. Once you done that your <h6> tag inside of your column will work as you intended. Like,


  #projects img {
    width: 100%;
    height: 100%;
  }


            <section id="projects">
                <div >
                    <h4 >Mis Proyectos</h4>
                    <div >
                        <div >
                            <h6>Title 1</h6>
                            <img src="./images/cardcomponent.png" alt="card component" >
                        </div>
                        <div >
                            <h6>Title 2</h6>
                            <img src="./images/yardsale.png" alt="yard sale" >
                        </div>
                        <div >
                            <h6>Title 3</h6>
                            <img src="./images/qrcard.png" alt="web developer" >
                        </div>
                        <div >
                            <h6>Title 4</h6>
                            <img src="./images/cardcomponent.png"  alt="web developer" >
                        </div>
                    </div>
                </div>
            </section>

CodePudding user response：

@Emiliano Acevedo, Thanks to draw attention to the bug of bootstrap, I am sure the team must get those alignment issue fixed for row column.

Here's quick fix for the issue. <div > You can fix the issue with adding item alignment in the row element.

I hope this helps.

CodePen Example