formstrap makes some minor changes to Bootstrap CSS.
These changes are within a separate CSS file and do not actually modify the original Bootstrap CSS files.
Element | CSS | Explanation |
---|---|---|
Legend | legend { all: revent; padding:0; } | Legends are used as a "label" for the fieldset that contains check and radio input groups. formstrap wants legends to look the same as standard labels. This CSS achieves that effect. |
Checkboxes |
.checks { padding: 0 0.5em } .checks.twocols { column-count:2 } .checks.onecols { column-count:1 } |
Checkboxes and radio buttons are contained in a <div> with the class .checks. This <div> is within the check/radiobutton <fieldset>. The checks can be set to display in one column or two columns. |
Field Text Description | .form-text { color:inherit;font-size:italic } | On fields within a card with card colour coding, in standard Bootstrap the form-text (note) does not inherit the text colour of the card. This fixes that and also adds styling. |
Field | .form-group { position:relative; scroll-margin-top:30px!important;} | When a field obtains focus programmatically, the label can be obscured if the field input is displayed at the top of the viewport. This adds a scroll margin to counteract this effect. |
Large Select Input | .form-select.form-select-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); } | The large select input (.form-select.lg) CSS in Bootstrap does not have the min-height rule that the large text input (.form-control-lg) has. This was causing the select to be 1 pixel shorter than the input on some devices with display scaling. This fixes this. |
Input Group |
.input-group { flex-grow:1; justify-content:center; } .input-group * { border-radius:0!important; } .input-group-text { justify-content:center; min-width:3em; } .input-group > *:first-child { border-top-left-radius:var(--bs-border-radius)!important; border-bottom-left-radius:var(--bs-border-radius)!important; overflow:hidden; } .input-group > *:first-child > * { border-top-left-radius:var(--bs-border-radius)!important; border-bottom-left-radius:var(--bs-border-radius)!important; overflow:hidden; } .input-group > *:last-child { border-top-right-radius:var(--bs-border-radius)!important; border-bottom-right-radius:var(--bs-border-radius)!important; overflow:hidden; } .input-group > *:last-child > * { border-top-right-radius:var(--bs-border-radius)!important; border-bottom-right-radius:var(--bs-border-radius)!important; overflow:hidden; } span.input-group-text i.bi { width:1.5em!important; } |
This makes formstrap's alternative implementation of Bootstrap input groups look like Bootstrap input groups |
In addition to the above changes, the user can apply Custom CSS. The default custom CSS is shown below
/* CUSTOM CSS * /* Specify Defaults here */ /* Prevents known issue when using large horizontal gutters on small devices */ body { overflow-x:hidden; } #[FORMID]-formstrapcontainer .formcontainer { margin:10px 0px; } #[FORMID]-formstrapcontainer .formcontainer { padding:10px; } /* Small devices (e.g. landscape phones, 576px and up) */ @media (min-width: 576px) { /* Adds a border around the form so it is not filling full width on small or larger devices). The default (XS) is for there to be no border #[FORMID]-formstrapcontainer { margin:10px; } #[FORMID]-formstrapcontainer .formouter { border-radius:10px; } #[FORMID]-formstrapcontainer .formcontainer { padding:10px; } } /* Medium devices (e.g. tablets, 768px and up) */ @media (min-width: 768px) { } / * Large devices (e.g. desktops, 992px and up) */ @media (min-width: 992px) { } /* X-Large devices (e.g. large desktops, 1200px and up) */ @media (min-width: 1200px) { } /* XX-Large devices (e.g.larger desktops, 1400px and up) */ @media (min-width: 1400px) { }