                         "Extra small button")
               (b/button {:bs-size "large"} "Large button"))))
 
+(defn button-block []
+  (d/div
+   (d/h3 "Button Examples")
+   (button-example)
+   (d/h3 "Button Sizing")
+   (button-sizing)
+   (d/p "Create block level buttons—those that span the full width of a parent— by adding the block prop.")
+   (d/div {:class "well"
+           :style {:max-width 400
+                   :margin "0 auto 10px"}}
+          (b/button {:bs-style "primary" :bs-size "large" :block? true}
+                    "Block level button")
+          (b/button {:bs-size "large" :block? true}
+                    "Block level button"))
+   (d/p "To set a buttons active state simply set the components active prop.")
+   (b/toolbar {}
+              (b/button {:bs-style "primary" :bs-size "large" :active? true}
+                        "Primary button")
+              (b/button {:bs-size "large" :bs-style "default" :active? true}
+                        "Button"))
+   (d/p "Make buttons look unclickable by fading them back 50%. To do
+   this add the disabled attribute to buttons.")
+   (b/toolbar {}
+              (b/button {:bs-style "primary" :bs-size "large" :disabled? true}
+                        "Primary button")
+              (b/button {:bs-size "large" :bs-style "default" :disabled? true}
+                        "Button"))
+   (d/h3 "Button Groups")
+   (d/p "Wrap a series of buttons in a button group.")
+   (b/button-group {}
+                   (b/button {} "Left")
+                   (b/button {} "Middle")
+                   (b/button {} "Right"))
+   (d/p "Combine sets of buttongroups into a button toolbar for more
+   complex components.")
+   (b/toolbar {}
+              (b/button-group {} (for [i (range 4)]
+                                   (b/button {} (str (inc i)))))
+              (b/button-group {} (for [i (range 4 7)]
+                                   (b/button {} (str (inc i)))))
+              (b/button-group {} (b/button {} 8)))
+
+   (d/p "Instead of applying button sizing props to every button in a group, just add bs-size prop to the <ButtonGroup />.")
+   (let [buttons (for [s ["Left" "Middle" "Right"]]
+                   (b/button {} s))]
+     (b/toolbar {}
+                (b/toolbar {} (b/button-group {:bs-size "large"} buttons))
+                (b/toolbar {} (b/button-group {} buttons))
+                (b/toolbar {} (b/button-group {:bs-size "small"} buttons))
+                (b/toolbar {} (b/button-group {:bs-size "xsmall"} buttons))))
+
+   ))
+
 ;; ## Jumbotron Examples
 
 (defn jumbotron-example []
   (r/jumbotron {}
-               (d/h1 {} "Hello, World!")
+               (d/h1 "Hello, World!")
                (d/p "This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.")
-               (d/p {} (b/button {:bs-style "primary"} "Learn More"))))
+               (d/p (b/button {:bs-style "primary"} "Learn More"))))
 
 ;; ## Label Examples
 
 (defn label-examples []
-  (d/div {}
-         (d/h1 {} "Label " (r/label {} "New"))
-         (d/h2 {} "Label " (r/label {} "New"))
-         (d/h3 {} "Label " (r/label {} "New"))
-         (d/h4 {} "Label " (r/label {} "New"))
-         (d/h5 {} "Label " (r/label {} "New"))
-         (d/p {} "Label " (r/label {} "New"))))
+  (d/div
+   (d/h1 "Label " (r/label {} "New"))
+   (d/h2 "Label " (r/label {} "New"))
+   (d/h3 "Label " (r/label {} "New"))
+   (d/h4 "Label " (r/label {} "New"))
+   (d/h5 "Label " (r/label {} "New"))
+   (d/p "Label " (r/label {} "New"))))
 
 (defn label-variations []
-  (d/div {}
-         (r/label {:bs-style "default"} "Default")
-         (r/label {:bs-style "primary"} "Primary")
-         (r/label {:bs-style "success"} "Success")
-         (r/label {:bs-style "info"} "Info")
-         (r/label {:bs-style "warning"} "Warning")
-         (r/label {:bs-style "danger"} "Danger")))
+  (d/div
+   (r/label {:bs-style "default"} "Default")
+   (r/label {:bs-style "primary"} "Primary")
+   (r/label {:bs-style "success"} "Success")
+   (r/label {:bs-style "info"} "Info")
+   (r/label {:bs-style "warning"} "Warning")
+   (r/label {:bs-style "danger"} "Danger")))
 
 ;; ## Well Examples
 


(defn button-sizing []
  (d/div
   {}
   (b/toolbar {}
              (b/button {:bs-style "primary" :bs-size "large"} "Large button")
              (b/button {:bs-size "large"} "Large button"))

                        (g/col {:md 6 :md-pull 6}
                               (d/code {} "(g/col {:md 6 :md-push 6})"))))))

;; ## Tooltip

(def tooltip-example
  (d/div {:class "bs-example"}
         (d/div {:style {:height 50}}
                (r/tooltip {:placement "right"
                            :position-left 150
                            :position-top 50}
                           (d/strong "Holy guacamole!")
                           "Check this info."))))

(comment

  (def positioned-tooltip-example
    "Positioned tooltip component. (TODO: Needs overlay trigger to
   finish!)"
    (let [tooltip  (r/tooltip {}
                              (d/strong "Holy guacamole!")
                              "Check this info.")]
      (b/toolbar {}
                 (overlay-trigger {:placement "left" :overlay tooltip})
                 (overlay-trigger {:placement "top" :overlay tooltip})
                 (overlay-trigger {:placement "bottom" :overlay tooltip})
                 (overlay-trigger {:placement "right" :overlay tooltip}))))

  (defn link-with-tooltip
    [{:keys [tooltip href]} & children]
    (overlay-trigger {:placement "top"
