Added Bootstrap and updated CSS for Wilma theme to make it responsive

[milospp]

GitHub issue 3910 GitHub PR Vitro 429

What does this pull request do?

Added bootstrap (only grid style) CSS and modified Wilma theme to leverage its responsive design feature and enhance the overall layout.

What's new?

Mobile optimised desing Avoided horizontal scroll

How should this be tested?

Open every page and test by resizing up to around 400px in width (Mobile device toolbar can be used in google chrome to simulate phone display)

Additional Notes:

Here is the video example

• The Left window is VIVO with old Wilma theme
• The middle window is a new, updated Wilma theme
• The right window is Tenderfoot theme (just for comparison)

https://youtu.be/9B0_cevrEeE

[rasteginas]

Hi, when loading the main page in the Firefox browser, the search button text is not in it's place.

I also noticed that the list of tabs is not displayed correctly, like in the Tenderfoot theme.

[milospp]

Hi, when loading the main page in the Firefox browser, the search button text is not in it's place.

I also noticed that the list of tabs is not displayed correctly, like in the Tenderfoot theme.

I changed the HTML of the search bar on the homepage, can you check again does it works now on Firefox? I wasn't able to reproduce the same bug. Also, I fixed text wrapping in that menu ("View All" button) When you build an app, clear the cache and hard reload the page (sometimes the browser caches old CSS files)

[rasteginas]

I tested the template. Looks good.

[chenejac]

@milospp bootstrap.min.js should be included in the code, some bootstrap java script functions are used in the extended search.