Hey everyone. I’m working on the second draft of my portfolio page and I want to make a portfolio section, using bootstrap, that has rows in which there is an image of my project and a text description (like in my first one). But if you look at the current standing of my current version, from lines 32-39 I have a div that should contain a row which should contain an 8column div and a 4column div, currently containing the plain text “image” and “text.” For some reason I can’t fathom, I can’t seem to get those two col divs to sit nicely in a row. What am I missing here? Thanks in advance.
I don’t think that col-8 and col-4 are valid class names. I think that all the Bootstrap 3 column classnames have a size component.
http://getbootstrap.com/docs/3.3/css/#grid
I have the same problem when I add size components, unfortunately.
That’s because you spelled it wrong.
Same problem when I spell it right. I thought it was md, when that didn’t fix it I tried med thinking maybe I’d been spelling it wrong then too.
When I change your code to
<div class="col-md-8">text</div>
<div class="col-md-4">image</div>
The columns are correct.
Hm, when I expand the viewing screen it comes out looking right. Do I need to add a different size class for when the screen is smaller? I’ve been trying to make the page responsive.
edit: looks like xs is the way to go. Thanks for your help, ArielLeslie!
If you want it to behave differently at different screen widths, you want to specify multiple classes. Look at the documentation link above.
1 Like
It looks to me like if I just specify xs, it behaves the same way when the screen is larger. But if, for example, I wanted it to be 8 and 4 and small screens and 6 and 6 on larger screens, is there where the multiple classes would come into play?
Yeah. It’s sort of a “this size and up” and the default is 12.
If you wanted it to be 1/3 width on large and medium screens and 1/2 width on very small screens you would do class="col-xs-6 col-md-4"
1 Like