Displaying emphasis when showing data from API results

I have some API results that are formatted as shown below:

There are a few new Kindle deals to look at today. (Yesterday on the blog: Should We <em>Abandon</em> “Evangelical?”) Consuming ideologies “J.K. Rowling, one of the most successful

When I display the API data, I would like the word “Abandon” to be bolded, as it is returned between <em> ... </em>. I am not able to find a way to do this within Bubble.

Any help would be appreciated!

You can do this using simple search&replace on the text string. Search for em and replace with b, and /em with /b. Or use css to globally add style to em element.

I had some success using an HTML element instead of a text element. However, the formatting still doesn’t look great, even though the emphasis is finally visible.

Exactly what @twkrk said :smiley:

If you could tell me more about the global CSS option, I’d be grateful. I assume the search and replace technique would be costly in terms of time taken, since it needs to be happening in real-time.

Add a HTML element with the following code:

  em  {
        font-weight: bold;
        font-style: normal !important;
1 Like

But it’s not an input, it’s an output, displaying data from the API call. I’m confused about why you’ve used a Multiline Input.

Thanks, this worked. I added the code in the same HTML element that displays the text from the API call. It works fine now.

I suppose I can play around with the HTML code to add more spacing, etc.?

Yes. But remember it will affect all the em elements on the page.