Technical Information > CSS Modifications

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)  
{  
}     
Comments

Commenting is temporarily disabled