Difference between #1 and #2 of
Yii2 - Upgrading to Bootstrap 4

Revision #2 has been created by Richard Pillay on Feb 16, 2020, 3:19:10 AM with the memo:

Minor - punctuation
« previous (#1) next (#3) »

Changes

Title unchanged

Yii2 - Upgrading to Bootstrap 4

Category unchanged

How-tos

Yii version unchanged

2.0

Tags changed

newbie,Twitter Bootstrap,navbar,bootstrap4

Content changed

[...]
- Right-click on the ribbon and select "Inspect Element", or do whatever you have to do in your browser to inspect the page source. Looking at that starts to give you clues over what the navbar is doing. Looking at that, and referring back to the Bootstrap4 migration guide, I had the impression that neither navbar-inverse nor navbar-fixed-top were doing anything. So I removed those, and when refreshing the page, confirmed there were no changes.
- More reading on the Bootstrap website gave me the bg-dark I mentioned earlier, and for the text, navbar-light or navbar-dark produced results.
- now I had no menu items, but I did have a button that expanded the menu. Inspecting it's properties told me it was 'navbar-toggler', and the Bootstrap website told me it new to Bootstrap4, while it and was collapsed by default, 'navbar-expand' would expand it by default. That's cool - I reckon I'm going to add a setting for logged-in users that let them choose which they prefer. In the end, I opted for navbar-expand-md, which keeps it expanded unless the screen width is tight.

At the end of all this, I had the class line changed to something which gave me a navbar very similar to the original:
` //Bootstrap3: 'class' => 'navbar-inverse navbar-fixed-top', //Changed for Bootstrap4: 'class' => 'navbar navbar-expand-md navbar-light bg-dark', `
 
 So, that fixed my navbar. Running my tests pointed me to other problems, but I won't go into those. Now that you know the process, you can find all your errors and fix them in the same way - I need to fix problems in some of my forms where the action buttons are now being rendered in a space too small to be visible. Somehow, those problems don't seem quite so insurmountable anymore.
12 0
6 followers
Viewed: 77 266 times
Version: 2.0
Category: How-tos
Tags: bootstrap4, navbar, newbie, Twitter Bootstrap
Written by: Richard Pillay
Last updated by: Richard Pillay
Created on: Feb 16, 2020
Last updated: 4 years ago
Update Article
Revert to #1 | Revert to #2

Revisions

View all history