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.
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.
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
If you know how to do that natively in Bootstrap, please let me know in the comments.
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 …