Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bantikyan/icheck-bootstrap
Pure css checkboxes and radio buttons for Twitter Bootstrap.
https://github.com/bantikyan/icheck-bootstrap
asp-net-mvc bootstrap checkbox icheck icheck-bootstrap pure-css radio-buttons
Last synced: about 1 hour ago
JSON representation
Pure css checkboxes and radio buttons for Twitter Bootstrap.
- Host: GitHub
- URL: https://github.com/bantikyan/icheck-bootstrap
- Owner: bantikyan
- License: mit
- Created: 2016-08-06T16:31:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-12T02:38:22.000Z (7 months ago)
- Last Synced: 2025-01-25T15:06:17.955Z (7 days ago)
- Topics: asp-net-mvc, bootstrap, checkbox, icheck, icheck-bootstrap, pure-css, radio-buttons
- Language: HTML
- Homepage: https://bantikyan.github.io/icheck-bootstrap/
- Size: 200 KB
- Stars: 141
- Watchers: 7
- Forks: 35
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# icheck-bootstrap
[](https://www.jsdelivr.com/package/npm/icheck-bootstrap)
Did 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/).
You may also like to try [icheck-material](https://github.com/bantikyan/icheck-material).
Love cool tech? Check out [CoolTechUnder.com](https://cooltechunder.com/)
## Table of contents
* Getting started
* HTML syntax
* ASP.NET MVC syntax
* Color schemes
* License
## Getting started
Several quick start options are available:
* [Download the latest release](https://github.com//bantikyan/icheck-bootstrap/archive/3.0.1.zip)
* Install with [Bower](https://bower.io): bower install icheck-bootstrap
* Install with [npm](https://www.npmjs.com/package/icheck-bootstrap): npm install icheck-bootstrap
* Install with [Nuget](https://www.nuget.org/packages/icheck-bootstrap/): Install-Package icheck-bootstrap
* Use CDN [jsDelivr](https://www.jsdelivr.com/package/npm/icheck-bootstrap)
* Use CDN [cdnjs](https://cdnjs.com/libraries/icheck-bootstrap)
## HTML syntax
#### checkbox example
```
Click to check
```
#### radio buttons example
```
Option 1
Option 2
```
#### inline styling
To have checkboxes or radio buttons inline use .icheck-inline class
```
Label 1
Label 2
```
#### disabled
Use disabled attribute on your input (checkbox or radio) to have disabled style.
#### no label
To have components without label, you still have to have label control with empty text.
```
```
## ASP.NET MVC syntax
#### checkbox example
```
@Html.CheckBoxFor(m => m.SomeProperty, new { id = "someCheckboxId" })
Click to check
```
#### radio buttons example
```
@Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = "someRadioId1" })
Option 1
@Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = "someRadioId2" })
Option 2
```
## Color schemes
Try [Demo](https://bantikyan.github.io/icheck-bootstrap/)
Twitter Bootstrap: As you can see in previous examples, icheck-primary class used for styling.
You can use following classes for Twitter Bootstrap color scheme:
.icheck-default
.icheck-primary
.icheck-success
.icheck-info
.icheck-warning
.icheck-danger
Flat UI Colors: Also you can use one of the really nice colors from [flatuicolors.com](https://flatuicolors.com/)
.icheck-turquoise
.icheck-emerland
.icheck-peterriver
.icheck-amethyst
.icheck-wetasphalt
.icheck-greensea
.icheck-nephritis
.icheck-belizehole
.icheck-wisteria
.icheck-midnightblue
.icheck-sunflower
.icheck-carrot
.icheck-alizarin
.icheck-clouds
.icheck-concrete
.icheck-orange
.icheck-pumpkin
.icheck-pomegranate
.icheck-silver
.icheck-asbestos
## Building
To build this CSS from SCSS files, use the following script :
```
npm run build
```
## Customization
By using the SCSS files you can easily customize your icheck size and colors.
To customize the easiest way is to load icheck as a module by using the `@use` rule.
```sass
@use "./node_modules/icheck-bootstrap/scss/icheck-bootstrap" with (
$size: 27px,
$custom-colors: (
'success': #FFFF00 #FF0000 #00FF00,
'mycolor': #FF0000,
)
)
```
As 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.
### Colors
If you watch the example above, colors are defined with one, two or three values separated by a space and in this order
* border color
* background color
* checkmark color
If only one value is set, this value is used for border and background color, the checkmark will use the default color.
If only two values are set, the checkmark will use the default color.
## License
icheck-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.