{"id":15731768,"url":"https://github.com/bantikyan/icheck-bootstrap","last_synced_at":"2025-04-04T18:09:25.282Z","repository":{"id":37951551,"uuid":"65091635","full_name":"bantikyan/icheck-bootstrap","owner":"bantikyan","description":"Pure css checkboxes and radio buttons for Twitter Bootstrap.","archived":false,"fork":false,"pushed_at":"2024-07-12T02:38:22.000Z","size":205,"stargazers_count":141,"open_issues_count":8,"forks_count":35,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T17:11:11.578Z","etag":null,"topics":["asp-net-mvc","bootstrap","checkbox","icheck","icheck-bootstrap","pure-css","radio-buttons"],"latest_commit_sha":null,"homepage":"https://bantikyan.github.io/icheck-bootstrap/","language":"HTML","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/bantikyan.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-06T16:31:27.000Z","updated_at":"2024-10-26T22:20:41.000Z","dependencies_parsed_at":"2024-10-24T22:18:30.214Z","dependency_job_id":"cc4c36d0-e45c-47ec-9023-0298bd187ac8","html_url":"https://github.com/bantikyan/icheck-bootstrap","commit_stats":{"total_commits":151,"total_committers":2,"mean_commits":75.5,"dds":"0.0066225165562914245","last_synced_commit":"961230cfa62c278771071b89c4640707e8d4d6ac"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bantikyan","download_url":"https://codeload.github.com/bantikyan/icheck-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"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":["asp-net-mvc","bootstrap","checkbox","icheck","icheck-bootstrap","pure-css","radio-buttons"],"created_at":"2024-10-04T00:05:18.851Z","updated_at":"2025-04-04T18:09:25.265Z","avatar_url":"https://github.com/bantikyan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# icheck-bootstrap\n\n\u003ca href=\"#\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/bower-v3.0.1-blue.svg\" alt=\"bower version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/icheck-bootstrap\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/npm-v3.0.1-blue.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.nuget.org/packages/icheck-bootstrap\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/nuget-v3.0.1-blue.svg\" alt=\"nuget version\"\u003e\u003c/a\u003e\n[![](https://data.jsdelivr.com/v1/package/npm/icheck-bootstrap/badge)](https://www.jsdelivr.com/package/npm/icheck-bootstrap)\n\nDid you had a problem customizing html checkboxes and radio buttons? icheck-bootstrap is pure css solution for displaying twitter bootstrap style checkboxes and radio buttons. Try [Demo](https://bantikyan.github.io/icheck-bootstrap/).\n\nYou may also like to try [icheck-material](https://github.com/bantikyan/icheck-material).  \nLove cool tech? Check out [CoolTechUnder.com](https://cooltechunder.com/)\n\n## Table of contents\n\n* \u003ca href=\"#user-content-getting-started\"\u003eGetting started\u003c/a\u003e\n* \u003ca href=\"#user-content-html-syntax\"\u003eHTML syntax\u003c/a\u003e\n* \u003ca href=\"#user-content-aspnet-mvc-syntax\"\u003eASP.NET MVC syntax\u003c/a\u003e\n* \u003ca href=\"#user-content-color-schemes\"\u003eColor schemes\u003c/a\u003e\n* \u003ca href=\"#user-content-license\"\u003eLicense\u003c/a\u003e\n\n## Getting started\n\nSeveral quick start options are available:\n\n* [Download the latest release](https://github.com//bantikyan/icheck-bootstrap/archive/3.0.1.zip)\n* Install with [Bower](https://bower.io): \u003ccode\u003ebower install icheck-bootstrap\u003c/code\u003e\n* Install with [npm](https://www.npmjs.com/package/icheck-bootstrap): \u003ccode\u003enpm install icheck-bootstrap\u003c/code\u003e\n* Install with [Nuget](https://www.nuget.org/packages/icheck-bootstrap/): \u003ccode\u003eInstall-Package icheck-bootstrap\u003c/code\u003e\n* Use CDN [jsDelivr](https://www.jsdelivr.com/package/npm/icheck-bootstrap)\n* Use CDN [cdnjs](https://cdnjs.com/libraries/icheck-bootstrap)\n\n## HTML syntax\n\n#### checkbox example\n\n```\n\u003cdiv class=\"icheck-primary\"\u003e\n    \u003cinput type=\"checkbox\" id=\"someCheckboxId\" /\u003e\n    \u003clabel for=\"someCheckboxId\"\u003eClick to check\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### radio buttons example\n\n```\n\u003cdiv class=\"icheck-primary\"\u003e\n    \u003cinput type=\"radio\" id=\"someRadioId1\" name=\"someGroupName\" /\u003e\n    \u003clabel for=\"someRadioId1\"\u003eOption 1\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"icheck-primary\"\u003e\n    \u003cinput type=\"radio\" id=\"someRadioId2\" name=\"someGroupName\" /\u003e\n    \u003clabel for=\"someRadioId2\"\u003eOption 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### inline styling\n\nTo have checkboxes or radio buttons inline use .icheck-inline class\n\n```\n\u003cdiv class=\"icheck-primary icheck-inline\"\u003e\n    \u003cinput type=\"checkbox\" id=\"chb1\" /\u003e\n    \u003clabel for=\"chb1\"\u003eLabel 1\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"icheck-primary icheck-inline\"\u003e\n    \u003cinput type=\"checkbox\" id=\"chb2\" /\u003e\n    \u003clabel for=\"chb2\"\u003eLabel 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### disabled\n\nUse disabled attribute on your input (checkbox or radio) to have disabled style.\n\n#### no label\n\nTo have components without label, you still have to have label control with empty text.\n\n```\n\u003cdiv class=\"icheck-primary\"\u003e\n    \u003cinput type=\"checkbox\" id=\"someCheckboxId\" /\u003e\n    \u003clabel for=\"someCheckboxId\"\u003e\u003c/label\u003e\n\u003c/div\u003e\n```\n\n## ASP.NET MVC syntax\n\n#### checkbox example\n\n```\n\u003cdiv class=\"icheck-primary\"\u003e\n    @Html.CheckBoxFor(m =\u003e m.SomeProperty, new { id = \"someCheckboxId\" })\n    \u003clabel for=\"someCheckboxId\"\u003eClick to check\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### radio buttons example\n\n```\n\u003cdiv class=\"icheck-primary\"\u003e\n    @Html.RadioButtonFor(m =\u003e m.SomeProperty, SomeValue1, new { id = \"someRadioId1\" }) \n    \u003clabel for=\"someRadioId1\"\u003eOption 1\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"icheck-primary\"\u003e\n    @Html.RadioButtonFor(m =\u003e m.SomeProperty, SomeValue2, new { id = \"someRadioId2\" })\n    \u003clabel for=\"someRadioId2\"\u003eOption 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n## Color schemes\n\nTry [Demo](https://bantikyan.github.io/icheck-bootstrap/)\n\n\u003cb\u003eTwitter Bootstrap:\u003c/b\u003e As you can see in previous examples, icheck-primary class used for styling.\nYou can use following classes for Twitter Bootstrap color scheme:\n\n\u003ccode\u003e.icheck-default\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-primary\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-success\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-info\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-warning\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-danger\u003c/code\u003e\n\n\u003cb\u003eFlat UI Colors:\u003c/b\u003e Also you can use one of the really nice colors from [flatuicolors.com](https://flatuicolors.com/)\n\n\u003ccode\u003e.icheck-turquoise\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-emerland\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-peterriver\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-amethyst\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-wetasphalt\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-greensea\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-nephritis\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-belizehole\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-wisteria\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-midnightblue\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-sunflower\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-carrot\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-alizarin\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-clouds\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-concrete\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-orange\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-pumpkin\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-pomegranate\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-silver\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-asbestos\u003c/code\u003e\u003cbr/\u003e\n\n## Building\n\nTo build this CSS from SCSS files, use the following script :\n\n```\nnpm run build\n```\n\n## Customization\n\nBy using the SCSS files you can easily customize your icheck size and colors.\n\nTo customize the easiest way is to load icheck as a module by using the `@use` rule. \n\n```sass\n@use \"./node_modules/icheck-bootstrap/scss/icheck-bootstrap\" with (\n    $size: 27px,\n    $custom-colors: (\n      'success': #FFFF00 #FF0000 #00FF00,\n      'mycolor': #FF0000,\n    )\n)\n```\n\nAs you can see in this example, size of checkboxes and radio buttons will be 27px (instead of the default 22px). `success` color is overwritten and `mycolor` is added, you can now use \"icheck-mycolor\" as a class.\n\n### Colors\n\nIf you watch the example above, colors are defined with one, two or three values separated by a space and in this order\n\n* border color\n* background color\n* checkmark color\n\nIf only one value is set, this value is used for border and background color, the checkmark will use the default color.\n\nIf only two values are set, the checkmark will use the default color. \n\n## License\n\nicheck-bootstrap released under the [MIT license](https://github.com/bantikyan/icheck-bootstrap/blob/master/LICENSE). Feel free to use it in personal and commercial projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbantikyan%2Ficheck-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbantikyan%2Ficheck-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbantikyan%2Ficheck-bootstrap/lists"}