Forum

• TF Learn

Hello, my Joomla template loads the Bootstrap version which is shipped by default with Joomla!, which is Bootstrap version 2.3.2.

This is an old version of Bootstrap and the TF Learn module seems to load style elements from Bootstrap version 4, such as cards. Therefore my course pages aren't stylized properly.

Is there a way to create an override for my course pages so that they load Bootstrap 4?

Thanks

Can you add custom CSS to your template?

Yes, with custom.css

But I'd rather not load up the custom.CSS file with code from Bootstrap.  I'd rather use some sort of override. This question thread on Stack Exchange specifically references loading a separate bootstrap version from the default, but I'm not sure how to do this.

https://joomla.stackexchange.com/questions/731/which-bootstrap-version-should-be-used-v2-3-or-v3-in-new-extensions

You have to add just few lines of CSS code in custom.css for card layout. This is the proper and best way instead of loading complete bootstrap.

It's not just the cards, though.  There is a lot of Bootstrap 4 styling in the front end that just won't work with the default version of Bootstrap shipped with Joomla.

For example, the Module Title Class in the Course configuration is styled by default as: bg-primary text-white p-2 rounded my-2

None of these styling options work in Bootstrap 2. For example, bg-primary and text-white are Bootstrap 4 specific colour options. Rounded borders don't exist in Boostrap 2. And the bootstrap 4 spacing options such as my-2 won't work either for the same reason.

So in order for this extension to work 'out of the box', I need to find a way to load Bootstrap 4 along with this extension, so it displays properly on my webpage. Maybe there's a plugin that does this?

Anyway, I went ahead and grabbed some CSS code from https://github.com/twbs/bootstrap/releases/download/v4.6.0/bootstrap-4.6.0-dist.zip and just copy-pasted into my custom.css file and it sort of works. It's not great, but it's not terrible either.

In future releases, please consider shipping the TF Learn extension with Bootstrap 4 so it overrides the default version of Bootstrap loaded by the template. As in my case, the version loaded is incompatible because it is too old. Of course this won't be necessary in Joomla! 4 because it will automatically ship with a much more recent version of Bootstrap, but we aren't there yet unfortunately.

Thanks!