This project is read-only.

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.

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

@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
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.