Extend BS carousel to 100% screen width (not regular full-width)

Hello again,

I have a little problem which seems to be due to the width variables. In fact, the carousel I’m putting in my homepage can’t be sized more than the full-width value present somewhere in the LESS variables I suppose. I’d like to know if this can be overwritten (but not for all the website since I’m liking this of width when I tweak other templates.

TO be more precise, i made a screenshot :

PS : It’s not about the full-width template but how to fix the carousel to 100% width just on this template.

Thank you in advance for your help

Sounds like you have the carousel inside a .container element. There are a number of ways to get the slider out of the container, just depends on how you have the site set up…

  • include a ‘slider’ template part in your base file before the container
  • have a page/template specific base file without the .container
  • set up conditionals to not add the container class in your base for that page
  • override the container styles with CSS on that page
  • etc.

There’s an example on the Bootstrap site that you may find helpful too.

Thank you. I can see that there are always plenty of solution to modify Roots.

I decided to go for a override of the container/wrap on this page only with some Jquery since this homepage uses custom CSS & elements.

$(".container.wrap").removeClass();