Text/image combination - how to

Tips and Tricks
1

I saw this design on a page on the net:

overlay
overlay1175×888 259 KB

  • The image column and text column overlap horizontally.
  • The text column starts vertically lower than the image column.

Can I somehow achieve this layout with the Bootstrap tools (Row, Cols)? Is it possible with existing classes? Can anyone help me here?

Thank you all.
Greetings Reto

2

You can do it by using standard columns (in this case two, set with a class of col-md-6)

In the second column add a div with class of textbox

Add the following to your css

@media (min-width: 768px) {
  .textbox {
    margin-top: 10rem;
    margin-left: -5rem;
    padding: 3rem;
  }
}

The media query is set so that below 768px width the textbox will be a standard vertical stack.

Example here:

https://magic-star-1522.bss.design/

2 Likes
3

@richards Wow, thank you. Its exactly that, that i need. WOW.

1 Like