Split-screen background

Bootstrap Studio Help
1

Hey there,

I’m doing a wireframe kit / practicing layouts in Bootstrap Studio.
I’d love to know what would be the best way to create a Hero with split screen background.
On one side ‘Call to action’ content and on the other side full height background image like in the attached screenshot.

Thanks!

split-screen-content
split-screen-content1466×818 15.4 KB

2

It should done with row and col :")

1 Like
3

You can do it like this

2 Likes
4

The Hero Clean Reverse component can do this with a few mods.

  1. Make the parent Container fluid and remove all the padding classes.
  2. Remove the padding and margin classes from the div that contains the image.
  3. Remove the min-height from the image if necessary.
  4. Add the class px-md-0 to the right column.
  5. Change the flexbox settings on the text column to justify center on XS, and default on SM to XXL.
  6. Add the class py-5 (or py-4 if you prefer) to the div with the text in it.
1 Like
5

Thank for suggestions! I’ll try out once I’m back home.

6

@kuligaposten

Thanks! Would you mind sharing the BSS file? I’d love to take a look.

7

@Darko
I shared it in the online library
search for darko split-screen

1 Like
8

Thanks a lot! Will be taking a look!