Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !29322

v5: .form-check layout changes

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge more-checks into master 5 years ago
  • Overview 0
  • Commits 8
  • Pipelines 0
  • Changes 5
Screen Shot 2019-08-28 at 9 08 36 PM

This PR does a few things:

  • Scopes .form-check-input layout properties to the .form-check parent, allowing easy placement of the .form-check-input in more places.
  • Updates the no-label checks. Current version recommends static positioning, but we use floats, so this is kinda busted right now.
  • Updates the checkbox/radio in input group example to use the v5 style .form-check-input.
  • Documents how to use .form-check within list groups. This also includes the addition of margin-bottom: 0 on list group items so you can use the <label> element.

Fixes #28524 (closed), closes #28603 (closed) (though this is outdated by v5's combined .form-check). Also closes #28242 (closed).

Preview: https://deploy-preview-29322--twbs-bootstrap.netlify.com/

Compare
  • master (base)

and
  • latest version
    c8ab12d3
    8 commits, 2 years ago

5 files
+ 71
- 9

    Preferences

    File browser
    Compare changes
sc‎ss‎
fo‎rms‎
_form-ch‎eck.scss‎ +5 -2
_list-gr‎oup.scss‎ +1 -0
site/conte‎nt/docs/4.3‎
compo‎nents‎
list-g‎roup.md‎ +57 -0
fo‎rms‎
chec‎ks.md‎ +6 -5
input-g‎roup.md‎ +2 -2
scss/forms/_form-check.scss
+ 5
- 2
  • View file @ c8ab12d3

  • Edit in single-file editor

  • Open in Web IDE


@@ -7,14 +7,17 @@
min-height: $form-check-min-height;
padding-left: $form-check-padding-left;
margin-bottom: $form-check-margin-bottom;
.form-check-input {
float: left;
margin-left: $form-check-padding-left * -1;
}
}
.form-check-input {
float: left;
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
margin-left: $form-check-padding-left * -1;
background-color: $form-check-input-bg;
border: $form-check-input-border;
appearance: none;
scss/_list-group.scss
+ 1
- 0
  • View file @ c8ab12d3

  • Edit in single-file editor

  • Open in Web IDE


@@ -46,6 +46,7 @@
position: relative;
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
margin-bottom: 0; // for <label> variations
color: $list-group-color;
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
site/content/docs/4.3/components/list-group.md
+ 57
- 0
  • View file @ c8ab12d3

  • Edit in single-file editor

  • Open in Web IDE


@@ -198,6 +198,63 @@ Add nearly any HTML within, even for linked list groups like the one below, with
</div>
{{< /example >}}
## Checkboxes and radios
Place Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `<label>`s, but please remember to include an `aria-label` attribute and value for accessibility.
{{< example >}}
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
Cras justo odio
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
Morbi leo risus
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
Porta ac consectetur ac
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
</ul>
{{< /example >}}
And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
{{< example >}}
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
Cras justo odio
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
Dapibus ac facilisis in
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
Morbi leo risus
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
Porta ac consectetur ac
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
Vestibulum at eros
</label>
</div>
{{< /example >}}
## JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our list group to create tabbable panes of local content.
site/content/docs/4.3/forms/checks.md
+ 6
- 5
  • View file @ c8ab12d3

  • Edit in single-file editor

  • Open in Web IDE


@@ -198,13 +198,14 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
## Without labels
Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
{{< example >}}
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>
{{< /example >}}
site/content/docs/4.3/forms/input-group.md
+ 2
- 2
  • View file @ c8ab12d3

  • Edit in single-file editor

  • Open in Web IDE


@@ -101,7 +101,7 @@ Place any checkbox or radio option within an input group's addon instead of text
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
@@ -110,7 +110,7 @@ Place any checkbox or radio option within an input group's addon instead of text
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text input">
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
4
css docs no-backport-to-v4 v5
4
css docs no-backport-to-v4 v5
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
2
2 participants
Mark Otto
Ghost User
Reference: twbs/bootstrap!29322
Source branch: more-checks

Menu

Explore Projects Groups Snippets