diff --git a/src/Yesod/Form/Bootstrap4.hs b/src/Yesod/Form/Bootstrap4.hs
--- a/src/Yesod/Form/Bootstrap4.hs
+++ b/src/Yesod/Form/Bootstrap4.hs
@@ -1,3 +1,4 @@
+{-# LANGUAGE FlexibleContexts  #-}
 {-# LANGUAGE NamedFieldPuns    #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE QuasiQuotes       #-}
@@ -21,12 +22,12 @@
   , BootstrapSubmit(..)
   ) where
 
-import           Control.Arrow (second)
-import           Data.Maybe    (isJust)
-import           Data.String   (IsString (..))
-import           Data.Text     (Text)
-import           Yesod.Core    (HandlerSite, MonadHandler, RenderMessage,
-                                SomeMessage (..), WidgetFor, whamlet)
+import           Control.Arrow                 (second)
+import           Data.String                   (IsString (..))
+import           Data.Text                     (Text)
+import qualified Data.Text.Lazy                as TL
+import           Text.Blaze.Html.Renderer.Text
+import           Yesod.Core
 import           Yesod.Form
 
 bfs :: RenderMessage site msg => msg -> FieldSettings site
@@ -94,7 +95,7 @@
   }
   deriving (Eq, Ord, Show, Read)
 
--- | Render the given form using Bootstrap v3 conventions.
+-- | Render the given form using Bootstrap v4 conventions.
 renderBootstrap4 :: Monad m => BootstrapFormLayout -> FormRender m a
 renderBootstrap4 formLayout aform fragment = do
   (res, views') <- aFormToForm aform
@@ -102,44 +103,74 @@
       widget = [whamlet|
 #{fragment}
 $forall view <- views
-  <div .form-group :isJust (fvErrors view):.has-danger>
-    $case formLayout
-      $of BootstrapBasicForm
-        $if fvId view /= bootstrapSubmitId
-          <label for=#{fvId view}>#{fvLabel view}
-        ^{fvInput view}
-        ^{helpWidget view}
-      $of BootstrapInlineForm
-        $if fvId view /= bootstrapSubmitId
-          <label .sr-only for=#{fvId view}>#{fvLabel view}
+  $if inputTypeBoolOrCheckBox view
+    ^{renderCheckInput view}
+  $else
+    ^{renderGroupInput view formLayout}
+|]
+  return (res, widget)
+
+-- FIXME: `.form-check-input`を`input`につける方法がわからない
+renderCheckInput :: FieldView site -> WidgetFor site ()
+renderCheckInput view = [whamlet|
+<div .form-check (fvErrors view):.is-invalid>
+  ^{fvInput view}
+  <label .form-check-label for=#{fvId view}>
+  ^{helpWidget view}
+|]
+
+renderGroupInput :: FieldView site -> BootstrapFormLayout -> WidgetFor site ()
+renderGroupInput view formLayout = [whamlet|
+$case formLayout
+  $of BootstrapBasicForm
+    $if fvId view /= bootstrapSubmitId
+      <label for=#{fvId view}>#{fvLabel view}
+    ^{fvInput view}
+    ^{helpWidget view}
+  $of BootstrapInlineForm
+    $if fvId view /= bootstrapSubmitId
+      <label .sr-only for=#{fvId view}>#{fvLabel view}
+    ^{fvInput view}
+    ^{helpWidget view}
+  $of BootstrapHorizontalForm labelOffset labelSize inputOffset inputSize
+    $if fvId view /= bootstrapSubmitId
+      <div .row>
+        <label
+          .#{toOffset labelOffset}
+          .#{toColumn labelSize}
+          for=#{fvId view}>#{fvLabel view}
+        <div .#{toOffset inputOffset} .#{toColumn inputSize}>
+          ^{fvInput view}
+          ^{helpWidget view}
+    $else
+      <div
+        .#{toOffset (addGO inputOffset (addGO labelOffset labelSize))}
+        .#{toColumn inputSize}>
         ^{fvInput view}
         ^{helpWidget view}
-      $of BootstrapHorizontalForm labelOffset labelSize inputOffset inputSize
-        $if fvId view /= bootstrapSubmitId
-          <div .row>
-            <label
-              .#{toOffset labelOffset}
-              .#{toColumn labelSize}
-              for=#{fvId view}>#{fvLabel view}
-            <div .#{toOffset inputOffset} .#{toColumn inputSize}>
-              ^{fvInput view}
-              ^{helpWidget view}
-        $else
-          <div
-            .#{toOffset (addGO inputOffset (addGO labelOffset labelSize))}
-            .#{toColumn inputSize}>
-            ^{fvInput view}
-            ^{helpWidget view}
-    |]
-  return (res, widget)
+|]
 
+-- | 入力されたフィールドがcheck形式である必要があるか判定する
+-- HTMLの内容を`Monad`の範囲で見る方法が分からなかったため,ワークアラウンドとしてlabelの内容を見て判断します
+inputTypeBoolOrCheckBox :: FieldView site -> Bool
+inputTypeBoolOrCheckBox FieldView{fvLabel}
+  = let textLabel = renderHtml fvLabel
+    in "radio" `TL.isInfixOf` textLabel || "checkbox" `TL.isInfixOf` textLabel
+
 -- | (Internal) Render a help widget for tooltips and errors.
+-- .invalid-feedbackを必ず表示する
+-- bootstrap 4.1の書式ではinputがerrorでなければエラーメッセージが出ませんが
+-- yesod-formのAPIではfvInput自体を弄るのが困難ですし
+-- yesod-formのAPI上fvErrorsが存在する時は常にエラーメッセージは表示させるべきなので汚いやり方ですが
+-- styleを上書きして常に表示します
 helpWidget :: FieldView site -> WidgetFor site ()
 helpWidget view = [whamlet|
 $maybe err <- fvErrors view
-  <div .invalid-feedback>#{err}
+  <div .invalid-feedback style="display: block;">
+    #{err}
 $maybe tt <- fvTooltip view
-  <small .form-text .text-muted>#{tt}
+  <small .form-text .text-muted>
+    #{tt}
 |]
 
 -- | How the 'bootstrapSubmit' button should be rendered.
diff --git a/yesod-form-bootstrap4.cabal b/yesod-form-bootstrap4.cabal
--- a/yesod-form-bootstrap4.cabal
+++ b/yesod-form-bootstrap4.cabal
@@ -1,13 +1,13 @@
 cabal-version: 1.12
 
--- This file has been generated from package.yaml by hpack version 0.31.0.
+-- This file has been generated from package.yaml by hpack version 0.31.2.
 --
 -- see: https://github.com/sol/hpack
 --
--- hash: 4bbff4c394ce1a526891998f9600319c5f8354612e0160aeace56e55c1c0263e
+-- hash: aa841e3379ef662031635a0fd759ff78b912b6a0d8a5596801cf33557e9cb336
 
 name:           yesod-form-bootstrap4
-version:        2.1.0
+version:        2.1.2
 synopsis:       renderBootstrap4
 category:       Web
 homepage:       https://github.com/ncaq/yesod-form-bootstrap4#readme
@@ -25,8 +25,12 @@
 library
   hs-source-dirs:
       src
+  ghc-options: -Wall -Widentities -Wincomplete-record-updates -Wincomplete-uni-patterns -Wmissing-exported-signatures -Wmissing-home-modules -Wredundant-constraints
   build-depends:
       base >=4.7 && <5
+    , blaze-html
+    , blaze-markup
+    , shakespeare
     , text
     , yesod-core
     , yesod-form