diff --git a/apps/advanced/backend/web/css/site.css b/apps/advanced/backend/web/css/site.css
index bf9d2b2..f460b45 100644
--- a/apps/advanced/backend/web/css/site.css
+++ b/apps/advanced/backend/web/css/site.css
@@ -1,21 +1,22 @@
 body {
-  padding-top: 70px;
+	padding-top: 70px;
 }
 
 .footer {
-  border-top: 1px solid #ddd;
-  margin-top: 30px;
-  padding-top: 15px;
-  padding-bottom: 30px;
+	border-top: 1px solid #ddd;
+	margin-top: 30px;
+	padding-top: 15px;
+	padding-bottom: 30px;
 }
 
 .jumbotron {
-  text-align: center;
-  background-color: transparent;
+	text-align: center;
+	background-color: transparent;
 }
+
 .jumbotron .btn {
-  font-size: 21px;
-  padding: 14px 24px;
+	font-size: 21px;
+	padding: 14px 24px;
 }
 
 .not-set {
@@ -25,27 +26,59 @@ body {
 
 /* add sorting icons to gridview sort links */
 a.asc:after, a.desc:after {
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    font-family: 'Glyphicons Halflings';
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    padding-left: 5px;
+	position: relative;
+	top: 1px;
+	display: inline-block;
+	font-family: 'Glyphicons Halflings';
+	font-style: normal;
+	font-weight: normal;
+	line-height: 1;
+	padding-left: 5px;
+}
+
+a.asc:after {
+	content: /*"\e113"*/ "\e151";
+}
+
+a.desc:after {
+	content: /*"\e114"*/ "\e152";
+}
+
+.sort-numerical a.asc:after {
+	content: "\e153";
+}
+
+.sort-numerical a.desc:after {
+	content: "\e154";
+}
+
+.sort-ordinal a.asc:after {
+	content: "\e155";
+}
+
+.sort-ordinal a.desc:after {
+	content: "\e156";
 }
 
-a.asc:after  { content: /*"\e113"*/"\e151"; }
-a.desc:after { content: /*"\e114"*/"\e152"; }
+.hint-block {
+	display: block;
+	margin-top: 5px;
+	color: #999;
+}
 
-.sort-numerical a.asc:after { content: "\e153"; }
-.sort-numerical a.desc:after { content: "\e154"; }
+.error-block {
+	display: none;
+	margin-top: 5px;
+	margin-bottom: 10px;
+	color: #a94442;
+}
 
-.sort-ordinal a.asc:after { content: "\e155"; }
-.sort-ordinal a.desc:after { content: "\e156"; }
+.has-error .error-block {
+	display: block;
+}
 
 .error-summary {
-	color: #b94a48;
+	color: #a94442;
 	background: #fdf7f7;
 	border-left: 3px solid #eed3d7;
 	padding: 10px 20px;
diff --git a/apps/advanced/frontend/web/css/site.css b/apps/advanced/frontend/web/css/site.css
index bf9d2b2..f460b45 100644
--- a/apps/advanced/frontend/web/css/site.css
+++ b/apps/advanced/frontend/web/css/site.css
@@ -1,21 +1,22 @@
 body {
-  padding-top: 70px;
+	padding-top: 70px;
 }
 
 .footer {
-  border-top: 1px solid #ddd;
-  margin-top: 30px;
-  padding-top: 15px;
-  padding-bottom: 30px;
+	border-top: 1px solid #ddd;
+	margin-top: 30px;
+	padding-top: 15px;
+	padding-bottom: 30px;
 }
 
 .jumbotron {
-  text-align: center;
-  background-color: transparent;
+	text-align: center;
+	background-color: transparent;
 }
+
 .jumbotron .btn {
-  font-size: 21px;
-  padding: 14px 24px;
+	font-size: 21px;
+	padding: 14px 24px;
 }
 
 .not-set {
@@ -25,27 +26,59 @@ body {
 
 /* add sorting icons to gridview sort links */
 a.asc:after, a.desc:after {
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    font-family: 'Glyphicons Halflings';
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    padding-left: 5px;
+	position: relative;
+	top: 1px;
+	display: inline-block;
+	font-family: 'Glyphicons Halflings';
+	font-style: normal;
+	font-weight: normal;
+	line-height: 1;
+	padding-left: 5px;
+}
+
+a.asc:after {
+	content: /*"\e113"*/ "\e151";
+}
+
+a.desc:after {
+	content: /*"\e114"*/ "\e152";
+}
+
+.sort-numerical a.asc:after {
+	content: "\e153";
+}
+
+.sort-numerical a.desc:after {
+	content: "\e154";
+}
+
+.sort-ordinal a.asc:after {
+	content: "\e155";
+}
+
+.sort-ordinal a.desc:after {
+	content: "\e156";
 }
 
-a.asc:after  { content: /*"\e113"*/"\e151"; }
-a.desc:after { content: /*"\e114"*/"\e152"; }
+.hint-block {
+	display: block;
+	margin-top: 5px;
+	color: #999;
+}
 
-.sort-numerical a.asc:after { content: "\e153"; }
-.sort-numerical a.desc:after { content: "\e154"; }
+.error-block {
+	display: none;
+	margin-top: 5px;
+	margin-bottom: 10px;
+	color: #a94442;
+}
 
-.sort-ordinal a.asc:after { content: "\e155"; }
-.sort-ordinal a.desc:after { content: "\e156"; }
+.has-error .error-block {
+	display: block;
+}
 
 .error-summary {
-	color: #b94a48;
+	color: #a94442;
 	background: #fdf7f7;
 	border-left: 3px solid #eed3d7;
 	padding: 10px 20px;
diff --git a/apps/basic/web/css/site.css b/apps/basic/web/css/site.css
index 7a1fb92..f460b45 100644
--- a/apps/basic/web/css/site.css
+++ b/apps/basic/web/css/site.css
@@ -26,27 +26,59 @@ body {
 
 /* add sorting icons to gridview sort links */
 a.asc:after, a.desc:after {
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    font-family: 'Glyphicons Halflings';
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    padding-left: 5px;
+	position: relative;
+	top: 1px;
+	display: inline-block;
+	font-family: 'Glyphicons Halflings';
+	font-style: normal;
+	font-weight: normal;
+	line-height: 1;
+	padding-left: 5px;
 }
 
-a.asc:after  { content: /*"\e113"*/"\e151"; }
-a.desc:after { content: /*"\e114"*/"\e152"; }
+a.asc:after {
+	content: /*"\e113"*/ "\e151";
+}
+
+a.desc:after {
+	content: /*"\e114"*/ "\e152";
+}
+
+.sort-numerical a.asc:after {
+	content: "\e153";
+}
+
+.sort-numerical a.desc:after {
+	content: "\e154";
+}
 
-.sort-numerical a.asc:after { content: "\e153"; }
-.sort-numerical a.desc:after { content: "\e154"; }
+.sort-ordinal a.asc:after {
+	content: "\e155";
+}
 
-.sort-ordinal a.asc:after { content: "\e155"; }
-.sort-ordinal a.desc:after { content: "\e156"; }
+.sort-ordinal a.desc:after {
+	content: "\e156";
+}
+
+.hint-block {
+	display: block;
+	margin-top: 5px;
+	color: #999;
+}
+
+.error-block {
+	display: none;
+	margin-top: 5px;
+	margin-bottom: 10px;
+	color: #a94442;
+}
+
+.has-error .error-block {
+	display: block;
+}
 
 .error-summary {
-	color: #b94a48;
+	color: #a94442;
 	background: #fdf7f7;
 	border-left: 3px solid #eed3d7;
 	padding: 10px 20px;
diff --git a/extensions/yii/gii/assets/main.css b/extensions/yii/gii/assets/main.css
index 1a4f794..08f7474 100644
--- a/extensions/yii/gii/assets/main.css
+++ b/extensions/yii/gii/assets/main.css
@@ -41,6 +41,25 @@ body {
 	display: none;
 }
 
+.error-block {
+	display: none;
+	margin-top: 5px;
+	margin-bottom: 10px;
+	color: #a94442;
+}
+
+.has-error .error-block {
+	display: block;
+}
+
+.error-summary {
+	color: #a94442;
+	background: #fdf7f7;
+	border-left: 3px solid #eed3d7;
+	padding: 10px 20px;
+	margin: 0 0 15px 0;
+}
+
 .default-view .sticky-value {
 	padding: 6px 12px;
 	background: lightyellow;
diff --git a/framework/CHANGELOG.md b/framework/CHANGELOG.md
index 4da9acc..a25c791 100644
--- a/framework/CHANGELOG.md
+++ b/framework/CHANGELOG.md
@@ -54,6 +54,7 @@ Yii Framework 2 Change Log
 - Chg #1586: `QueryBuilder::buildLikeCondition()` will now escape special characters and use percentage characters by default (qiangxue)
 - Chg #1610: `Html::activeCheckboxList()` and `Html::activeRadioList()` will submit an empty string if no checkbox/radio is selected (qiangxue)
 - Chg #1643: Added default value for `Captcha::options` (qiangxue)
+- Chg #1647: Changed the default CSS class of error block to be `error-block` (qiangxue)
 - Chg: Renamed `yii\jui\Widget::clientEventsMap` to `clientEventMap` (qiangxue)
 - Chg: Renamed `ActiveRecord::getPopulatedRelations()` to `getRelatedRecords()` (qiangxue)
 - Chg: Renamed `attributeName` and `className` to `targetAttribute` and `targetClass` for `UniqueValidator` and `ExistValidator` (qiangxue)
diff --git a/framework/yii/widgets/ActiveField.php b/framework/yii/widgets/ActiveField.php
index e188034..63bce96 100644
--- a/framework/yii/widgets/ActiveField.php
+++ b/framework/yii/widgets/ActiveField.php
@@ -44,7 +44,7 @@ class ActiveField extends Component
 	 * @var string the template that is used to arrange the label, the input field, the error message and the hint text.
 	 * The following tokens will be replaced when [[render()]] is called: `{label}`, `{input}`, `{error}` and `{hint}`.
 	 */
-	public $template = "{label}\n{input}\n{error}\n{hint}";
+	public $template = "{label}\n{input}\n{hint}\n{error}";
 	/**
 	 * @var array the default options for the input tags. The parameter passed to individual input methods
 	 * (e.g. [[textInput()]]) will be merged with this property when rendering the input tag.
@@ -57,7 +57,7 @@ class ActiveField extends Component
 	 *
 	 * - tag: the tag name of the container element. Defaults to "div".
 	 */
-	public $errorOptions = ['class' => 'help-block'];
+	public $errorOptions = ['class' => 'error-block'];
 	/**
 	 * @var array the default options for the label tags. The parameter passed to [[label()]] will be
 	 * merged with this property when rendering the label tag.