Understanding bootstrap interactions

Hey guys,

So on a suggestion from another user I’ve decided to utilize bootstrap in my Random Quote project instead of positioning divs manually. This has proven useful but I’m still struggling to understand Bootstrap and how to properly position my rows and columns.

This is my codepen: https://codepen.io/countercoded/full/Mpjdww/

As you can see, I can lay out the buttons at the bottom but I don’t understand why the speech bubble fa-icon has a clickable box larger then the icon itself.

I also don’t understand proper break points and how to position everything so that when the screen changes size, the positioning stays relative.

Also, is there a way to gradually change the size of my quote box as the screen changes instead of it breaking into the smaller version as soon as the screen hits the container width?

I know these are mundane questions but I just want to understand proper layout format so that I can move onto the fun javascript/jquery bit.

Thanks

I took a look at your code and noticed a few things:

  1. When you are defining your column widths with col-*-# you need to define the widths for every screen size. So you would have a long string of classes such as, class=“col-12 col-sm-10 col-md-8 col-lg-8”. This will fix the issue you are having with transitions not being fluid.

  2. With the bootstrap grid system, things are, well, a grid. So if you find yourself having to put in margins / padding all over the place, you are doing something wrong. Create rows, give them classes such as “justify-content-center” and “align-items-center” to get the rows/elements both horizontally and vertically aligned.

  3. Make sure you are reading the bootstrap 4 docs (not bootstrap 3). There are some large differences. Check out the grid doc here: https://v4-alpha.getbootstrap.com/layout/grid/ .

  4. I am in a hurry and not able to finish, but here is a fork of your pen to get you started: http://codepen.io/InfiniteSet/pen/wJoLdM .

Cheers,
Tony

1 Like

You actually only have to define the smallest width, and then any larger size in which you want the layout to change. So,
class="col-xs-12 col-sm-10 col-md-8" works great because you set the smallest size, then the changes at sm and md sizes, but adding col-lg-8 is redundant because it doesn’t change from md to lg.

Keep in mind that size and position are two different things. The grid takes care of positioning. Set everything to be the size you want, then position it.

1 Like

Thanks! This was exactly what I was looking for.

Thanks, I’ll keep your points in mind.

So I’ve spent more time then I would like to admit trying to figure out row’s and column placement and how you can manipulate elements inside them but I’m having a hard time finishing my layout. I would like to place both my buttons where they are at now but not have them shift downward when the quote box fills up with text.

I know what’s happening but I can’t figure out how to properly fix it… I believe the margin of the quote-text is pushing the button row downwards when the text over-flows into the buttons div. How do I make it so that the button div/row ignores any text and remains in place in case there is an exceptionally long quote. I will obviously fix the length of quotes eventually but for now I would like to know how to make my buttons stay in place and how I can properly move them left or right without having to rely on text-"______". There has to be a way to more accurately control the position of elements inside a row isn’t there?

https://codepen.io/countercoded/full/Mpjdww/

Thanks for the help