Question

I was creating a personal website using bootstrap and I wanted to create this specific layout :

Each part is 940 px wide with 12 columns so when the screen views 1 of the 3 parts the other 2 are hidden how can i execute this?

Thanks alot for all your help!

Answer 1

Given the default 12-column bootstrap grid, with this markup :

<div class="container supercontainer">
    <div class="supercontainer-inner clearfix view-1">
        <div class="container"><div class="row"><div class="span12"><p>Grid 1</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 2</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 3</p></div></div></div>
    </div>
</div>

and this CSS :

.supercontainer {
    overflow-x: hidden;
}
.supercontainer-inner {
    width: 2820px;
  -webkit-transition: margin-left 0.35s ease;
     -moz-transition: margin-left 0.35s ease;
       -o-transition: margin-left 0.35s ease;
          transition: margin-left 0.35s ease;
}
.supercontainer-inner > .container {
    float: left!important;
}


.supercontainer-inner.view-1 { margin-left: 0; }
.supercontainer-inner.view-2 { margin-left: -940px; }
.supercontainer-inner.view-3 { margin-left: -1880px; }

Keep in mind that better effects can be achieved by using the carousel stylesheet.

Check the demo (jsfiddle) the see one possible application to switch views.

---

And this is a responsive version of it on jsfiddle.

But this would need some cleaning up into a LESS script, with a variable for the number of views (and maybe just extend the basic grid.. hum).

@media (min-width: 1200px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -1170px; }
    .supercontainer-inner.view-3 { margin-left: -2340px; }
    .supercontainer-inner {
        width: 3510px;
    }
}
@media (max-width: 979px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -724px; }
    .supercontainer-inner.view-3 { margin-left: -1448px; }
    .supercontainer-inner {
        width: 2172px;
    }
}
@media (max-width: 767px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -100%; }
    .supercontainer-inner.view-3 { margin-left: -200%; }
    .supercontainer-inner {
        width: 300%;
    }
    .supercontainer-inner >.container { width: 33.33%!important; }
}