Search
darkmode toggle switch with local storage to remember the last selection

Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
checking the current url and then marking a link active based on that url

i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..
replicating the bootstrap dropdown toggle in jquery

here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..
bootstrap basic grid layout

nice and easy copy and paste for a basic grid layout
CSS Grid Frame Work

8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
bootstrap toggle element collapse

the example code for toggling elements, show and hide
Fix Hover Over color on list group dark mode in bootstrap

How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..
bootstrap collapse or toggle a div visibility

if you have bootstrap and want to toggle an element or show and hide a div its already built in, just use the following code to toggle something.
extracting the useful bits of bootstrap

Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..
Bootstrap 4 Center menu items in a navbar

Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens. Add the follow..
Bootstrap Darkmode Switch

I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..
Custom 12 Grid using CSS Grid

For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
Bootstrap Card Formatting HTML and CSS - Header and Footer

just a bootstrap card format with header and footer elements, makes a piece of content neat easily
responsive viewport meta tag

this one meta tag will make the page appear correctly on mobile devices. You may need to do other things to get all the other elements to fit. Here is the one I usually use <meta name="viewp..
bootstrap styled buttons

Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..
truncate text long titles with text overflow ellipsis

this one can be useful for fitting text into smaller places without it looking broken. text-overflow: ellipsis; this basically adds the 3 dots where the end of the text used to be... Also if you are ..