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

Koi Tutorials

Tutorial Home
Koi - Auto-Add Bootstrap4 but inform Admin
#4 Koi - Switch between template files
Get Data from the Backend using JS

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.

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
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->

Switch between template files based on... <!-- unimportant stuff, hidden -->

@*
  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("bs3") ? "bs3" : "bs4";
}
@Html.Partial(folder + "/_Alert.cshtml")

<!-- unimportant stuff, hidden -->

Bootstrap3 template in /bs3/

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
<div class="alert alert-success pull-left" role="alert">
    <h3>You are seeing the Bootstrap3 Template</h3>
	<blockquote class="blockquote-reverse">
		"this is awesome!"
	</blockquote>
</div>

Bootstrap4 template in /bs4/

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

<div class="alert alert-success float-left" role="alert">
	<h3>You are seeing the Bootstrap4 Template</h3>
	<blockquote class="text-right">
		"this is awesome!"
	</blockquote>
</div>