Add Bootstrap to Dynamics SL Web Apps

A couple of my previous posts have mentioned Bootstrap.  Today I’ll show you how to add bootstrap to your Web Apps solution.  I am currently using Bootstrap 4.2.1 in my production web apps environment.

Be warned, that Boostrap’s css files will conflict with the Web Apps css files and you will need to do some css clean up to give your users a nice experience.  I strongly suggest that you NOT touch anything in the bootstrap css file(s).  I think it’s best if you add overwriting css in your site.css file or create another css file to do this.  This will make BS upgrades easier to bring into your solution in the future. 

Steps to add bootstrap:

  1. Follow the link above and download bootstrap.  You will need to unzip the download.
  2. Copy the unzipped contents into a folder accessible in your web apps development environment.  
  3. Go to your Microsoft.Dynamics.SL.Timecard.Mobile project and right click your ‘Content’ folder.  Select ‘Add –> Existing Item’ and navigate to your bootstrap –> css folder.  Select the bootstrap.min.css file.  The min is a minified version which will give you some performance improvements over the non-minified version.  

…continued below image

  1. Go to the Microsoft.Dynamics.SL.Timecard.Mobile project and right click on your ‘Scripts’ folder. Again, select ‘Add –> Existing Item’ and this time navigate to your Bootstrap –> JS folder. Select the bootstrap.bundle.min.js file.
…continued below image
  1. Now, we need to a reference to these files in your _Layout.vbhtml, which is found in the Microsoft.Dynamics.SL.Timecard.Mobile project, in the Views –> Shared folder.

Bootstrap also requires a newer jQuery verion to run and I used a CDN for this. You can find the most up to date link on Bootstraps site.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

The other items to add to _Layout:

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.bundle.min.js"></script>

I would suggest putting everything in this order to properly work:

After completing all the above steps you need to rebuild and redeploy web apps. You should now be able to use bootstrap buttons, collapsible content, alerts, jumbotron, navigation, modals, etc. There is a some great documentation on bootstraps site on how to add these items and I have outlined how to add a modal to your web apps solutions here.

Have fun and let me know how you end up using in your solution!

Feel free to share...

Leave a Reply

Close Menu