Only thing holding me back from using Formkit is lack of a Bootstrap integration guide

[dosstx]

Describe the feature

Is there any chance someone can write a guide on how to integrate with Bootstrap 5 styles? I admit the only thing holding me back from using Formkit is the lack of Bootstrap integration support (I see there is a Tailwind guide). I know of others that are in the same boat and think this feature will be useful to other developers.

[devoidofgenius]

We appreciate you raising this issue. While it's not on our current roadmap we will consider adding more styling guides in the future. If you're not a member in our Discord community already, I encourage you to join. I'm positive plenty of good folks over there would be willing to help you out with the issues you face using Bootstrap with FormKit.

[Stiropor]

@dosstx I just stubled upon this and thought I'd share my findings. This is how I'm using FormKit with Bootstrap 5.3 and so far it works great. You do need to make sure you set the scss variables for Bootstrap also, might also work without it. The config also includes a plugin (found on Discord by some user and modified it a bit) that allows you to use floating labels if uncommented. So....

Using: formkit.config.js

import { generateClasses } from '@formkit/themes'
import { en } from '@formkit/i18n'
import { clone } from '@formkit/utils'

/**
 * Plugin for floating labels where the label is placed after the input. To use add .form-floating inner class to text, email, textarea and select elements.
 * Source: https://github.com/formkit/formkit/issues/174
 *
 * @param node
 */
const useFloatingLabels = function (node) {
	node.on('created', () => {
		const inputDefinition = clone(node.props.definition)
		if (['radio', 'checkbox', 'button', 'submit'].includes(node.props.type)) { return }
		const originalSchema = inputDefinition.schema
		const higherOrderSchema = (extensions) => {
			// This kills the original label
			extensions.label = { $el: null, children: null }
			extensions.suffix = {
				$el: 'label',
				children: '$label',
				attrs: {
					'data-has-value': '$_value !== "" && $_value !== undefined',
					class: '$classes.floating',
					for: '$id'
				}
			}
			return originalSchema(extensions)
		}
		// Set placeholder as Bootstrap requires it
		node.props.attrs.placeholder = node.props.attrs.placeholder || node.props.label
		node.props.innerClass = [node.props.innerClass, 'form-floating'].join(' ')
		inputDefinition.schema = higherOrderSchema
		node.props.definition = inputDefinition
	})
}

const config = {
	locales: { en },
	locale: 'en',
	plugins: [
		// useFloatingLabels  // Uncomment for floating labels
	],
	config: {
		classes: generateClasses({
			global: { // applies to all input types
				outer: '$reset form-group',
				input: 'form-control',
				label: 'form-label',
				messages: 'list-unstyled small mb-0',
				message: 'is-invalid',
				help: 'form-text'
			},
			checkbox: {
				label: 'form-check-label',
				wrapper: 'checkbox-wrapper',
				inner: 'form-check',
				input: '$reset form-check-input',
				legend: '$reset form-check-label'
			},
			select: {
				input: '$reset form-select'
			},
			radio: {
				label: 'form-check-label',
				wrapper: 'radio-wrapper',
				inner: 'form-check',
				input: '$reset form-check-input',
				legend: '$reset form-check-label'
			},
			submit: {
				outer: '$reset mt-3',
				input: '$reset btn btn-primary'
			}
		})
	}
}

export default config

Note: Bootstrap 5 isn't using .form-group anymore but I've added it to my scss because I find it dumb to use .mb-* or something, it's easier to style or change then :)

And this is my _formkit-overrides.scss:

.form-wrapper {
	@extend .row; // This is so you can use like outerClass: 'col-md-6' on a field and it shows on 50%
}

.radio-wrapper,
.checkbox-wrapper, {
	display: flex;

	.checkbox-label,
	.radio-label {
		margin-left: 0.5rem;
	}
}

.formkit-message {
	&.is-invalid {
		color: $danger;
	}
}

.formkit-input {
	[data-invalid="true"] & {
		border-color: $danger;
	}
}

.formkit-options {
	list-style: none;
	margin: 0;
	padding: 0;

	.form-check-inline & {
		display: flex;
		gap: 1rem;
	}
}

Hope it helps anyone 😃

[tno2007]

Just like to add my 2 cents here.

As a developer, I suck at design.
I have always used Bootstrap templates since it's developer friendly., i.e. I don't have to know how to write any CSS.

Now I know understand your use-case and situation is different, but I would tell you, do get into tailwind, and soon as you are able to!!

Instead of having hundred of unused CSS classes in your production build, with Tailwind you only use the CSS you actually use.
And tools like WindiCSS makes using Tailwind even easier. You will start seeing more new Vue projects use Tailwind, as opposed to Bootstrap integration, (FormKit as an example).

At my company I have even convinced the actual CSS designers to ditch Bootstrap and use Tailwind.

Of course, if you cannot do it now, that's fine, but I urge you to give it a chance. You will actually teach yourself how to be better at CSS. May seem weird at first having to write 10 classes to elements instead of one, but later you will get the method behind the madness.

[fenilli]

Hey also giving my opinion here, lets all try https://css.master.co/ too, it looks amazing, has a lot of tailwindcss features and more.

[justin-schroeder]

Someone wrote an article about this on dev.to if anyone is interested!

https://dev.to/morgenstern2573/how-to-integrate-formkit-and-bootstrap-2571

[jhotujec]

Modified _formkit-overrides.scss from @Stiropor to include icons and to use danger color defined on Bootstrap theme itself.

.radio-wrapper, .checkbox-wrapper {
    display: flex;
}
.radio-wrapper .checkbox-label, .checkbox-wrapper .checkbox-label, .radio-wrapper .radio-label, .checkbox-wrapper .radio-label {
    margin-left: 0.5rem;
}
.formkit-message.is-invalid {
    color: var(--bs-danger);
}
[data-invalid="true"] .formkit-input {
    border-color: var(--bs-danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.formkit-options {
    list-style: none;
    margin: 0;
    padding: 0;
}
.form-check-inline .formkit-options {
    display: flex;
    gap: 1rem;
}