{"id":16416665,"url":"https://github.com/javatmp/bootstrap-card-extender","last_synced_at":"2026-01-12T06:43:02.963Z","repository":{"id":32952191,"uuid":"122992737","full_name":"JavaTMP/bootstrap-card-extender","owner":"JavaTMP","description":"Extending bootstrap card by adding option buttons that help make Bootstrap Card more responsive and interactive","archived":false,"fork":false,"pushed_at":"2022-12-07T17:49:10.000Z","size":653,"stargazers_count":0,"open_issues_count":15,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-13T03:37:10.737Z","etag":null,"topics":["bootstrap","jquery"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JavaTMP.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-26T15:54:36.000Z","updated_at":"2020-02-09T06:51:16.000Z","dependencies_parsed_at":"2023-01-14T22:48:31.756Z","dependency_job_id":null,"html_url":"https://github.com/JavaTMP/bootstrap-card-extender","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JavaTMP%2Fbootstrap-card-extender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JavaTMP%2Fbootstrap-card-extender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JavaTMP%2Fbootstrap-card-extender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JavaTMP%2Fbootstrap-card-extender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JavaTMP","download_url":"https://codeload.github.com/JavaTMP/bootstrap-card-extender/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246939177,"owners_count":20857916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","jquery"],"created_at":"2024-10-11T07:09:48.512Z","updated_at":"2026-01-12T06:43:02.957Z","avatar_url":"https://github.com/JavaTMP.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Card Extender\nExtending bootstrap card by adding option buttons that help make Bootstrap Card more responsive and interactive\n\n## Installation Using NPM\n```\nnpm install bootstrap-card-extender\n```\n\n## Building from The source\nMake sure node.js and git client are locally installed on your machine and then run the following commands:\n```\ncd bootstrap-card-extender\nnpm install\ngulp\n```\n## Tutorial\nWe extend default Bootstrap Card by using [Bootstrap Card Extender plugin](https://github.com/JavaTMP/bootstrap-card-extender) \nwhich adds options and tool buttons that help us interact with and make Bootstrap Card more responsive and interactive.\nThe main extended options are:\n*   Collapsible Card Option\n*   Fullscreen Card Expander Option\n*   Removing Card Option\n*   Resorting and Moving Card Option (Using jQueryUI Sortable Plugin)\n\n### Extend Bootstrap Card HTML Code\nThe native Bootstrap card html with header is:\n```\n\u003cdiv class=\"card\"\u003e\n    \u003cdiv class=\"card-header\"\u003e\n        Card Header\n    \u003c/div\u003e\n    \u003cdiv class=\"card-body\"\u003e\n        ...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nWe extended the native Bootstrap Card HTML code above by adding the following:\n```\n\u003cdiv class=\"card\"\u003e\n    \u003cdiv class=\"card-header\"\u003e\n        Card\n        \u003cdiv class=\"options float-right\"\u003e\n            \u003ca class=\"settings\"\u003e\u003ci class=\"fa fa-cog\"\u003e\u003c/i\u003e\u003c/a\u003e\n            \u003ca href=\"#\" class=\"collapse\"\u003e\u003ci class=\"fa fa-chevron-up\"\u003e\u003c/i\u003e\u003c/a\u003e\n            \u003ca href=\"#\" class=\"reload\"\u003e\u003ci class=\"fa fa-refresh\"\u003e\u003c/i\u003e\u003c/a\u003e\n            \u003ca href=\"#\" class=\"fullscreen\"\u003e\u003ci class=\" fa fa-expand\"\u003e\u003c/i\u003e\u003c/a\u003e\n            \u003ca href=\"#\" class=\"remove\"\u003e\u003ci class=\"fa fa-times\"\u003e\u003c/i\u003e\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"card-body\"\u003e\n        ...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Collapsible Bootstrap Card Option\nWe extended default bootstrap card by supporting card collapsing option using simply jQuery `slideUp` and `slideDown` functions\nand we changed icons for collapsible button using Font Awesome `fa-chevron-up` and `fa-chevron-down` icons.\nThe following Javascript code implements collapsible Bootstrap Card Option in `javatmp.js` file:\n```\n$('body').on('click', '.card \u003e .card-header a.collapse, .card \u003e .card-header a.expand', function (e) {\n    e.preventDefault();\n    var el = $(this).closest(\".card\").find(\".card-body\");\n    if ($(this).hasClass(\"collapse\")) {\n        $(this).removeClass(\"collapse\").addClass(\"expand\");\n        el.slideUp(200);\n        if ($(this).children('i').hasClass('fa-chevron-up')) {\n            $(this).children('i').removeClass('fa-chevron-up');\n            $(this).children('i').addClass('fa-chevron-down');\n        }\n    } else {\n        $(this).removeClass(\"expand\").addClass(\"collapse\");\n        el.slideDown(200);\n        if ($(this).children('i').hasClass('fa-chevron-down')) {\n            $(this).children('i').removeClass('fa-chevron-down');\n            $(this).children('i').addClass('fa-chevron-up');\n        }\n    }\n});\n```\n\n### Removing Card Option\nWe extend native Bootstrap Card by supporting remove button in `.options` div using the following Javascript code in `javatmp.js`:\n```\n$('body').on('click', '.card \u003e .card-header a.remove', function (e) {\n    e.preventDefault();\n    var panel = $(this).closest(\".card\");\n\n    if ($('html').hasClass('card-fullscreen')) {\n        $('html').removeClass('card-fullscreen');\n    }\n\n    panel.remove();\n});\n```\n\n### Fullscreen Card Expander Option\nWe extended native Bootstrap Card by supporting Fullscreen Card View button using CSS styling and Javascript code.\nThe following CSS styling in `./web/assets/src/sass/partials/card.scss` SASS file defines the rules needed to implement\nfullscreen feature:\n```\n.card-fullscreen {\n    overflow: hidden;\n}\n\n.card {\n    \u0026.fullscreen {\n        z-index: 1031;\n        margin: 0!important;\n        position: fixed;\n        top: 0!important;\n        left: 0!important;\n        bottom: 0px!important;\n        right: 0!important;\n        width: 100%!important;\n        height: 100%!important;\n        background: #fff;\n        \u003e .card-body {\n            overflow-y: auto;\n            overflow-x: hidden;\n        }\n    }\n}\n```\nThe following Javascript for implmenting fullscreen feature in `javatmp.js`:\n```\n$('body').on('click', '.card \u003e .card-header a.fullscreen', function (e) {\n    e.preventDefault();\n    var panel = $(this).closest(\".card\");\n    if (panel.hasClass('fullscreen')) {\n        $(this).removeClass('on');\n        panel.removeClass('fullscreen');\n        $('html').removeClass('card-fullscreen');\n\n        if ($(this).children('i').hasClass('fa-compress')) {\n            $(this).children('i').removeClass('fa-compress');\n            $(this).children('i').addClass('fa-expand');\n        }\n\n        panel.children('.card-body').css('height', 'auto');\n        panel.trigger(javatmp.settings.cardFullscreenCompress, \\[panel\\]);\n\n    } else {\n        $(this).addClass('on');\n        panel.addClass('fullscreen');\n        $('html').addClass('card-fullscreen');\n\n        var height = viewport().height\n                - panel.children('.card-header').outerHeight()\n                - (panel.children(\".card-footer\").length \u003e 0 ? panel.children('.card-footer').outerHeight() : 0);\n\n        panel.children('.card-body').css('height', height);\n\n        if ($(this).children('i').hasClass('fa-expand')) {\n            $(this).children('i').removeClass('fa-expand');\n            $(this).children('i').addClass('fa-compress');\n        }\n\n        panel.trigger(javatmp.settings.cardFullscreenExpand, \\[panel\\]);\n\n    }\n});\n```\n\n### Moving Bootstrap Card Option\nWe extended native Bootstrap Card by supporting moving and resorting cards inside .col div that help to implements a kind of Kanban Board or Agile's scrum backlogs. We used jQueryUI Sortable Pluin but we include complete jQueryUI library instead of only sortable plugin. \n\nThe following demo page show the implementation of Bootstrap card resorting in separate page: [Sortable Cards using JqueryUI sortable Plugin JavaTMP Demo Page](http://java.javatmp.com/#/pages/static/custom-components/sortable-cards \"Sortable Cards using JqueryUI sortable Plugin JavaTMP Demo Page\").\n\nNormally this feature is not required by most projects and because jQueryUI is not naturally intended to be in a Bootstrap Template we implemented it in the same above demo page. So, kindly see the above demo page HTML source code for more details.\n\nWe should include jQueryUI library before bootstrap one, So for this reason we included it globally in index.html. As we said before if you are not interested in this feature you can remove jQueryUI library.\n\n## Copyright and License\nbootstrap-card-extender is copyrighted by [JavaTMP](http://www.javatmp.com) and licensed under [MIT license](https://github.com/JavaTMP/bootstrap-card-extender/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavatmp%2Fbootstrap-card-extender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavatmp%2Fbootstrap-card-extender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavatmp%2Fbootstrap-card-extender/lists"}