#4 Koi - Switch between template files
Switch between template files based on Bootstrap Version
In this example, we'll assume you have a Bootstrap3 and a Bootstrap4 template in the folders bs3/_Line.cshtml
and the same in bs4/_Line.cshtml
. We'll use Koi to load the right template file.
You can see in the source-codes that BS3 uses pull-left
and another class on the blockquote tag than BS4.

Output
You are seeing the Bootstrap5 Template
"this is pretty awesome!"
#4 Koi - Switch between template files
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 @using ToSic.Razor.Blade; <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <div class="row"> <div class="col-lg-8"> <h2>Switch between template files based on Bootstrap Version</h2> <p> In this example, we'll assume you have a Bootstrap3 and a Bootstrap4 template in the folders <code>bs3/_Line.cshtml</code> and the same in <code>bs4/_Line.cshtml</code>. We'll use Koi to load the right template file. </p> <p> You can see in the source-codes that BS3 uses <code>pull-left</code> and another class on the blockquote tag than BS4. </p> </div> <div class="col-lg-4"> <img loading="lazy" src="@App.Path/koi/assets/koi.png?w=200"> </div> </div> </div> </div> @* This page is just an entry point for your code. It will do the following: 1. Check if it can detect the CSS framework used by the theme - if yes, it will use that - otherwise it will fallback to assume it's bootstrap 4 = "bs4" - note that the BS4 edition has an additional check for unknown frameworks 2. Then it will load the real cshtml-template from the matching edition-folder *@ @{ var folder = Kit.Css.Is("bs5") ? "bs5" : Kit.Css.Is("bs4") ? "bs4" : "bs3"; } @Html.Partial(folder + "/Alert.cshtml") @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })