Bootstrap Cards in Details Page

[kpcollier]

Hello.

I am using Bootstrap to help set up part of my details page to look good for PDF downloading purposes. I am using a Bootstrap Card with a table inside of it, inside of an HTML Block on my details section. When viewing the page, it doesn't seem like any of the bootstrap is working. My table is present, but none of the bootstrap styling. However, if I download as PDF, the downloaded page shows the bootstrap styling. 

This is also making it so the table is not responsive to mobile devices. 

Anyone have any experience with this?

[Odinson]

Hi, 

I've inserted bootstrap.min.css and bootstrap.min.js in the Details page from their CDN in the HTML block and later also tried it in the HEADER element and "btn", "btn-info". ..  bootstrap classes are applied:
 

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

I've just placed 3 buttons and left their standard Bootstrap classes as you may see:

<button class="btn btn-info">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>

From the picture, the classes are applied to the buttons on the Details page:

In the "Configure Details Page Fields", Advanced>Field Options, Enable HTML editor is checked and my HTML block looks like this:

You can maybe provide the same screenshot with your issue, specifically the code in your HTML (Don't forget to add bootstrap links to header or HTML block itself, of course).

What can happen is that the browser itself removes some of your DIVs  so it kind of changes your code, there may be a workaround for that as well.

Let me know