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 Darwin Pérez
Darwin Pérez
2,351 Points

Bootstrap full width slider

Hola everybody :) Hope everything is okay in your life.

I have no idea how to make a slider full width, I am using twitter bootstrap responsive, and as you may know bootstrap works using 12 columns grid = 960px

any idea how can I get this slider full width?

3 Answers

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

If your slider is nested inside of a div, say with a class of "slider", what you could try is targeting the specific instance in your Bootstrap CSS, perhaps place this at the end of your Bootstrap CSS so you can find it again easily:

   .slider .span12 { width: 100%; }

See if this works.

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

I was playing around with this myself I dont have the code right now but if you sit your slider out of the div row like below i think that might do it...

<div class="slider">

</>

<div class="row">

<div class="span12">some content within the row</div>

</div>

Also Twitter bootstrap lets you make a row fluid by using 

<div class"row-fluid">
<div class"slider"></div>
</div>

This may be what you are after hope that helps

Anthony

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Sorry Just realised that the code has to be inputted differently check out the row-fluid option