PHP Versions Question posted in
You can find a list of all versions here.

Php versions – install bootstrap4 for yii2 default template

Tried to install bootstrap4 for yii2 basic template using several guides. Seems It didn’t go as intended.

What I did:

1) cmd: composer create-project --prefer-dist yiisoft/yii2-app-basic // install yii2

Result: yii2 basic template works using bootstrap3

2.1) cmd: cd yii2-app-basic // go to yii2 folder

2.2) cmd: composer require --prefer-dist yiisoft/yii2-bootstrap4 // install bootstrap4 for yii2

2.3) Updated dependencies in assetsAppAsset.php:

public $depends = [
    'yiiwebYiiAsset',
    'yiibootstrap4BootstrapAsset',
];

Result: two bootstrap <link>s in <head> (bootstrap3 + bootstrap4). Navbar looks bad:
Navbar looks bad

3) Updated viewslayoutsmain.php:

use yiibootstrap4Nav;
use yiibootstrap4NavBar;

Result: small-screen navbar version without button icon (on all screen sizes):
small-screen version

4) cmd: composer remove yiisoft/yii2-bootstrap // remove bootstrap3

Result: “Class ‘yiibootstrapWidget’ not found”

5) Changed “yiibootstrap” to “yiibootstrap4” for all *.php files in /yii2-app-basic/

Result: same as (3)

What am I doing wrong?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Seems that problem with navbar was because of this:

    NavBar::begin([
    'brandLabel' => Yii::$app->name,
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse navbar-fixed-top', // THIS LINE
    ],
]);

    It forced navbar to render as <nav id="w0" class="navbar-inverse navbar-fixed-top navbar"> while bootstrap4 navbar needs navbar-expand and color scheme class eg. navbar-dark

    So we can:

    1) delete mentioned 'class' line >> navbar will render as <nav id="w0" class="navbar navbar-expand-lg navbar-light bg-light">

    2) or update it: 'class' => 'fixed-top navbar-expand-lg navbar-dark bg-dark',

    Same goes for button classes, etc... Just need to change it to bootstrap4 variation.


  2. 0

    Most of widgets in default views of yii2 projects use yiibootstrapBootstrapAsset (bootstrap 3).
    Do not expect it magically toggle when you call yiibootstrap4BootstrapAsset.

    Your step 2.3 is just adds bootstrap 4 to all other libraries you call by using widgets.

    What you can do:

    1) make sure you are calling yiibootstrap4 widgets and not calling yiibootstrapBootstrapAsset or any assets that depends on this class. Examples:

    • use yiibootstrap4Html;
    • use yiibootstrap4Modal;
    • use yiibootstrap4Tabs;
    • use yiibootstrap4ActiveForm;

    2) Remember that bootstrap 4 have different classes than bootstrap 3. So if you will apply it to default views it highly likely will break because it does not have some classes from other version, or js acting differently.

    Login or Signup to reply.
  3. 0

    Probably in Widgets folder at the root of project, in Alert.php file you need to change :

    class Alert extends yiibootstrapWidget

    to

    class Alert extends yiibootstrap4Widget
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search