LATEST RELEASE:  FPP 7.5 - Download from here -



Welcome, Guest.
Please login or register.
Forgot your password?

+-Site Stats

Total Members: 16447
Latest: josh19002
New This Month: 18
New This Week: 4
New Today: 0
Total Posts: 132570
Total Topics: 16437
Most Online Today: 148
Most Online Ever: 7634
(January 21, 2020, 02:14:03 AM)
Users Online
Members: 0
Guests: 133
Total: 133

Why a custom/minimized bootstrap implementation in fpp?

Started by jcross, February 07, 2024, 10:17:26 AM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.


I started working on modernizing one of my plugins and actually building a UI for another one (remote donation box/push to hear music system) I've been playing with for the last few years and noticed several standard bootstrap classes are not working (like d-none).

I noticed that we aren't running a full bootstrap implementation and I'm just curious what the reasons are?

I was able to add in the specific classes with media breakpoints I need but it just doesn't feel right to have to do that.

Thanks :)



This one might require some input from some of the guys who worked on the UI redesign a few major FPP versions ago.  During the redesign, one of our requests was to keep things simpler, we didn't want to have to learn multiple frameworks or a single complex framework in order to be able to go in and make simple UI changes.  That could have been part of the reason behind using a slimmed down version.  If there are things that make sense to add and they don't balloon up the code base or effort involved to maintain the UI and they don't break anything, then I don't think we are opposed to adding any missing bits to get desired functionality.


yeah that makes sense.  I did play around a bit adding in the full bootstrap library to my dev instance but yeah it broke everything, which was expected.

It would be nice to add in the media breakpoint classes, but since I believe that is the core of boostrap it may not be possible.

Specifically for my purposes I added the following into the plugins main script file and it does what I'm needing it to.
<style scoped>
  @media screen and (min-width: 0px) {
    .d-none { display: none!important; }
    .d-inline { display: inline; }
    .d-block { display: block; }
    .d-table-cell { display: table-cell!important; }

  @media screen and (min-width: 992px) {
    .d-none { display: none!important; }
    .d-inline { display: inline; }
    .d-block { display: block; }
    .d-table-cell { display: table-cell!important; }
    .d-lg-none { display: none!important;}
    .d-lg-inline { display: inline; }
    .d-lg-block { display: block; }
    .d-lg-table-cell { display: table-cell!important; }

Powered by EzPortal
Powered by SMFPacks Menu Editor Mod