Upgraded bootstrap to 3.0RC1.

config/AppAsset.php

@@ -24,6 +24,6 @@ class AppAsset extends AssetBundle
 	);
 	public $depends = array(
 		'yii\web\YiiAsset',
-		'yii\bootstrap\ResponsiveAsset',
+		'yii\bootstrap\BootstrapAsset',
 	);
 }

views/layouts/main.php

@@ -21,26 +21,19 @@ app\config\AppAsset::register($this);
 <?php $this->beginBody(); ?>
 <div class="container">
 	<div class="masthead">
-		<h3 class="muted">My Company</h3>
+		<h3 class="text-muted">My Company</h3>
 
-		<div class="navbar fullwidth">
-			<div class="navbar-inner">
-				<div class="container">
-					<?php echo Menu::widget(array(
-						'options' => array('class' => 'nav'),
-						'items' => array(
-							array('label' => 'Home', 'url' => array('/site/index')),
-							array('label' => 'About', 'url' => array('/site/about')),
-							array('label' => 'Contact', 'url' => array('/site/contact')),
-							Yii::$app->user->isGuest ?
-								array('label' => 'Login', 'url' => array('/site/login')) :
-								array('label' => 'Logout (' . Yii::$app->user->identity->username .')' , 'url' => array('/site/logout')),
-						),
-					)); ?>
-				</div>
-			</div>
-		</div>
-		<!-- /.navbar -->
+		<?php echo Menu::widget(array(
+			'options' => array('class' => 'nav navbar-nav nav-justified'),
+			'items' => array(
+				array('label' => 'Home', 'url' => array('/site/index')),
+				array('label' => 'About', 'url' => array('/site/about')),
+				array('label' => 'Contact', 'url' => array('/site/contact')),
+				Yii::$app->user->isGuest ?
+					array('label' => 'Login', 'url' => array('/site/login')) :
+					array('label' => 'Logout (' . Yii::$app->user->identity->username .')' , 'url' => array('/site/logout')),
+			),
+		)); ?>
 	</div>
 
 	<?php echo Breadcrumbs::widget(array(
@@ -48,8 +41,6 @@ app\config\AppAsset::register($this);
 	)); ?>
 	<?php echo $content; ?>
 
-	<hr>
-
 	<div class="footer">
 		<p>&copy; My Company <?php echo date('Y'); ?></p>
 		<p>

views/site/contact.php

@@ -23,18 +23,20 @@ $this->params['breadcrumbs'][] = $this->title;
 	If you have business inquiries or other questions, please fill out the following form to contact us. Thank you.
 </p>
 
-<?php $form = ActiveForm::begin(array(
-	'options' => array('class' => 'form-horizontal', 'id' => 'contact-form'),
-	'fieldConfig' => array('inputOptions' => array('class' => 'input-xlarge')),
-)); ?>
-	<?php echo $form->field($model, 'name')->textInput(); ?>
-	<?php echo $form->field($model, 'email')->textInput(); ?>
-	<?php echo $form->field($model, 'subject')->textInput(); ?>
-	<?php echo $form->field($model, 'body')->textArea(array('rows' => 6)); ?>
-	<?php echo $form->field($model, 'verifyCode')->widget(Captcha::className(), array(
-		'options' => array('class' => 'input-medium'),
-	)); ?>
-	<div class="form-actions">
-		<?php echo Html::submitButton('Submit', array('class' => 'btn btn-primary')); ?>
+<div class="row">
+	<div class="col-lg-5">
+		<?php $form = ActiveForm::begin(array('id' => 'contact-form')); ?>
+			<?php echo $form->field($model, 'name')->textInput(); ?>
+			<?php echo $form->field($model, 'email')->textInput(); ?>
+			<?php echo $form->field($model, 'subject')->textInput(); ?>
+			<?php echo $form->field($model, 'body')->textArea(array('rows' => 6)); ?>
+			<?php echo $form->field($model, 'verifyCode')->widget(Captcha::className(), array(
+				'options' => array('class' => 'form-control'),
+				'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6">{input}</div></div>',
+			)); ?>
+			<div class="form-actions">
+				<?php echo Html::submitButton('Submit', array('class' => 'btn btn-primary')); ?>
+			</div>
+		<?php ActiveForm::end(); ?>
 	</div>
-<?php ActiveForm::end(); ?>
+</div>

views/site/index.php

@@ -8,40 +8,43 @@ $this->title = 'Welcome';
 	<h1>Welcome!</h1>
 
 	<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus
-		commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-	<a class="btn btn-large btn-success" href="http://www.yiiframework.com">Get started with Yii</a>
+		commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
+
+	<p><a class="btn btn-large btn-success" href="http://www.yiiframework.com">Get started with Yii</a></p>
 </div>
 
-<hr>
+<div class="body-content">
 
-<!-- Example row of columns -->
-<div class="row-fluid">
-	<div class="span4">
-		<h2>Heading</h2>
+	<!-- Example row of columns -->
+	<div class="row">
+		<div class="col-lg-4">
+			<h2>Heading</h2>
 
-		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-			condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
-			Donec sed odio dui. </p>
+			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+				condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
+				euismod. Donec sed odio dui. </p>
 
-		<p><a class="btn" href="#">View details &raquo;</a></p>
-	</div>
-	<div class="span4">
-		<h2>Heading</h2>
+			<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+		</div>
+		<div class="col-lg-4">
+			<h2>Heading</h2>
 
-		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-			condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
-			Donec sed odio dui. </p>
+			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+				condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
+				euismod. Donec sed odio dui. </p>
 
-		<p><a class="btn" href="#">View details &raquo;</a></p>
-	</div>
-	<div class="span4">
-		<h2>Heading</h2>
+			<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+		</div>
+		<div class="col-lg-4">
+			<h2>Heading</h2>
 
-		<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta
-			felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
-			massa.</p>
+			<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
+				porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
+				fermentum massa.</p>
 
-		<p><a class="btn" href="#">View details &raquo;</a></p>
+			<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+		</div>
 	</div>
+
 </div>
 

views/site/login.php

@@ -14,11 +14,15 @@ $this->params['breadcrumbs'][] = $this->title;
 
 <p>Please fill out the following fields to login:</p>
 
-<?php $form = ActiveForm::begin(array('options' => array('class' => 'form-horizontal', 'id' => 'login-form'))); ?>
-	<?php echo $form->field($model, 'username')->textInput(); ?>
-	<?php echo $form->field($model, 'password')->passwordInput(); ?>
-	<?php echo $form->field($model, 'rememberMe')->checkbox(); ?>
-	<div class="form-actions">
-		<?php echo Html::submitButton('Login', array('class' => 'btn btn-primary')); ?>
+<div class="row">
+	<div class="col-lg-3">
+		<?php $form = ActiveForm::begin(array('id' => 'login-form')); ?>
+			<?php echo $form->field($model, 'username')->textInput(); ?>
+			<?php echo $form->field($model, 'password')->passwordInput(); ?>
+			<?php echo $form->field($model, 'rememberMe', array('options' => array('class' => 'checkbox')))->checkbox(); ?>
+			<div class="form-actions">
+				<?php echo Html::submitButton('Login', array('class' => 'btn btn-primary')); ?>
+			</div>
+		<?php ActiveForm::end(); ?>
 	</div>
-<?php ActiveForm::end(); ?>
+</div>

web/css/site.css

@@ -1,78 +1,90 @@
 body {
-	padding-top: 20px;
-	padding-bottom: 60px;
+  padding-top: 20px;
 }
 
-/* Custom container */
-.container {
-	margin: 0 auto;
-	max-width: 1000px;
+/* Everything but the jumbotron gets side spacing for mobile-first views */
+.masthead,
+.body-content,
+.footer {
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
-.container > hr {
-	margin: 60px 0;
+.masthead:before,
+.masthead:after {
+  display: table;
+  content: " ";
 }
-
-/* Main marketing message and sign up button */
-.jumbotron {
-	margin: 80px 0;
-	text-align: center;
+.masthead:after {
+	clear: both;
 }
 
-.jumbotron h1 {
-	font-size: 100px;
-	line-height: 1;
+.footer {
+  border-top: 1px solid #ddd;
+  margin-top: 30px;
+  padding-top: 29px;
+  padding-bottom: 30px;
 }
 
-.jumbotron .lead {
-	font-size: 24px;
-	line-height: 1.25;
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  background-color: transparent;
 }
-
 .jumbotron .btn {
-	font-size: 21px;
-	padding: 14px 24px;
+  font-size: 21px;
+  padding: 14px 24px;
 }
 
-/* Supporting marketing content */
-.marketing {
-	margin: 60px 0;
+/* Customize the nav-justified links to be fill the entire space of the .navbar */
+.nav-justified {
+  max-height: 50px;
+  background-color: #eee;
+  border-radius: 5px;
+  border: 1px solid #ccc;
 }
-
-.marketing p + h4 {
-	margin-top: 28px;
+.nav-justified > li > a {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  color: #777;
+  font-weight: bold;
+  text-align: center;
+  border-left: 1px solid rgba(255,255,255,.75);
+  border-right: 1px solid rgba(0,0,0,.1);
+  background-color: #e5e5e5; /* Old browsers */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
+  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* IE10+ */
+  background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
+  background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
 }
-
-/* Customize the navbar links to be fill the entire space of the .navbar */
-.navbar.fullwidth .navbar-inner {
-	padding: 0;
-}
-
-.navbar.fullwidth .nav {
-	margin: 0;
-	display: table;
-	width: 100%;
+.nav-justified > .active > a {
+  background-color: #ddd;
+  background-image: none;
+  box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
 }
-
-.navbar.fullwidth .nav li {
-	display: table-cell;
-	width: 1%;
-	float: none;
+.nav-justified > li:first-child > a {
+  border-left: 0;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
 }
-
-.navbar.fullwidth .nav li a {
-	font-weight: bold;
-	text-align: center;
-	border-left: 1px solid rgba(255, 255, 255, .75);
-	border-right: 1px solid rgba(0, 0, 0, .1);
+.nav-justified > li:last-child > a {
+  border-right: 0;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
-.navbar.fullwidth .nav li:first-child a {
-	border-left: 0;
-	border-radius: 3px 0 0 3px;
-}
 
-.navbar.fullwidth .nav li:last-child a {
-	border-right: 0;
-	border-radius: 0 3px 3px 0;
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove the padding we set earlier */
+  .masthead,
+  .marketing,
+  .footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }