Technical Information > HTML Differences between Bootstrap and formstrap

formstrap seeks not to introduce departures from the coding/markup conventions used by Bootstrap.

There are, however, some differences that are used to facilitate certain formstrap specific functions.

The Grid

The fundamentals of the Bootstrap spacing.

For example, in formstrap fields are contained within a Column. The basic structure looks like this:

<div id="formcol1" class="col formcol">
	<div class="fieldcontainer subcontainer">
		<div class="form-group">
			<label class="form-label">Forname
			<input type="text" class="form-control">
			<p class="form-text">Note</p>
		</div>
	</div>
</div>

As you can see there is an additional container .fieldcontainer.subcontainer.

Every level of the hierarchy has sub-containers so:

• Fields are contained within a sub-container in the Column.
• Columns are contained within a sub-container in the Row.
• Rows are contained within a sub-container in the Section Column.
• Section Columns are contained within a sub-container in the Section.

This adds more <div> elements to the document than would be the case with Bootstrap.

Multi Field Input Groups

Each field in a multi-field input group is individually addressable by formstrap user events. As such, the full field meta-data for each field is required.

As such, the HTML structure of formstrap input-groups looks like this:

<div id="input-group-name" class="name input-group-name mb-0 flex-grow-1">
	<label class="d-flex flex-row form-label" for="input-field0">
		<span class="flex-grow-1">Your Full Name</span>
	</label>
	<div class="input-group flex-nowrap flex-grow-1">
		<span class="input-group-text prepend"><i class="fal fa-fw fa-user-vneck"></i></span>
		<div class="input-group-field form-group flex-shrink-1" id="field0">
			<select id="input-field0" name="title[]" class="form-select form-select-reg">
				<option value="">Select</option>
				<option value="Dr">Dr</option>
				<option value="Miss">Miss</option>
				<option value="Mr">Mr</option>
				<option value="Mrs">Mrs</option>
				<option value="Ms">Ms</option>
			</select>
		</div>
		<div class="input-group-field form-group flex-shrink-1" id="field1">
			<input id="field1" name="forename[]" placeholder="Forename" class="form-control form-control-reg" type="text">
		</div>
		<div class="input-group-field form-group flex-grow-1" id="field2">
			<input id="input-field2" name="surname[]" placeholder="Surname" class="form-control form-control-reg" type="text">
		</div>
	</div>
</div>

Again, this introduces more HTML markup but facilitates:

• Variable sized fields in input-groups using flexbox
  In the above example, the Title select is narrower than the text input fields as it requires less space.
• Full meta-data, validation and user-events for each input component of the input-group.

Cards

Each form component can be displayed as a card.

The structure looks like this:

<div class="section" data-card="yes">
	<div class="card card-primary">
		<h2 class="card-header section-header">Title of Section</h2>
		<div class="card-body">
			<p class="section-description">Description of Section</p>
			<div class="pagecolcontainer subcontainer">
				...
			</div>
		</div>
	</div>
</div>

Rather than using a <div> for the card header, the appropriate HTML header tag is used.