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 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 

1
2
3
4
5
6
7
8
9
@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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 

1
2
3
4
5
6
7
8
9
@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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX