I have a button which has a bootstrap glyph icon applied to it and for some reason it is not working as desired.

It is conflicting with the SLDS css, it seems.

Can someone tell me how can I achieve the bootstrap functionality?

<button type="button" class="btn btn-default btn-sm repeater-prev">
    <span class="chevron-left"></span>
    <span class="sr-only">Previous Page</span>
  • Quick question, have you tried to use the SLDS approach to icons? Perhaps that would be an easier solution? – Sebastian Kessel Jan 16 '17 at 16:12
  • Actually I thought about it first but the requirement is to use bootstrap – user5129806 Jan 16 '17 at 16:14
  • I don't know enough CSS to help you more than that. But mixing two frameworks always carries the danger of conflict. I would advise that, if this is not a simple fix, you explore the possibility of doing it differently – Sebastian Kessel Jan 16 '17 at 16:15
  • 2
    If you are not using the namespaced slds, try that. That may solve css class conflicts. – javanoob Jan 16 '17 at 16:16

Lightning Salesforce Design System allows you to generate namespaced styles. https://tools.lightningdesignsystem.com/css-customizer In fact you will need to wrap your HTML in <div class="my-slds">.

Same trick is appliable to Bootstrap you can try to use bootstrap-sf1. https://github.com/SalesforceFoundation/bootstrap-sf1

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.