0

I'm trying to align an image in my bootstrap column to the right and have the text wrap around it on the left like this: https://codepen.io/freeCodeCamp/full/YqLyXB

I've been researching flexbox and vertical align all day instead of doing my job (woops) and feel like it's time to just ask the experts. Here's what mine looks like: https://codepen.io/Seaplush/pen/rKVLmX

.col2 img{
max-width: 100%;
  height: 50%;
  float: right;
}


  .col2{
  background-color: #cccccc;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
 }

Thanks for the help, this is my first website attempt so sorry if it's a bit of a mess to look through ;)

Matt Thomson
  • 21
  • 2

2 Answers2

0

You can use the bootstrap columns. Just read and understand a bit more about Bootstrap grid.

Please, read the links bellow:

https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.0/layout/overview/

Ricardo Ferreira
  • 595
  • 3
  • 9
  • Thank you, I've re-read the grid layout documentation and realised how simple the fix was, just placed the image in it's own column next to the text and it's looking much better. – Matt Thomson May 31 '18 at 14:32
0

If you use bootstrap, why you not use bootstrap grid layout instead?

But if you try to use flex box instead, this is some hint...

  1. you should set width for the text and the image...

  2. set the parent of those 2 element to flex, and set the align-content.

example:

.parent{ display:flex; align-content:space-around; }

Yohanes Isa Ananto Tri Pratiwi
  • 3
  • 1