Insert paragraph in list item

Bootstrap Studio Help
1

Hi,

I’m trying to figure out how to insert a Paragraph tag inside a List item tag.

In the Studio tab, the Paragraph tag shows a “Insert into List item” on right-click, but it’s greyed out. When I try to drag the p into the List item (in the Overview), the li tag shows a red rectangle around it. I take it to mean it’s not allowed. All I can achieve is the P tag going above, or below the li tag.

Is that by design, or is it some setting I may have missed? How can I achieve this?

By the way, how can I insert greater than/lower than symbols in the forum editor? Is there a way to escape those?

Thanks

2

Try using list group, you can add paragraphs and heading to that.

Then if you want to style it to look like a bullet list, you can use css.

Something like:

:root {
  --bulletcolor: #000000;
  --bulletsize: 10px;
  --bulletradius: 20%;/*0% Square upto 99% Round*/
}

.list-group-item {
  border: 0;
  padding: 0.1rem;
}

.list-group-item * {
  padding-left: 1.5rem;
}

.list-group-item::before {
  margin-top: 7px;
  width: var(--bulletsize);
  height: var(--bulletsize);
  content: " ";
  background: var(--bulletcolor);
  float: left;
  border-radius: var(--bulletradius);
}

.list-group-item:has(h1)::before {
  margin-top: 20px;
}

.list-group-item:has(h2)::before {
  margin-top: 15px;
}

Will give you:

image
image568×508 16.2 KB

3

if you first add a div to the List Item then you can add what you want in that div

4

Thanks for the replies.

Is there a technical reason why this is not supported? I’ve seen many Bootstrap samples, written by hand, that show a paragraph in a list item, so it would seem that Bootstrap supports this construct.

Why is this not supported in BSS?

Thanks

5

I took kuligaposten solution one step further. Add div to List Item. Add paragraph to div. Convert div to custom Html. Edit custom code to remove outside div and Apply. Convert Custom Code back using Convert to Components parser. Now you have a Paragraph in List Item.

Save to Library the List Item with paragraph. Use when needed.

2 Likes
6

What a clever idea! You get a cookie! :cookie:

7

When we implemented lists a long time ago, I think it was not a good practice to place paragraphs in <li>. If you need line breaks in your li content, you can shift+enter to insert <br>.

The app is just trying to be helpful, but we are open to remove this limitation if you think it is unnecessary.

8

Hi Martin,

I understand. I’m a programmer too, and you have to decide what makes it to the release, and what doesn’t.

I must admit I’m not very good at the whole web stuff (I develop for desktop), so I don’t know what’s a good practice, or not. I did see some BS samples where a <p> tag was inside a list, but that’s as far as I can comment.

I implemented @twinstream 's solution, and it work just fine for my needs.

Cheers