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 Framework Basics Prototyping with Bootstrap Using the Grid System

Posted by Bratimir Timotijevic
Bratimir Timotijevic
1,682 Points

Customizing only one element width?

Example: Entire site layout can fit within default classes: container and container-fluid. The only element that needs to be 10% wider than container class is carousel element.

What is the best practice? Should I customize css for just that one element or I should accommodate container to carousel width and adjust all other rows, like giving them left and right padding?

2 Answers

Lewis Pratt
Lewis Pratt
6,065 Points
Lewis Pratt
Lewis Pratt
6,065 Points

I think I get what you are trying to achieve. I would say that for the sake of your site structure, you should keep elements within each other, not overlapping. Purely because it may render in one browser fine, but may have some weird behaviour in other browsers. Also as you continue to build your site you may forget you have it set wider and cause you troubleshooting issues when your layout doesn't look how you want it. My views anyway!

Bratimir Timotijevic
Bratimir Timotijevic
1,682 Points

So you suggest that I leave carousel on container width and "shrink" all other container elements that are slightly narrower in width than container carousel element with padding, for example?

David Rynn
David Rynn
10,554 Points
David Rynn
David Rynn
10,554 Points

Hey Bratimir,

If I understand you correctly, you'll have a bunch of content in a number of rows with any different number of columns, then your carousel will take up the entire grid width as a row. I'm no expert but I'd agree with your last statement. Bootstrap knows what it's doing and I wouldn't want to style something wider than it's default. You'd be better off shrinking the other elements than making the carousel wider than default, (IMHO).

BTW, have you watched the lesson on carousel? If you code it outside of a container it might do exactly what you want...

http://teamtreehouse.com/library/framework-basics/prototyping-with-bootstrap/building-a-carousel