Bootstrap frustrations

Bootstrap frustrations
0.0 0

#1

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.


#2

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


#3

I have the same problem when I add size components, unfortunately.


#4

That’s because you spelled it wrong.


#5

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.


#6

When I change your code to

<div class="col-md-8">text</div>
        <div class="col-md-4">image</div>

The columns are correct.


#7

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!


#8

If you want it to behave differently at different screen widths, you want to specify multiple classes. Look at the documentation link above.


#9

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?


#10

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"