{"id":15045264,"url":"https://github.com/jenkinsci/bootstrap5-api-plugin","last_synced_at":"2025-10-19T21:31:06.126Z","repository":{"id":38120664,"uuid":"359146753","full_name":"jenkinsci/bootstrap5-api-plugin","owner":"jenkinsci","description":"Jenkins plug-in that provides Bootstrap 5 (https://getbootstrap.com)","archived":false,"fork":false,"pushed_at":"2025-01-27T05:08:19.000Z","size":1152,"stargazers_count":3,"open_issues_count":5,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-30T04:24:56.171Z","etag":null,"topics":["api-plugin","jenkins-plugin"],"latest_commit_sha":null,"homepage":"https://plugins.jenkins.io/bootstrap5-api/","language":"Java","has_issues":false,"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/jenkinsci.png","metadata":{"files":{"readme":"README.adoc","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-18T13:12:01.000Z","updated_at":"2024-12-30T11:02:38.000Z","dependencies_parsed_at":"2024-04-05T07:23:06.834Z","dependency_job_id":"2d8d0d4f-89bb-4325-8e6a-14ab9814d204","html_url":"https://github.com/jenkinsci/bootstrap5-api-plugin","commit_stats":{"total_commits":451,"total_committers":8,"mean_commits":56.375,"dds":0.4878048780487805,"last_synced_commit":"25db739992cf5d377f2080b5868b75702eee7e51"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenkinsci%2Fbootstrap5-api-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenkinsci%2Fbootstrap5-api-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenkinsci%2Fbootstrap5-api-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenkinsci%2Fbootstrap5-api-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jenkinsci","download_url":"https://codeload.github.com/jenkinsci/bootstrap5-api-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237215757,"owners_count":19273551,"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":["api-plugin","jenkins-plugin"],"created_at":"2024-09-24T20:51:39.248Z","updated_at":"2025-10-19T21:31:05.772Z","avatar_url":"https://github.com/jenkinsci.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":":tip-caption: :bulb:\n:imagesdir: etc/images\n\n= Bootstrap 5 Jenkins Plugin\n\nimage:https://ci.jenkins.io/job/Plugins/job/bootstrap5-api-plugin/job/main/badge/icon?subject=Jenkins%20CI[Jenkins, link=https://ci.jenkins.io/job/Plugins/job/bootstrap5-api-plugin/job/main/]\nimage:https://github.com/jenkinsci/bootstrap5-api-plugin/workflows/GitHub%20CI/badge.svg[GitHub Actions, link=https://github.com/jenkinsci/bootstrap5-api-plugin/actions]\nimage:https://img.shields.io/github/issues-pr/jenkinsci/bootstrap5-api-plugin.svg[GitHub pull requests, link=https://github.com/jenkinsci/bootstrap5-api-plugin/pulls]\n\nProvides https://getbootstrap.com/[Bootstrap 5] for Jenkins Plugins. Bootstrap is -- according to their self-perception --\nthe world’s most popular front-end component library to build responsive, mobile-first projects on the web. It is\nan open source toolkit for developing with HTML, CSS, and JS. Developers can quickly prototype their ideas or\nbuild entire apps with their Sass variables and mixins, responsive grid system, extensive prebuilt components,\nand powerful plugins.\n\nThis plugin bundles the latest release and corresponding Jenkins UI elements.\nNote that the Bootstrap release build has been adapted to integrate well with the existing Jenkins styles. For\nmore details please see `bootstrap-custom-build.scss`. The build process uses `npm` to actually rebuild Bootstrap from\nsources and `maven` to bundle everything as a Jenkins plugin.\n\n== Visualizing the media breakpoints\n\nYou can see the available breakpoints by including the following HTML snippet in your view:\n\n[source,xml]\n----\n\u003cdiv class=\"row py-3\"\u003e\n    \u003cdiv class=\"col-12\"\u003e\n        \u003cspan class=\"badge bg-secondary d-xxxl-inline d-none\"\u003exxxl\u003c/span\u003e\n        \u003cspan class=\"badge bg-secondary d-xxl-inline d-xxxl-none d-none\"\u003exxl\u003c/span\u003e\n        \u003cspan class=\"badge bg-secondary d-xl-inline d-xxl-none d-none\"\u003exl\u003c/span\u003e\n        \u003cspan class=\"badge bg-secondary d-lg-inline d-xl-none d-none\"\u003elg\u003c/span\u003e\n        \u003cspan class=\"badge bg-secondary d-md-inline d-lg-none d-none\"\u003emd\u003c/span\u003e\n        \u003cspan class=\"badge bg-secondary d-sm-inline d-md-none d-none\"\u003esm\u003c/span\u003e\n        \u003cspan class=\"badge bg-secondary d-inline d-sm-none\"\u003exs\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n----\n\n== How to use the plugin\n\nIn order to use this JS library, add a maven dependency to your pom:\n\n[source,xml]\n----\n\u003cdependency\u003e\n  \u003cgroupId\u003eio.jenkins.plugins\u003c/groupId\u003e\n  \u003cartifactId\u003ebootstrap5-api\u003c/artifactId\u003e\n  \u003cversion\u003e[latest version]\u003c/version\u003e\n\u003c/dependency\u003e\n----\n\n=== Grid layout\n\nThe first thing to decide is, which elements should be shown on a plugin page and how much space each element\nshould occupy. Typically, all visible components are mapped on the available space using a simple grid.\nIn a Jenkins view we have a fixed header and footer and a navigation bar on the left\n(20 percent of the horizontal space). The rest of a screen can be used by\na details view. In order to simplify the distribution of elements in that remaining space we use\nhttps://getbootstrap.com/docs/5.1/layout/grid/[Bootstrap's grid system].\n\n.Jenkins layout with a details view that contains a grid system\n[#img-grid]\nimage::grid.png[Grid layout in Jenkins]\n\nThat means, a view is split into 12 columns and and arbitrary number of rows. This grid system is simple to use\n(but complex enough to also support fancy screen layouts) - I won't go into\ndetails here, please refer to the https://getbootstrap.com/docs/5.1/layout/grid/[Bootstrap documentation]\nfor details.\n\nFor the forensics detail view we use a simple grid of two rows and two columns. Since the number of columns always is 12\nwe need to create two \"fat\" columns that fill 6 of the standard columns. In order to create such a view in our plugin we\nneed to create a view given as a jelly file and a corresponding Java view model object. A view with this layout\nis shown in the following snippet:\n\n[source,xml,linenums]\n.index.jelly\n----\n\u003c?jelly escape-by-default='true'?\u003e\n\u003cj:jelly xmlns:j=\"jelly:core\" xmlns:st=\"jelly:stapler\" xmlns:l=\"/lib/layout\" \u003e\n\n  \u003cl:layout title=\"${it.displayName}\" norefresh=\"true\" nogrid=\"true\"\u003e \u003c1\u003e\n    \u003cst:include it=\"${it.owner}\" page=\"sidepanel.jelly\"/\u003e\n    \u003cl:main-panel\u003e\n      \u003cst:adjunct includes=\"io.jenkins.plugins.bootstrap5\"/\u003e \u003c2\u003e\n      \u003cdiv class=\"fluid-container\"\u003e \u003c3\u003e\n\n        \u003cdiv class=\"row py-3\"\u003e \u003c4\u003e\n          \u003cdiv class=\"col-6\"\u003e \u003c5\u003e\n            Content of column 1 in row 1\n          \u003c/div\u003e\n          \u003cdiv class=\"col-6\"\u003e \u003c6\u003e\n            Content of column 2 in row 1\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"row py-3\"\u003e \u003c7\u003e\n          \u003cdiv class=\"col\"\u003e \u003c8\u003e\n            Content of row 2\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n      \u003c/div\u003e\n    \u003c/l:main-panel\u003e\n  \u003c/l:layout\u003e\n\u003c/j:jelly\u003e\n----\n\u003c1\u003e Enable the property `nogrid` so we can use the bootstrap built-in grid (and not the Jenkins grid). Otherwise the layout will break.\n\u003c2\u003e Import Bootstrap 5: Importing of JS and CSS components is done using the adjunct concept,\nwhich is the preferred way of referencing static resources within Jenkins' Stapler Web framework.\n\u003c3\u003e The whole view will be placed into a fluid container that fills up the whole screen (100% width).\n\u003c4\u003e A new row of the view is specified with class `row`. The additional class `py-3` defines the padding to use for\nthis row, see https://getbootstrap.com/docs/5.2/utilities/spacing/[Bootstrap Spacing] for more details.\n\u003c5\u003e Since Bootstrap automatically splits up a row into 12 equal sized columns we define here\nthat the first column should occupy 6 of these 12 columns. You can also leave off the detailed numbers, then Bootstrap will\nautomatically distribute the content in the available space. Just be aware that this not what you want in most of the times.\n\u003c6\u003e The second column uses the remaining space, i.e. 6 of the 12 columns.\n\u003c7\u003e The second row uses the same layout as row 1.\n\u003c8\u003e There is only one column for row 1, it will fill the whole available space.\n\nYou can also specify different column layouts for one row, based on the actual visible size of the screen.\nThis helps to improve the layout for larger screens. In the warnings plugin you will find\nan example: on small devices, there is one card visible that shows one pie chart in a carousel. If you are\nopening the same page on a larger device, then two of the pie charts are shown side by side and the carousel is hidden.\n\n[#cards]\n=== Cards\n\nWhen presenting information of a plugin as a block, typically plain text elements are shown. This will normally result\nin some kind of boring web pages. In order to create a more appealing interface, it makes sense to present such information\nin a card, that has a border, a header, an icon, and so on. In order to create such a\nhttps://getbootstrap.com/docs/5.2/components/card/[Bootstrap card] a small jelly tag has been provided by the new\nhttps://github.com/jenkinsci/bootstrap5-api-plugin[Bootstrap plugin] that simplifies this task for a plugin.\nSuch a card can be easily created in a jelly view in the following way:\n\n[source,xml,linenums]\n----\n\u003cbs:card title=\"${%Card Title}\" fontAwesomeIcon=\"icon-name\"\u003e\n  Content of the card\n\u003c/bs:card\u003e\n----\n\nIn \u003c\u003cimg-card\u003e\u003e examples of such cards are shown. The cards in the upper row contain pie charts that show the\ndistribution of the number of authors and commits in the whole repository. The card at the bottom shows the detail\ninformation in a DataTable. The visualization is not limited to charts or tables, you can\nshow any kind of HTML content in there. You can show any icon of your\nplugin in these cards, but it is recommended to use one of the existing https://fontawesome.com[Font Awesome] icons\nto get a consistent look and feel in Jenkins' plugin ecosystem.\n\n.Bootstraps cards in Jenkins plugins\n[#img-card]\nimage::card.png[Card examples]\n\nNote that the size of the cards is determined by the grid configuration, see section \u003c\u003cGrid layout\u003e\u003e.\n\nYou can find several examples of Jenkins views that use jQuery in the\nhttps://github.com/jenkinsci/warnings-ng-plugin[Warnings Next Generation plugin]\nand in the https://github.com/jenkinsci/forensics-api-plugin[Forensics plugin].\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenkinsci%2Fbootstrap5-api-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjenkinsci%2Fbootstrap5-api-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenkinsci%2Fbootstrap5-api-plugin/lists"}