How to add CSS framework to template using Community Builder?

Question

I have a new community built on the Lightning Napili template. But it seems at a default level, the most current Lightning Design System framework is not loaded on the master template or in the HEAD of the pages, nor is my default framework (based on Bootstrap), which is installed as a package and available everywhere else.

I did a test with the rich text editor (image attached) to add simple classes to test Bootstrap styling, and LDS (Lightning Design System) styling. Both failed.

Looking into the Community Builder, it's up to date, the latest version, and still does not work.

How do you add CSS frameworks to the template using Community Builder so framework classes can be used anywhere in the community?

Answer 1

You can add CSS frameworks to the template by editing the HTML Head Markup of the template in the community builder. Shown below.

Go to Community Builder -> Settings -> Advanced -> Edit Head Markup

Once You Click the Edit Head Markup Button, you will get a popup like shown in the image below where you can add CSS frameworks and other libraries just like you do in HTML.

NOTE:

Doing the above will add the CSS framework to each and every page of your community which might effect the standard CSS of the template. If you don't want that to happen, you can use lightning components with its <ltng:require> attribute. Something Like Below

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">

  <ltng:require
   styles="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
   scripts='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js,
   https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'/>

  <button type="button" class="btn btn-success">Success</button>

</aura:component>

I hope this helps :)