Skip to main content
Home  › ... 2sxc Apps › 2sxc Tutorial

Koi Tutorials

Tutorial Home
Introduction - Koi - Cool things with CSS-Frameworks and Classes
#2 Koi - Auto-Add Bootstrap4 if missing
Koi - Auto-Add Bootstrap4 but inform Admin

Auto-Include Bootstrap4 If Not Already Included

In this example, we'll assume your template needs Bootstrap4 as the preferred CSS framework. Note that this works for other frameworks as well, with minor modifications. But if it's used on any page, you may have one of the following situations:

  • Bootstrap4 could already be included - so you shouldn't do anything
  • A different CSS framework is included - so you should include Bootstrap4 automatically
  • The current CSS framework can't be detected, so to be safe, you should include Bootstrap 4 as well, until the theme is updated to broadcast what it's using

This page shows how to handle these problems with almost no code. Note that we've place the code in a separate file and use a helper to achieve this, as this allows us to re-use the code in multiple templates.
BTW: to see that this works, try switching the theme of this page to one without a koi.json or one with a different css-framework.

Requirements
Resources

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->

Auto-Include Bootstrap4 If Not Already... <!-- unimportant stuff, hidden -->
@{  
  var bsCheck = CreateInstance("../shared/Bootstrap4.cs");  
  bsCheck.EnsureBootstrap4();
}


<!-- unimportant stuff, hidden -->

Source Code of Bootstrap4.cs

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

using ToSic.Razor.Blade;

public class Bootstrap4 : Custom.Hybrid.Code14
{
  // if the theme framework is not BS4, just activate/load it from the WebResources
  // this solves both the cases where its unknown, or another framework
  public void EnsureBootstrap4()
  {
    if(Kit.Css.IsUnknown) {
      Kit.Page.Activate("Bootstrap4");
    }
  }

  // show warning for admin if koi.json is missing
  public dynamic WarnAboutMissingOrUnknownBootstrap() {
    if (Kit.Css.IsUnknown && CmsContext.User.IsSiteAdmin) {
      return Tag.Div().Class("dnnFormMessage dnnFormWarning").Wrap(
        Connect.Koi.Messages.CssInformationMissing,
        Tag.Br(),
        Connect.Koi.Messages.OnlyAdminsSeeThis
      );
    }
    return null;
  }
}