How do I set Bootstrap 4: General Addon and Modification Support

Home
Search

Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.

Hi RobiNN!

Is there a way to easily switch bootstrap from 3 to 4 and vice versa or we need to touch the core files?

Which files to modify to make the switch?

Thank you in advance!

Edited by Falk on 11-03-2021 10:08, 3 y

0 replies

What value should I set this to? Does it matter to put any value to define it?

Code Download source

define('BOOTSTRAP4', 'true');

Edited by Falk on 11-03-2021 10:08, 3 y

0 replies

Falk

answered 11 Mar 2021 at 09:09 AM

Super Admin

You set this in your theme.php , might need to double check so your Bootstrap is enabled from Admin > Settings > Theme Settings.

Code Download source

define('BOOTSTRAP4', 'TRUE');

0 replies

For the best compatibility, I'm also adding additional code to replace old css classes

theme.php

Code Download source

define('BOOTSTRAP4', TRUE);

add_handler(function ($output = '') {
 return preg_replace_callback("/class=(['\"])[^('|\")]*/im", function ($m) {
 return strtr($m[0], [
 'btn-default' => 'btn-secondary',
 'panel-group' => 'panel-group',
 'panel' => 'card',
 'panel-heading' => 'card-header',
 'panel-title' => 'card-title',
 'panel-body' => 'card-body',
 'panel-footer' => 'card-footer'
 ]);
 }, $output);
});

And this css, .caret was removed from BS4 but we use it on many places

styles.css

Code Download source

.caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px dashed;
 border-top: 4px solid \9;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent
}

.dropdown-toggle:after {
 content: none !important
}

Note that you have to fix some css details manually, because it is not possible to achieve perfect compatibility between different Bootstrap versions. The code above will only reduce the number of fixes.

0 replies

Thank you @FAIK for moving this to another thread.

Thank you for your response and sorry for posting it on the other thread thinking that it was related to bootstrap.

By the way, I got it working now on bootstrap 4 and latest jquery. The only thing missing for now is the sitelinks for the header menu navigation.

@RobiNN thanks for the additional tweaks, I will try it.

You can check the progress at
dev site: https://dev.aims.ac.th
alpha site: https://alpha.aims.ac.th

The sitelink menus should look like the header menu on my alpha site but I may need to tweak it to work with bootstrap 4. Any documentation on how the sitelinks should work as well as styling tips just like on this site with icons, mega menus and description for each links on the menu? The header site menu on this site looks great. I hope there's a documentation on how we can do it as well.

Thank you for your feedback!

Edited by HACKERSOFT on 11-03-2021 16:12, 3 y

0 replies

Mega menu is just sub-links and some css. Use Inspect element to see how it's done here.

1 reply

I have such a je problem but the Inspect element helped to solve it!

Edited by DerbySverz on 11-03-2021 20:28, 3 y

0 replies

Category Forum

Themes Support

Labels

None yet

Statistics

Views 0 views
Posts 6 posts
Votes 0 votes
Topic users 4 members

4 participants

Notifications

Track thread

You are not receiving notifications from this thread.

How do I set Bootstrap 4

6 posts

PHPFusion

Resources

Community

Development