Bootstrap Div Column Frustration


Hi everyone,

I’ve been having a problem with my portfolio project for the past couple days and I still cannot figure out what’s going wrong after playing around with the code and reading through various help forums and documentation. I used a similar structure in my tribute page and it works just fine. Columns are all at different vertical positions and not placed right to left.

---- 2

but it should be
1 2 3

I also notice that my h1’s font size doesn’t respond to it’s css.
If someone is able to point me in the right direction, I’d really appreciate it.

Here’s the link:



I’m not familiar with the Bootstrap styles, but it looks like the font-size for your H1 is a simple typo; you have “72x” instead of “72px” and there are extra slashes (/) before and after your comment markers around “COLOR SCHEME”.

The width of the #bioPic element is being applied to the image itself rather than the containing div, which might explain why it is center-aligned.


I just looked at your codepen and there are a couple of issues.

Your CSS isn’t working as expected because of the code comments at the top:

Change this:

    COLOR SCHEME: deep purple, silver
      OR cream, brown, gold. warm etc

to only have one / instead of two //:

    COLOR SCHEME: deep purple, silver
      OR cream, brown, gold. warm etc

Then your h1 css settings will work, but change 72x to 72px as mentioned by @bhammond above.

Your grids and columns aren’t working as expected because you haven’t added Bootstrap to your project. In Codepen, click Settings -> CSS -> Quick-Add and then choose Bootstrap 3 from the dropdown menu. This will help you get your columns/grids working as 1 2 3 like you were hoping.


omg REALLY?. Lol I knew it would be something simple and stupid. Thank you!!