Jump to content

Bootstrap Cards in Details Page

Recommended Posts


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?

Link to comment
Share on other sites

  • 2 weeks later...


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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...