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
    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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.