Full Width/Screen Carousel on Bootstrap

Topics: Customizing Orchard, Troubleshooting
Aug 15, 2013 at 4:20 PM
Edited Aug 15, 2013 at 4:21 PM
Using Bootstrap-Cosmo as a base, I've created a carousel on my homepage via an HTML Widget.

However, I cannot figure out how to stretch the carousel to be the full-width of my monitor. I've added "width:100%" to the img src, along with adding several classes in the CSS such as:
.carousel .item {
    width: 100%; 
    max-height: 600px; 
}
.carousel .item img {
    width: 100%; 
} 

@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}
Yet there is still white space on each side, matching the width of all the other content.

Do I have to use a different widget type, or edit a particular .cs file to stretch the carousel fully across the screen?

Any help would be appreciated.

Thanks
Aug 15, 2013 at 7:45 PM
Edited Aug 15, 2013 at 7:49 PM
I have this in css
/* carousel section */
#hero {
    padding-top: 50px;
    
    height: auto;
    padding-bottom: 50px;
    border-bottom: 1px solid #d1d2d4;
    box-shadow: 0px 3px 8px 0px #e7e7e7;
}
#hero .carousel-control.left {
    left: 0px;
    padding-right: 1px;
}
#hero .carousel-control.right {
    right: 0px;
}
#hero .carousel-inner .item img {
    max-height: 349px;
}
#hero .carousel-inner .item.slide3 img {
    display: block;
    margin: 0 auto;
}
#hero .item h1 {
    font-size: 24px;
    font-weight: bolder;
    margin-top: 10px;
}
and in my layout.cshtml

...
Style.Require("Bootstrap"); 
Style.Require("Bootstrap-Responsive");
..
@if (Model.Featured != null) {
<!--start: hero --> <div id="hero"> <div class="row-fluid animated fadeInDown"> <div class="span12"> @Zone(Model.Featured) </div> </div> </div> }
..

``` my carousel is a widget displayed in featured zone
Aug 15, 2013 at 8:15 PM
Thanks CSADNT!

Though, where in "my layout.cshtml" am I supposed to place the "Style.Require("Bootstrap"); " code? I've placed it a few places and have received nothing but error notices.
Aug 15, 2013 at 8:41 PM
Edited Aug 15, 2013 at 8:42 PM
I am using a bootstrap module
https://bitbucket.org/csurieux/datwendo.bootstrap-for-orchard
if your bootstrap files are in /script and /styles folders of tour theme, use style.include in place of require.
for place inspire yourself from existing layout.cshtml from default orchard theme.