I recently proposed to my team that we upgrade our bootstrap version to the latest. Originally, I was going to create a separate file and download it in place of the current version on certain pages. Well… We decided to just jump right in. I am going to focus this post on the card and little why it was a minor hell for me. Here was my experience.
Side Note: Bootstrap 4 is explicit in their commitment to responsive and mobile first. They have remove all elements that are non-responsive (sort of).
Goodbye wells, panels and thumbnail
One of the biggest things to create an issue was the removal of the well, panel and thumbnail. I am pretty big user of the well, it creates a nice highlight for important things to me. Taking this away from an app that had it littered about is a bummer.
They introduced a new element, the card. While this may be a simple replacement of the Panel, but I am struggling with it to replace my wells. Anyway, the card is a nice component because there are couple of layouts that you can create.
If you need the cards to lay next to each other without any spacing between them, then group is your man. Since the cards will be equal in width and height, these cards will fill the space equally. Unfortunately this doesn’t meet my needs, so I move on.
The deck layout is very similar to the group layout except in one way. There is spacing between the individual cards. They both share the behavior when you add too many cards to the group or deck, they shrink to fit container. You end up with cards so small that you can’t use.
I can see some use cases for both layouts. In a carousel, you have a set of panels that you want the user to shuffle through. This give you the tools so that each card that is presented is guaranteed to be equal in height and width to its partner on the left and the right.
Disclaimer: They do have a clause on the card layout that gets them out of trouble:
For the time being, these layout options are not yet responsive.
I took a look again to see was the well really the right component to use for my UI, and out of laziness , I said no. I refactored those screens to highlight the important data in a different manner. It will work good enough for now.
Code Review Complete✔