[1.3.6] Bootstrap 5 Theme

Last Post
Threads / Messages


May 21, 2013
Devon, UK
Mysidian Dollar
Okay! Hello! I am here with a theme after days of work! o_O This has taken me so long but I think it is worth it. :ROFLMAO:

I managed to get Bootstrap 5 working with the Mys script. At first I couldn't get the menu to work so I made myself a custom one, but for the purposes of giving the theme to the community I wanted to have the menu work automatically and not require a custom one... and I finally cracked it! Thanks to Kyttias for their Bootstrap 3 theme, I was able to take a lot of inspiration from it to get things working!

What does this theme include?
  • Bootstrap 5
  • JQuery to help style Mysidia things
  • Custom pagination.php to use Bootstraps classes (this does break the admin cp pagination, however I will also provide a quick fix in this post! I haven't made an adminCP theme yet, not sure if I will... but for now this does the trick!)
  • Commented CSS
  • Two CSS files
    • One to go in the general css file, this contains all of Bootstraps colours and uses variables that I set in place.... these variables are in the second file.
    • The second file is in your themes folder and contains all the colour variables! Easily change the colours without needing to manually edit everything!
With the fact I have included 2 files you can create new Bootstrap themes that use different colours without needing to copy everything over each time. The colour variables make it much easier to change things around!

Here is what the basic template looks like:

  Spoiler: Images 

2022-01-01 06_05_55-Greenshot.png

Mobile view:

2022-01-01 06_17_45-Bean Pets and 14 more pages - Personal - Microsoft Edge.png


2022-01-01 06_17_20-Bean Pets and 14 more pages - Personal - Microsoft Edge.png

I tried to keep it as simple and basic as possible, so you can customise it to your liking!

As an example of a customised version, here is mine (still a wip though):

Bootstrap 5 Screenshots.png

You can find a lot of information for how to style Bootstrap here: W3Schools

Now I'll go into a little more detail on the files!

First, the general CSS file, the one in your root folder.

In here we have 2 files.

mycss.css and reboot.css.

For the most part you can ignore reboot.css, it just contains some code that helps to make webpages more consistent across different browsers, etc.

But in mycss.css is where all the classes and stuff are!

I won't post it here because it's too long lol, but here is the table of contents in the file so you can see what it includes!


    ~ 00 - CUSTOM (put your custom css here!)
    ~ 01 - General/Typography
        ~ 1.1 - Body
        ~ 1.2 - Mark
        ~ 1.3 - Code
        ~ 1.4 - Keyboard
        ~ 1.5 - Captions
        ~ 1.6 - Blockquotes
    ~ 02 - Links
        ~ 2.1 - General links
        ~ 2.2 - Breadcrumbs
        ~ 2.3 - Pagination
        ~ 2.4 - Contextual links
            (uses primary, warning, etc, to colour them)
    ~ 03 - Images
        ~ 3.1 - Image thumbnail
        ~ 3.2 - Carousels
    ~ 04 - Tables
        ~ 4.1 - General tables
        ~ 4.2 - Contextual tables
            (uses primary, warning, etc, to colour them)
    ~ 05 - Forms
        ~ 5.1 - General forms
        ~ 5.2 - Select forms
        ~ 5.3 - Check forms
        ~ 5.4 - Range forms
        ~ 5.5 - Input forms + form validation
    ~ 06 - Buttons
        ~ 6.1 - General buttons
        ~ 6.2 - Contextual buttons
            (uses primary, warning, etc, to colour them)
        ~ 6.3 - Outline buttons
        ~ 6.4 - Accordion buttons

    ~ 07 - Menus
        ~ 7.1 - Dropdowns
        ~ 7.2 - Navbars & Navlinks
        ~ 7.3 - Offcanvas sidebar
    ~ 08 - Popups/Alerts
        ~ 8.1 - Alerts
        ~ 8.2 - Close buttons
        ~ 8.3 - Toasts
        ~ 8.4 - Modals
        ~ 8.5 - Tooltips
        ~ 8.6 - Popovers
    ~ 09 - Lists
        ~ 9.1 - List groups
    ~ 10 - Other/Misc
        ~ 10.1 - Cards
        ~ 10.2 - Badges
        ~ 10.3 - Progress bars

But it basically sets everything into place across your whole site as well as any other themes you create!

Next is myjquery.js in the js folder. This file uses JQuery to help style core mysidia things! For the most part you can leave this alone unless you want to change stuff and know how to.

/* Buttons */
$("button, input:button").addClass("btn btn-default");
$("#submit, input:button").addClass("btn btn-primary");
/* End Buttons */

/* Form Inputs */
/* End Form Inputs */

/* Tables */
$("table").addClass("table table-hover table-condensed");
$("table td").css("vertical-align","middle");
/* End Tables */

/* Sidebar */
$(".sidebar ul li").addClass("btn-group btn-primary");
$(".sidebar ul li a").addClass("btn btn-primary").css('border','0px');
$(".sidebar ul").addClass("btn-group-vertical");
$(".sidebar ul").removeClass("btn-group");
/* End Sidebar */

/* Menu */
$(".ddmenu ul:first").wrap("<div class='navbar navbar-expand-md bg-dark navbar-dark rounded-top py-3'></div>");
$(".ddmenu ul:first").wrap("<div class='container-fluid'></div>");
$(".ddmenu ul:first" ).before("<button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#collapsibleNavbar'><span class='navbar-toggler-icon'></span></button>");
$(".ddmenu ul:first").wrap("<div class='collapse navbar-collapse justify-content-center' id='collapsibleNavbar'></div>");
$(".ddmenu ul:first").addClass("navbar-nav text-end");
$(".ddmenu ul:first-child li").addClass("nav-item dropdown");
$(".ddmenu ul li a").addClass("nav-link dropdown-toggle");
$(".ddmenu ul:first-child li a").attr("role", "button").attr("data-bs-toggle", "dropdown");
$(".ddmenu ul li .hides a").removeClass("nav-link dropdown-toggle");
$(".ddmenu ul li").removeClass("hides");
$(".ddmenu ul li ul").addClass("dropdown-menu");
$(".ddmenu ul li ul li a").addClass("dropdown-item");
$(".ddmenu ul li ul li a").removeAttr("role", "button").removeAttr("data-bs-toggle", "dropdown");
$(".ddmenu ul li ul li a").removeClass("nav-link dropdown-toggle");
/* End Menu */

Next is the custom pagination.php! This redoes all the default mysidia pagination classes to use the Bootstrap ones. This is a complete override so make sure to replace the file!

Next we have the ACP pagination. Replacing the pagination.php file will break all the page links in the acp, so add this on to the bottom of the admin cp style.css to fix it! I don't have plans for an ACP theme just yet as this took me a long time to finish lol.

.pagination {
    display: flex;
    padding-right: 0;
    list-style: none;
    justify-content: center;

.page-link {
    position: relative;
    display: block;
    color: #0d6efd;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out

@media (prefers-reduced-motion:reduce) {
    .page-link {
        transition: none

.page-link:hover {
    z-index: 2;
    color: #0a58ca;
    background-color: #e9ecef;
    border-color: #dee2e6

.page-link:focus {
    z-index: 3;
    color: #0a58ca;
    background-color: #e9ecef;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)

.page-item:not(:first-child) .page-link {
    margin-right: -1px

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6

.page-link {
    padding: .375rem .75rem

.page-item:first-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem

.page-item:last-child .page-link {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem

You can also just download and replace using the file I have provided!

Next is where all the magic happens... in your themes folder there is a file called bootstrap5.css. Open it and you will see a TON of variables... for the most part you won't need to touch them, unless you want to style things in more detail...

These are the colours you will need to change to style most things:

    --kitt-primary-light-one: #bacbe6;
    --kitt-primary-light-two: #cfe2ff;
    --kitt-primary-light-three: #c5d7f2;
    --kitt-primary-light-four: #bfd1ec;
    --kitt-primary: #0d6efd;
    --kitt-primary-hover: #0a58ca;
    --kitt-primary-alert-text: #084298;

    --kitt-secondary-light-one: #cbccce;
    --kitt-secondary-light-two: #e2e3e5;
    --kitt-secondary-light-three: #d7d8da;
    --kitt-secondary-light-four: #d1d2d4;
    --kitt-secondary: #6c757d;
    --kitt-secondary-hover: #565e64;
    --kitt-secondary-alert-text: #41464b;

    --kitt-success-light-one: #bcd0c7;
    --kitt-success-light-two: #d1e7dd;
    --kitt-success-light-three: #c7dbd2;
    --kitt-success-light-four: #c1d6cc;
    --kitt-success: #198754;
    --kitt-success-hover: #146c43;
    --kitt-success-alert-text: #0f5132;

    --kitt-info-light-one: #badce3;
    --kitt-info-light-two: #cff4fc;
    --kitt-info-light-three: #c5e8ef;
    --kitt-info-light-four: #bfe2e9;
    --kitt-info: #0dcaf0;
    --kitt-info-hover: #3dd5f3;
    --kitt-info-alert-text: #055160;

    --kitt-warning-light-one: #e6dbb9;
    --kitt-warning-light-two: #fff3cd;
    --kitt-warning-light-three: #f2e7c3;
    --kitt-warning-light-four: #ece1be;
    --kitt-warning: #ffc107;
    --kitt-warning-hover: #ffcd39;
    --kitt-warning-alert-text: #664d03;

    --kitt-danger-light-one: #dfc2c4;
    --kitt-danger-light-two: #f8d7da;
    --kitt-danger-light-three: #eccccf;
    --kitt-danger-light-four: #e5c7ca;
    --kitt-danger: #dc3545;
    --kitt-danger-hover: #b02a37;
    --kitt-danger-alert-text: #842029;

    --kitt-light-light-one: #dfe0e1;
    --kitt-light-light-two: #f8f9fa;
    --kitt-light-light-three: #ecedee;
    --kitt-light-light-four: #e5e6e7;
    --kitt-light: #f8f9fa;
    --kitt-light-hover: #f9fafb;
    --kitt-light-alert-text: #636464;

    --kitt-dark-light-one: #373b3e;
    --kitt-dark-light-two: #2c3034;
    --kitt-dark-light-three: #323539;
    --kitt-dark: #212529;
    --kitt-dark-hover: #1a1e21;
    --kitt-dark-alert-text: #141619;

    --kitt-body-color: var(--kitt-dark);
    --kitt-body-bg: var(--kitt-white);
    --kitt-primary-rgb: 13, 110, 253;
    --kitt-primary-rgb-hover: 49, 132, 253;
    --kitt-secondary-rgb: 108, 117, 125;
    --kitt-secondary-rgb-hover: 130, 138, 145;
    --kitt-success-rgb: 25, 135, 84;
    --kitt-success-rbg-hover: 60, 153, 110;
    --kitt-info-rgb: 13, 202, 240;
    --kitt-info-rbg-hover: 11, 172, 204;
    --kitt-warning-rgb: 255, 193, 7;
    --kitt-warning-rbg-hover: 217, 164, 6;
    --kitt-danger-rgb: 220, 53, 69;
    --kitt-danger-rbg-hover: 225, 83, 97;
    --kitt-light-rgb: 248, 249, 250;
    --kitt-light-rbg-hover: 211, 212, 213;
    --kitt-dark-rgb: 33, 37, 41;
    --kitt-dark-rbg-hover: 66, 70, 73;
    --kitt-white-rgb: 255, 255, 255;
    --kitt-black-rgb: 0, 0, 0;

    --kitt-body-color-rgb: 33, 37, 41;
    --kitt-body-bg-rgb: 255, 255, 255;

That's just a taste though, as every class, every element, EVERYTHING, has a variable if you scroll down enough. Use CTRL+F to find what you need while editing the file. Most things use the above variables though so I recommend changing those before going into more detail lol.

Anyway! Let's get started putting it in place. I have included a .zip file with everything in it below! Download it, unzip it, and navigate to your www or public_html folder. Then you can just drag the contents in if you want because I have put everything into folders for you.

2022-01-01 06_15_13-Bootstrap 5 Mys Theme.png

Replace anything that it asks you to replace (should be the acp style.css, and the pagination.php). And that should be it for installing! Hopefully you got it working without a hitch but do comment and let me know if I made a mistake somewhere or if you need help!

Hopefully this is good for someone! :)

This post is long enough so I haven't done a tutorial on installing the theme on your site, but if you need help with that just ask! (y)


  • Bootstrap 5 Mys Theme.zip
    24.6 KB · Views: 3
  • Test Pages.zip
    4.2 KB · Views: 4
Last edited:

Hall of Famer

Staff member
Dec 15, 2008
United States
Mysidian Dollar
This looks nice, congrats on making the theme. I actually planned to use Bootstrap 4 for the next major release, but maybe Bootstrap 5 is the better option now. I am still undecided on this.


May 21, 2013
Devon, UK
Mysidian Dollar
This looks nice, congrats on making the theme. I actually planned to use Bootstrap 4 for the next major release, but maybe Bootstrap 5 is the better option now. I am still undecided on this.
Thank you! :giggle: I think it would be really cool if there was a default theme for Bootstrap with the next version, in my opinion Bootstrap 5 would be the best one to go for just because it's the most recent and some classes have changed since 4, but Bootstrap 4 is good too! I'm sure people will appreciate it either way, having a responsive theme has been quite fun! :LOL:


May 21, 2013
Devon, UK
Mysidian Dollar

Here is a test page you can use with this theme! It contains most of the things you can change the colours of (at least, the ones I found important). You can use this to see what changing the colours looks like all together.

2022-01-07 12_43_23-Greenshot.png

2022-01-07 12_43_30-Greenshot.png

Also added to the main post. :) You can drag and drop into your files as they are sorted into the right folders inside and unless you have files called testcontroller.php and testview.php nothing should overwrite. You can reach the page by going to yoursite.com/test. I recommend making a link on your index that takes you to it for ease lol.


  • Test Pages.zip
    4.2 KB · Views: 1


Super Moderator
Super Mod
Jan 26, 2014
Mysidian Dollar
Great job! I'm glad to see this theme updated to a newer version of Bootstrap by someone else. I hope in the future it is easier to add classes to the html rather than hacking it in in post with jquery. Right now the html is far too entangled in the php to comfortably work with.

Similar threads

Users who are viewing this thread

  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Latest member

Latest Threads

Latest Posts