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: revert; 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)
{
}