How to create a Gmail like layout with Twitter Bootstrap

css, html, javascript, twitter-bootstrap

Solution

You don't need to use Bootstrap to create this layout (nor do I think Bootstrap supports it, at least not without significant modification).

Of course, you can still use Bootstrap for everything else on the page. If you really want the Google Apps look, you'll need to tweak some of the default Bootstrap styles.

What's Possible

For fun, here's a quick knockoff of the Gmail interface using the basic techniques I describe below and a variety of Bootstrap components.

Demo: http://jsfiddle.net/Ly6wmyr2/1/

The code here is definitely demo quality and beyond the scope of a Stack Overflow question. I'll leave it up to the reader to dissect.

Simple Breakdown

Demo: http://jsfiddle.net/vLm26g4g/1/

Notes

- We're using absolute positioning.

- Just because it's absolutely positioned doesn't mean it can't be responsive (if desired).

- Containers are positioned using all 4 sides inside a 100% height body.

- This approach will work in all browsers IE 7+. If you can support IE8+, using `box-sizing: border-box` makes the dimension calculations easier.

- Layouts like this really benefit from LESS CSS, as you can declare the basic sizes in a single location.

HTML {
    height: 100%;
}
BODY {
    position: relative;
    height: 100%;
}
HEADER {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 8px;
    background-color: #ddd;
}
#side {
    position: absolute;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 20%;
    background-color: #eee;
    overflow: auto;
}
#content {
    position: absolute;
    top: 80px;
    left: 20%;
    bottom: 0;
    right: 0;
    overflow: auto;
}

Problem

Is it possible to create a GMail/GoogleGroups-like layout using Twitter Bootstrap, so that the layout always fits to the viewport (window height) and the sidebar and content area are separately scrollable? ``` -------------------------------------------------------------------------- | | | Fixed top navbar | -------------------------------------------------------------------------- | | | | Sidebar | Content area scrollable | | scrollable | | | | | | | | | | | | | |------------------------------------------------------------------------| ```

Original source