How can I use Bootstrap 5.2, or any other UI tool for CSS in servicenow portal widgets?

User477307
Tera Contributor

‎07-28-2022 09:02 PM

How to use latest version of Bootstrap or other CSS/ JS library to use in servicenow portal development..?

I tried adding <script tag> in body html of widget but it doesn't work..

thanks

Labels:
0 Helpfuls
  • 4,925 Views
2 REPLIES 2

Maik Skoddow
Tera Patron
Tera Patron

‎07-28-2022 10:43 PM

Hi

on page https://docs.servicenow.com/bundle/sandiego-servicenow-platform/page/build/service-portal/concept/po... you can find the current bootstrap version which is used by ServiceNow.

And in the answers to the question at https://community.servicenow.com/community?id=community_question&sys_id=73c329b2dbf5a850ab0202d5ca96... you can find example code to load another bootstrap version.

Maik

User477307
Tera Contributor
In response to Maik Skoddow

‎07-29-2022 01:34 AM

Hi Thanks for the reply I went through those links and found a way to implement bootstrap 5 using link tag in one of our widget I wrote this code for the widget to generate a card in HTML body part of widget and it happened to broke the entire page.. I think still it's not supported completely.. Are we sticking with BS 3.3.6?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="javascript:void(0)" class="card-link">Card link</a>
          <a href="javascript:void(0)" class="card-link">Another link</a>
        </div>
      </div>
    </div>
  </div>
</div>

 

0 Helpfuls