Search Code
Search Code by entering your search text above.
Site Updates
Welcome Widget Card - Toggle

Testing the welcome widget with a more or less toggle.  This version seems to work, with a jquery slide toggle. 

5:07 am, June 10, 2022
Footer Design and Redesign

I never usually look this far down on the site, but its a bit average... Lets fix it!   Some simple changes Just a few elements added and moved around a bit. Added another row to the f..

12:31 am, April 1, 2022
bootstrap templates
card.html template

a card template with title, content and a mb-3 for bottom margin for usage with the php template system.

4:52 am, January 18, 2022
bootstrap form basic

a nice simple bootstrap form layout example template

11:49 pm, January 17, 2022
add a divider to your dropdown nav toggles

good for seperating menu sections in the same dropdown item add this to your toggle <li><hr class="dropdown-divider"></li>

2:38 am, October 24, 2021
bootstrap alert template

here is a templated bootstrap alert where you can switch the alert type with the @alert_type variable. Here are the different alerts: primary secondary success danger warning info light dar..

12:53 am, October 8, 2021
bootstrap list group card with footer

a list group within a card and also a footer on the card for additional links. 

12:13 am, October 8, 2021
list group bootstrap template

this generates a bootstrap list group basic template layout, nice option for lists with links in them rather than using a ul li style list, this makes them into neater looking elements so rather than ..

11:43 pm, October 7, 2021
bootstrap dark mode

Bootstrap Darkmode    CSS Dark Mode Preparing for dark mod..

1:24 am, August 19, 2021
center mode slick zoom testing

update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..

5:17 am, August 10, 2021
add some foundation tabs working example

they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..

5:01 am, August 3, 2021
white space break word css

controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..

5:36 am, July 27, 2021
foundation grid for 6.6x - also known as the foundation xy grid

some foundation grid demos for 6.6x foundation you can get foundation here: or here  more docs on this here: https://get.foundatio..

5:00 am, July 9, 2021
scroll down the page using a button click

scrolling down 600px from where you currently are on the screen demo vid

12:25 am, June 23, 2021
site documentation
for auto filled fields, need to change the text and background colours

for some reason bootstrap or the browser is doing this to auto filled fields.  according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..

12:11 am, June 17, 2021
site documentation
dropdown section

What generates the dropdown widget items? generated by the function generate_section_button() per class template file section-dropdown-bootstrap.html  

6:53 am, June 9, 2021
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..

8:49 am, January 21, 2021
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. ..

1:32 am, January 13, 2021
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 ..

2:36 am, December 17, 2020
chevron right

5:12 am, December 11, 2020
bootstrap basic grid layout

nice and easy copy and paste for a basic grid layout

1:45 am, December 11, 2020
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..

10:56 pm, December 7, 2020
bootstrap toggle element collapse

the example code for toggling elements, show and hide

1:34 am, December 4, 2020
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..

12:31 am, November 23, 2020
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. 

1:13 am, September 28, 2020
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..

5:14 am, August 31, 2020
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..

12:05 am, August 28, 2020
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..

11:54 pm, August 18, 2020
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..

2:19 am, September 6, 2019
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

2:38 am, July 10, 2019
responsive viewport meta tag (responsive 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="viewport" ..

6:20 am, August 31, 2018
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..

6:20 am, August 31, 2018
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 ..

6:20 am, August 31, 2018

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕


Subscribe to weekly update emails.
Random Quote
You drown not by falling in the river, but by staying submerged.
Random CSS Property


The scroll-padding-top property defines offsets for the top of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
scroll-padding-top css reference