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

Question

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%;
}


            
                Mis Proyectos

I want to add a title

to each image.


    Title

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.

user_4940513 · Answer

@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.

You can fix the issue with adding item alignment in the row element.

I hope this helps.

CodePen Example

user_15387464 · Answer

Div with text-center class makes all the text align at the center inside of it. But since you just want your

tag align at the center only, just remove the text-center class from that div and add it to the

tag. Once you do that, your

tag inside of your column will work as you intended. Like:

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


    
        Mis Proyectos
        
            
                Title 1
                
            
            
                Title 2
                
            
            
                Title 3
                
            
            
                Title 4

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

2 Answers