10 Essential Bootstrap Layout Examples

Bootstrap templates for responsive layouts

If you use Bootstrap, you'll find several basic examples are included with the Bootstrap docs. I wanted to take them a step further with some advanced examples that demonstrate common design trends and patterns. Here's a collection of Bootstrap snippets that will show you how to implement features like responsive sidebars, sticky navbars and create layouts such as one page apps, multiple sections and dashboards.

1] Off-canvas left sidebar with separate navbar toggle

Source code: http://www.codeply.com/go/voqYxBXSdG

2] Affix navbar after header, and sticky sidebar

Source code: http://www.codeply.com/go/ta5g8Jc7M4

3] Full screen app

Source code: http://www.codeply.com/go/pYxAX8A0JO

4] Responsive squares

The simplicity of perfect squares lends to an clean, elegant design.

Source code: http://www.codeply.com/go/Lm82WhiXOJ

5] Long single page with sections

Here's a Bootstrap layout that demonstrates multiple full height page sections. The ScrollSpy component is used to activate (highlight) the current navbar menu items as the page is scrolled.

Source code: http://www.codeply.com/go/6v7h8lOL2N

6] Fixed / fluid layout with off-canvas Sidebar

Source code: http://www.codeply.com/go/7TtXdF1LSz

7] Multi-column zine layout

A more complex example with multiple columns that adjust accordingly on smaller width screens.

Source code: http://www.codeply.com/go/FMoWjckxiE

8] Inbox template

Yes, form follows function. Here's a working inbox mail or message example.

Source code: http://www.codeply.com/go/vz6TwDE4QE

9] Alternating sections one pager

Source code: http://www.bootply.com/PtykkT66BU

10] Dashboard-admin template

Source code: http://www.codeply.com/go/XK8dMg7tVp