[SOLVED} Bootstrap Columns not aligning, Only showing up below one another?

1

Hi Guys, I’ve looked and looked all over, and checked and checked and it seems as though I’m writing it as documentation states it should be done. I’ve compared it to other’s questions and my code seems to align with the solutions.

But I think I’ve stared at it too long and now I’m in too deep.

I know its probably obvious but I can’t see what’s wrong. In my example, the 2 different shades of gray columns should align side by side on the same row. I have them written within a single

but for some reason, the page will not treat it that way and continues to stack it one on top of another. Here’s the code pen
2

1st problem… Under Settings > CSS, you’re loading this
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

instead of the bootstrap CSS which is this.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

so you weren’t really using Bootstrap. Try changing the link, and then continue debugging again.

Also, if you’re using Bootstrap container, row and col* classes, do not override their margin, width properties unless you really know what you’re doing and aware of the consequences.

1 Like
3

First of all, you are importing the Bootstrap JS file instead of the Bootstrap CSS file. Just remove the current link from the settings and use the quick-add to add Bootstrap 3.

Also, setting margin on a bootstrap class is generally not a good idea, since it can break the Bootstrap layout.

EDIT: Basically what @owel mentioned a few seconds ago…

4

Thanks, I had to manually add, I must have overlooked which one I was copying. The quick add was giving me bugs

5

Thank you for finding that mistake, thanks so much. I’ll try it with this change.

6

It Worked, Thank you both