Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Asad Kashmiry
Asad Kashmiry
219 Points

Two Columns with two different full-width backgrounds in the same row on Bootstrap

Hello Bootstrap Experts!

Currently, I am doing a web project. But I am feeling stuck to create a section. The section has two columns with two different full-width backgrounds in the same row. How can I make it? Here is the screenshot of the section from PSD https://ibb.co/mN4AU7

Regards

3 Answers

trio-group I.AM
trio-group I.AM
25,713 Points
trio-group I.AM
trio-group I.AM
25,713 Points

Hi there! What exactly are you having trouble with? The markup should be pretty straightforward. Is it the styling you need help with?

Asad Kashmiry
Asad Kashmiry
219 Points
Asad Kashmiry
Asad Kashmiry
219 Points

Hi trio,

Please have a look at the screenshot. There is two column in the same container(Under Bootstrap Container Class) with two different backgrounds. How can I make that type style with Bootstrap? Yeah, I am confused with the markup too.

trio-group I.AM
trio-group I.AM
25,713 Points
trio-group I.AM
trio-group I.AM
25,713 Points

Well, first you would have to use a .container-fluid div which stretches over the full width of the page. Then place a .row div inside it and inside that place your two .col-md-6 divs (I am assuming that the layout changes into one-column on mobile devices). The light grey background can be assigned to the .row div or even to the body if you wish. For the left column use the background image you've been provided. It seems to have a sort of dark semi-transparent overlay. If this isn't part of the image you can create it using gradients as background-color rules or a pseudo element such as ::after.

Now you can style the actual content inside of your columns.

Hope this helps.