Bootstrap 4

Wrapper classes for new Bootstrap 4 CSS Framework for Yii 2 and/or LUYA.

• Bootstrap 4 Alpha = RC4
• Bootstrap 4 Beta 2 = RC5
• Bootstrap 4 Beta 3 = RC6
• Bootstrap 4 1.0.0 = RC7

Attention: As of Bootstrap 4, the grid is completely written in FLEX. Check the Browser Support to decide if you want to use Bootstrap 4 for your Project.

• Widgets
  • ActiveForm Widget (Yii ActiveForm Widget matching the Bootstrap 4 form styles)
  • Breadcrumbs
  • LinkPager
  • ActiveField Widget
  • Grid View / Action Column
• Tags
  • Tooltips
• CMS Blocks
  • Image
  • Grid (Layout)
  • Carousel
• Asset File (contains precompiled bootstrap4 css and js files via cdn)

Installation

Add the package to your project via composer

composer require luyadev/luya-bootstrap4:^1.0@dev

and run the import command afterwards

./luya import

AS this extension is only a library with "helper" classes you can now use the helpers.

Assets Resources of Bootstrap

To use the css and js files of bootstrap just register the Bootstrap4Asset into your layout file with the following code of your layout.php file:

luya\bootstrap4\Bootstrap4Asset::register($this)

At the top section of your layout file. This will include all required css and js files to use bootstrap 4 and set the right depenecy with jquery.

ActiveForm Usage

A common way to build forms is the use thy Yii2 ActiveForm widget, to match all bootstrap4 components use it like following:

<?php
use luya\bootstrap4\ActiveForm;
use yii\helpers\Html;

/* @var $this luya\web\View */
/* @var $form luya\bootstrap4\ActiveForm */
?>
<h1>Bootstrap 4 ActiveForm</h1>
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password')->passwordInput() ?>
    <?= Html::submitButton('Login', ['class' => 'btn btn-primary-outline']) ?>
<?php ActiveForm::end() ?>

Tip: In order to style required fields with asterisks, you can use the following CSS:

div.required label.control-label:after {
   content: " *";
   color: red;
}