Using bootstrap classes and components in Portal (Dynamics 365)

As Portals are based on Bootstrap framework we can make use of classes, components etc. specified as part of the framework in our Portal.

Below we have created a new blank page to which we will add content.

Click on Edit in the content editor.

Click on Edit Source icon.

For reference go to the getbootstrap web site

Below are some of the classes that we will add

Lead Class –

Table table-striped class –

Badges Component

Breadcrumbs

Below is our sample source code

This is how it renders in the page.

Hope it helps..

Applying Theme in Portal in Dynamics 365

Suppose we have the below portal configured whose theme we would like to change.

As Portal is based on Bootstrap framework, we can apply any of free bootstrap themes to it.

Go to the below site which offers few free themes.

https://bootswatch.com/

Here we have download the Cerulean theme’s bootstrap.min.css file.

Now inside the portal home page, create a new child file

Name the file as bootstap.min.css

Basically, this creates a web file in CRM that has the bootstrap.min.css file associated as notes attachment to it. (with Home page as the parent page)

Refresh the portal to see the changes

Another way of doing the same is create a new web file or update the bootstrap file attached as attachment to notes in the existing web file.

Download a new theme file.

Delete the existing attachment and upload this newly downloaded theme file.

Refresh the portal.

The theme here gets applied to all the child pages of Home. If we want a different theme for any of the child pages, we can repeat the same step.

For e.g. we want a different theme to be applied to Blog and its child pages. For this we will create a new child file, upload the theme file.

On clicking on any of the child pages of the Blog we can see the new theme applied only to its child page.

Hope it helps..