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