I haven’t been shy in the past about how I have really prefer Bulma over Bootstrap. I wanted to use this week’s post to compare and contrast the two and hopefully reset my opinion of Bootstrap. So, how am I going to do that? I am going to create a webform using Bulma and then tried to replicate it in Bootstrap.
So, let’s start with the Bulma webform.
See the Pen
Forms 1: Using Bulma (Just the CSS) by Joe Steinbring (@steinbring)
on CodePen.
In the above example, there is a two-column form row, a phone number, an email address, radio buttons, and a text area. The name and email address are marked as required fields and the phone number has a “+1” prefix. On the phone number and email inputs, there are font awesome icons to indicate what the fields are.
So, let’s take a look at the Bootstrap equivalent.
See the Pen
Forms 2: Using Bootstrap (Just the CSS) by Joe Steinbring (@steinbring)
on CodePen.
You’ll notice three things here:
- I had to add three class definitions
- The spacing for the phone number and the radio buttons isn’t right
- If you restrict the viewport width, the labels end up on the wrong side of the screen
Two of the three class definitions are for adding the font awesome icons to the the phone number and email fields. I created a pen to show how to add a FA icon to an input.
See the Pen
Adding a font awesome icon to an input field by Joe Steinbring (@steinbring)
on CodePen.
If you know how to do that natively in Bootstrap, please let me know in the comments.
The other text-right and font-weight-bold classes just don’t seem to work, despite the what’s in the Bootstrap docs. It’s possible that I’m missing something.
The second issue mostly seems to be a consequence of the dependence on grid for spacing. With the phone number, you can’t have the input span 12 columns because the input prefix takes up some of the width but it also doesn’t take up an entire column. With the radio buttons, you can either have them right next to each other or you can have each in their own column. Having each in their own columns creates too much space between them, though.
So, what’s the solution? People use bootstrap to style forms all the time without a problem. The solution is probably just to style your form in the way that Bootstrap wants it styled.
Stay tuned for Part 2 on this …
[ Cover photo by Nathan Dumlao on Unsplash ]