Split-screen background

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.


It should done with row and col :")

1 Like

You can do it like this


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

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


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

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

1 Like

Thanks a lot! Will be taking a look!