This is based on an idea from the Indiehackers forum.

When I create a web form using a framework like Bootstrap, it’s a bit tedious to craft the HTML that the framework wants.

For instance, if the plain HTML were like this:

<label>Email</label>
<input id="email" type="email" placeholder="foo@bar.com" />

The equivalent HTML that Bootstrap needs is something like this:

<div class="form-group">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="foo@bar.com" class="form-control">
</div>

There are slight differences for the different types of form input, too.

So, I’ve created a simple online tool that takes HTML <label> and <input> tag pairs, and converts them into Bootstrap-ready HTML.

It’s just a starting point, really – there’s a lot more I could add, as you can see from the github issues, but I hope people find it useful. If I don’t get distracted by shiny things, I might develop it further.

As always, comments, suggestions, feedback and pull requests are welcome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s