Bootstrap Issues with Personal Portfolio

Bootstrap Issues with Personal Portfolio
0

#1

My projects section has four placeholder images, 154px squares, set to display inline. I put class=“img-responsive” inside each image tag as we were told to do. It looks fine as a full screen, but when the screen gets too narrow to display all four in one row, I’d like it to display two rows of two placeholders. What it does is display one row of three and the last one on a second row. How can I get it to do two rows of two? By the way, I have the container div set to container-fluid.

Also, I had an image (a background pattern) for each of my contact form input fields. With the Bootstrap, the input fields - except for the submit field - won’t show the image. I tried changing it to a color, but the color doesn’t show, either. Do I need to do something special to get it to override the Bootstrap with my color/image CSS? (The rest of my CSS still works.)

Thanks!

Edited to add, I just stuck it up on CodePen and now the site that looked okay (layout-wise) full screen … doesn’t. My About Me section is stacking, and it’s supposed to be two columns. My perfectly aligned contact form fields … aren’t. Ugghhhhh.


#2

Hi!

If you can share your codepen link then it will be helpful to debug…


#3

Yes, I know. I’d rather not. Seriously, this is a basic question. If I have <div class="container-fluid> containing everything in the tags and within that have four of these: with the css set to img { display: inline}, what do I need to do to make it go from one row of four to two rows of two without it making one row of three and one of one on the way?

And what do you need to do to get it to let you color your form input fields?


#4

It looks like you’ll have to decide where to add your breakpoints.

Here is some helpful documentation: https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

You could do something like:

class=“col-md-6 col-lg-3”


#5

Thanks, Jon. I tried that and it didn’t change anything. Also, I thought the “img-responsive” was supposed to remove the need for that? I’m off to check out your link now.


#6

Well, in the end, I added div tags around each img and put the col-md-6 and col-sm-6 inside those divs, and that works. But if I’m going to do that, what is the class="img-responsive"for???

And can anyone help me with getting some color or an image to show in the input fields?