Bootstrap cards as selectable radio buttons
Turning bootstrap cards into selectable radio buttons with active states using jQuery. CodePen example. To do this you will need Bootstrap and jQuery. Function to unselect (uncheck) all of the…
Tag: HTML
Change progress bar colour based on progress value
Changing a progress bar colour based on what value its progress is at. This is done using jQuery and the default Bootstrap colour classes. CodePen example. The jQuery: $(document).ready(function ()…
DataTables link in column example
An example of putting links in DataTables columns that includes the rows data. This is done with column render whereby you want to modify the data being outputted by DataTables….
Draggable Bootstrap grid with order saving
A draggable Bootstrap grid that will save the order for future usage. The drag feature is implemented with gridstrap.js. The concept being on page load get the grid order from…
Live toggle button status update with AJAX
How to make a live Bootstrap toggle button switch update by using Ajax and jQuery. The toggle button updates live to the database with no page reloading needed. I have…
Bootstrap video player with information bar
The HTML framework for a simple video player with an information bar showing details that is fully responsive. Being responsive means the view from a large to mobile screen (small)…
Javascript click button to copy textarea or input
How to do a button click to copy for a text box or input with HTML and a little bit of Javascript. The HTML (bootstrap): <div class=”container”> <div class=”row mt-2″>…
Bootstrap collapse example
Bootstrap collapse allows you to add toggles to show and hide HTML content. This is handy for avoiding an overload of information on a page. This method will still show…
HTML form inputs based on a select element
Creating an HTML form that is dynamic based on what is selected. Certain form input elements will be shown based on the initial select dropdown. CodePen link. As you can…
Importance of headings in your web content
One of the most commonly known SEO practices is breaking up your web page content with headings. Ranging from h1 as the biggest, highest importance through to h6 which is…