   []
   (render [_]
           (d/div
-           (button-block)
-           (d/h3 "Panels")
-           (panel-example)
-           (d/h3 "Jumbotron")
-           (jumbotron-example)
-           (d/h3 "Label Examples")
-           (label-examples)
-           (d/h3 "Label Variations")
-           (label-variations)
-           (d/h3 "Well!")
-           default-well
-           optional-well-classes
-           (d/h3 "Page Header")
-           header-example
-           (d/h3 "Grid")
-           grid-example
-           (d/h3 "Tooltip")
-           tooltip-example
-           (d/h3 "Positioned Tooltip (in progress)")
-           (d/h3 "Alert")
-           alert-example
-           (d/h3 "Popover")
-           popover-example
-           (d/h3 "Nav")
-           nav-example
-           (d/h3 "Badges")
-           badge-example)))
+           (d/div {:class "bs-docs-header" :id "content"}
+                  (d/div {:class "container"}
+                         (d/h1 "Components")))
+           (d/div
+            {:class "container bs-docs-container"}
+            (d/div
+             {:class "row"}
+             (d/div
+              {:class "col-md-9" :role "main"}
+              (d/div {:class "lead"}
+                     "This page lists the Om-Bootstrap components. For each component, we provide:"
+                     (d/ul
+                      (d/li "Usage instructions")
+                      (d/li "An example code snippet")
+                      (d/li "The rendered result of the example snippet"))
+                     "Click \"show code\" below the rendered component to reveal the snippet.")
+              (d/div
+               {:class "bs-docs-section"}
+               (button-block)
+               (d/h3 "Panels")
+               (panel-example)
+               (d/h3 "Jumbotron")
+               (jumbotron-example)
+               (d/h3 "Label Examples")
+               (label-examples)
+               (d/h3 "Label Variations")
+               (label-variations)
+               (d/h3 "Well!")
+               default-well
+               optional-well-classes
+               (d/h3 "Page Header")
+               header-example
+               (d/h3 "Grid")
+               grid-example
+               (d/h3 "Tooltip")
+               tooltip-example
+               (d/h3 "Positioned Tooltip (in progress)")
+               (d/h3 "Alert")
+               alert-example
+               (d/h3 "Popover")
+               popover-example
+               (d/h3 "Nav")
+               nav-example
+               (d/h3 "Badges")
+               badge-example))
+             (d/div
+              {:class "col-md-3"}
+              (d/div {:class "bs-docs-sidebar hidden-print"
+                      :role "complementary"}
+                     (n/nav
+                      {:class "bs-docs-sidenav"}
+                      (n/nav-item {:href "#buttons"} "Buttons")
+                      (n/nav-item {} "Panels")
+                      (n/nav-item {} "Modals")
+                      (n/nav-item {} "Tooltips")
+                      (n/nav-item {} "Popovers")
+                      (n/nav-item {} "Progress bars")
+                      (n/nav-item {} "Navs")
+                      (n/nav-item {} "Navbars")
+                      (n/nav-item {} "Toggleable Tabs")
+                      (n/nav-item {} "Pager")
+                      (n/nav-item {} "Alerts")
+                      (n/nav-item {} "Carousels")
+                      (n/nav-item {} "Grids")
+                      (n/nav-item {} "List group")
+                      (n/nav-item {} "Labels")
+                      (n/nav-item {} "Badges")
+                      (n/nav-item {} "Jumbotron")
+                      (n/nav-item {} "Page header")
+                      (n/nav-item {} "Wells")
+                      (n/nav-item {} "Glyphicons")
+                      (n/nav-item {} "Tables")
+                      (n/nav-item {} "Input"))
+                     (d/a {:class "back-to-top" :href "#top"} "Back to top"))))))))
 
 (defonce app-state
   (atom {:text "Hi!"}))

            [om-bootstrap.nav :as n]
            [om-bootstrap.panel :as p]
            [om-bootstrap.random :as r]
            [om-tools.core :refer-macros [defcomponent defcomponentk]]
            [om-tools.dom :as d :include-macros true]
            [schema.core :as s]

;; ## Popovers

(def popover-example
  (example
   (d/div {:style {:height 120}}
          (r/popover {:placement "right"
                      :position-left 200
                      :position-top 50
                      :title "Popover right"}
                     "And here's some "
                     (d/strong "amazing")
                     " content. It's very engaging. Right?"))))

;; ## Navs

(def nav-example
  (let [on-select (fn [k _] (js/alert (str "Selected " k)))
        nav-example (fn [style]
                      (example
                       (n/nav {:bs-style style}
                              (n/nav-item {:key 1 :href "/home" :active? true
                                           :on-select on-select}
                                          "nav-item 1 content")
                              (n/nav-item {:key 2 :href "/home"
                                           :on-select on-select}
                                          "nav-item 2 content")
                              (n/nav-item {:key 3 :href "/home" :disabled? true
                                           :on-select on-select}
                                          "nav-item 3 content"))))]
    (d/div
     (d/p "Navs come in two styles, pills:")
     (nav-example "pills")
     (d/p "And tabs:")
     (nav-example "tabs"))))

;; ## Badges

(def badge-example
  (d/div
   (d/p "Easily highlight new or unread items by adding a <Badge> to links, Bootstrap navs, and more.")
   (example (d/p "Badges" (r/badge {} 42)))))

;; ## Final Page Loading

