부트스트랩(bootstrap) 5.1 적용

5.X 버전업시 릴리즈 내용 :  https://getbootstrap.com/docs/5.0/migration/

---

Forms

• Added new floating forms! We’ve promoted the Floating labels example to fully supported form components. See the new Floating labels page.
• Breaking Consolidated native and custom form elements. Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
  • .custom-check is now .form-check.
  • .custom-check.custom-switch is now .form-check.form-switch.
  • .custom-select is now .form-select.
  • .custom-file and .form-file have been replaced by custom styles on top of .form-control.
  • .custom-range is now .form-range.
  • Dropped native .form-control-file and .form-control-range.
• Breaking Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.
• The longstanding Missing border radius on input group with validation feedback bug is finally fixed by adding an additional .has-validation class to input groups with validation.
• Breaking Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.
• Breaking Form labels now require .form-label.
• Breaking .form-text no longer sets display, allowing you to create inline or block help text as you wish just by changing the HTML element.
• Validation icons are no longer applied to <select>s with multiple.
• Rearranged source Sass files under scss/forms/, including input group styles.

---

5.0 버전업시 form-group, form-row, form-inline 가 deprecated 되었다.

만약 해당 css 를 구현할려면 아래와같이 사용한다.

출처 : css - Bootstrap 5 form-group, form-row, form-inline - Stack Overflow

.form-group {
  margin-bottom: 1rem;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

label {
  margin-bottom: 0.5rem;
}

---

5.1 docs : https://getbootstrap.com/docs/5.1/getting-started/introduction/

 

5.1 Forms - Layout : https://getbootstrap.com/docs/5.1/forms/layout/

Layout 소스코드중 Gutters 라는게 있는데 아래 공식문서를 참고한다.

Layout - Gutters : https://getbootstrap.com/docs/5.1/layout/gutters/

 

5.1 Forms - Validation : https://getbootstrap.com/docs/5.1/forms/validation/