How to create a basic Bootstrap 4 List Group with Blocs

Hi there,

I would like to create a basic Bootstrap 4 List Group with Blocs.

Unfortunately, I could not implement it with the default List Brick in Blocs.

I’m not keen on inserting a paragraph into a standard UL and LI HTML elements, because it should work without paragraphs which are block elements.

Do you know any workarounds for this problem?

As you can see on the attached image, we only need 2 CSS classes: list-group and list-group-item. We do not need a paragraph in it at all.

It seems to me, that creating and managing lists with Blocs doesn’t follow the best practices. Perhaps, I may be wrong.

Any help and tips are appreciated so much form you!

Thanks,
Robert!

Hmmm, I have to accept the fact that if I want a standard Bootstrap 4 Group List, I have to create is manually with many CSS styles and additional paragraphs. That’s it.

1. Add list-group style to the ul list
2. Add list-group-item style to the list item
3. Insert a paragraph into the list item
4. Reset the paragraph margin to zero: m-0

Oh, man. That’s tedious.

I am no expert on this but I wonder if you could achieve this with markdown? There is actually a free bric that would make it easier https://blocs.store/product/markdown-parser/

1 Like

Thanks @Flashman, I won’t overcomplicate this. Stick with the manual building. :speak_no_evil: I wish Blocs could support more standard Bootsrap UI components by default. Yeah, Blocs are going to the CMS-World (for the win) :face_with_monocle:, yet many basic things are still missing. Just my opinion. Glad that I used to be a front-end developer, so I know how to deal with CSS manually. Still like working with Blocs :wink:

I do agree, I use the Code bric a lot for this stuff. I am grateful that although Blocs is missing stuff, it’s flexible enough that you can do it through features like the code bric. And if you are not using any scripting you can preview it inline.

1 Like