Side-by-side image using a bootstrap grid

#1

Hi. I’m having a lot of trouble getting my images to align side by side using bootstrap. I’m obviously doing something wrong, but I don’t know what it is. Thanks in advance. Note that I had to delete the source code for the last two images. As a newbie, I’m allowed to post only one image here. The “col” div classes would have the image class and source code between them. I hope this makes sense.

.silver-background {
background-color: silver;
}

.text {
text-align: left;
font-family: Arial;
font-size: 18px;
color: black;
}

.headline {
text-align: left;
font-family: Arial;
font-size: 24px;
color: black;
}

.headline2 {
text-align: left;
font-family: Arial;
font-size: 24px;
font-style: bold;
color: black;
}

.portfolio-image {
height: 200px;
width: 200px;
}

Web developer - Writer - UX designer - Artist

Front-end developer, writer, UX designer and artist with experience in project and CMS management

Portfolio

#2

Do you have a codepen for this so we can see the actual problem?

One can use a container and row div, then use individual div containers for the images. There are 12 divisions in a row in Bootstrap and as long as the total width of your divs total 12 or under, they will all appear side-by-side. Now, let’s say you assign each div a width of 3, then you can put 4 images side by side on each row. (i.e. 12 / 3 = 4) If make each div a width of 2, then you can put 6 images side by side per row.

#3

Here’s the link: https://codepen.io/stacyrch2010/pen/ZeJMLp

Thanks!

#4

ahhh, it looks like you didn’t add the Bootstrap framework in your codepen code.

Go to Settings > CSS > Quick Add > Bootstrap

Then proceed from there…

#5

And I would use “col-sm-4” since “xs” refers to an extra-small mobile screen. For a phone view, you’d normally want the image to occupy the full width of the phone screen. col-xs-4 will be a really small image.

#6

Thank you! OMG, thank you. This has been driving me crazy for days. It’s a relief to know it’s not entirely my code. I’ll change the image size to small. Thanks again. Your suggestions totally fixed the issue.

#7

Yeah, in the FCC exercises, they add the necessary Bootstrap code for you behind the scenes.
See this lesson "Use Responsive Design with Bootstrap Fluid Containers"
but in codepen, you’d have to add it explicitly.

#9