I created a visualforce, but no change reflects on the page.

I'm using the lightning design system and I took this as an example:

DIV in lightning design system:

enter image description here

On my visualforce page:

enter image description here

This is a simple example of text size but nothing seems to reflect.

My visualforce Code:

enter image description here

What do I need to do to reflect the changes?

  • Welcome to SFSE! Please include your code in the body of your question as text, not an image. Use the {} tool in tht editor to format it.
    – David Reed
    Commented Jun 10, 2019 at 1:09

1 Answer 1


Add <apex:slds /> to your page and wrap your code in a container:

<div class="slds-scope">...</div>

Refer to the documentation here.

Try to make changes according to the following. Please post a question with code rather than images next time. :)

<apex:page sidebar="false" lightningStylesheets="true" showHeader="false">
        <apex:slds />
        <apex:stylesheet value="{!URLFOR($Resource.lightningStuff, 'salesforce-lightning-design-system.min')}"/>
            <div class="slds-scope">
                <div class="slds-text-heading_large">
                    The quick brown fox jumps over the lazy dog.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .