Using Bootstrap in Knowledge Base Article

[shalmaxb]

I already used a lot the Bootsrap css to design certain things, like buttons, modals or font awesome icons in Knowledgebase articles. Suddenly that stopped to work. Has anything been changed in espoCRM regarding Bootstrap?

[yuri]

Probable you have checked "Use Iframe" parameter for the Body field.

[shalmaxb]

Thanks yuri, that was it.

[esforim]

Off topic, but can you share some example? It sound like you made something fancy.

[shalmaxb]

The following example will create a button (I use it in Knowldgebase to call screenshots), whichwhen clicked will open an image (screenshot) in a modal. The screenshot field is an image field, which in my case is hidden for normal users.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="[COLOR=#e74c3c]#imageModal[/COLOR]">
BUTTON LABEL
</button>
<div class="modal fade" id="[COLOR=#c0392b]imageModal[/COLOR]" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageModalLabel">MODAL TITLE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">

<img src="/?entryPoint=image&amp;id=ID OF IMAGE" alt="Image Description" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<div>

The code for the button is pure Bootstrap. Terms written in CAPS you may edit according to your use case. You can give the img Tag a width, if the image in the modal does not fit.
You put this code in a WYSIWYG field or in the body of Knowledgebase Article.
You can also use this code slightly modified to keep a link, for example to link to a PDF, or with a link to another entity or to the create view of an entity. In general, everything, which can be linked by href you can pack into such a button.

If you have more than one button in a WYSIWYG field, you must number the imageModal like imageModal1, imageModal2 or anything else whicht would trigger the correct modal. To modify the appearance of the button refer to Bootstrap default examples.