Skip to content

Commit

Permalink
Update states
Browse files Browse the repository at this point in the history
  • Loading branch information
MartijnCuppens committed Dec 2, 2019
1 parent 76fd85b commit 0c376eb
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion site/content/docs/4.3/forms/checks.md
Expand Up @@ -10,7 +10,7 @@ toc: true

Browser default checkboxes and radios are replaced with the help of `.form-check`, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Structurally, our `<input>`s and `<label>`s are sibling elements as opposed to an `<input>` within a `<label>`. This is slightly more verbose as you must specify `id` and `for` attributes to relate the `<input>` and `<label>`. We use the sibling selector (`~`) for all our `<input>` states, like `[checked]` or `[disabled]`. When combined with the `.form-check-label` class, we can easily style the text for each item based on the `<input>`'s state.
Structurally, our `<input>`s and `<label>`s are sibling elements as opposed to an `<input>` within a `<label>`. This is slightly more verbose as you must specify `id` and `for` attributes to relate the `<input>` and `<label>`. We use the sibling selector (`~`) for all our `<input>` states, like `:checked` or `:disabled`. When combined with the `.form-check-label` class, we can easily style the text for each item based on the `<input>`'s state.

Our checks use custom Bootstrap icons to indicate checked or indeterminate states.

Expand Down

0 comments on commit 0c376eb

Please sign in to comment.