Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sreejasreeja 

Using bootstrap in salesforce

iam using the bootstarp buttons in the salesforce-- button it was not effection eventhough used the libraries ... 
 in need the default button colurs for the all the buttons in the visualforce page... what should have to be include 

  
<apex:page >
 <html>
 
 <head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>


<body>

<div class="container">
  <h2>Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>      
</div>

</body>


 </html>
</apex:page>

 
Parmanand PathakParmanand Pathak
Hi,

Kindly include these two attributes in the <apex:page> tag - 
 showHeader="false" standardStylesheets="false"

If it helps you, kindly mark it as best answer so that It will help the community.

Thanks,
Parmanand Pathak
sreejasreeja
hi pathak,thanks for your reply, iam getting the out put, but in  my scenario ... i need to use the above code with showheader ="true"-- is there any alternative way, with header

 thanks 
sree
Parmanand PathakParmanand Pathak
Hi Vani,

Then you should go for SLDS(Salesforce Lightning Design System).

Include <apex:slds /> in you VF code and use the SLDS library to include the styles - 
https://www.lightningdesignsystem.com/

Try below code it work with show header  -
  
<apex:page>
<apex:slds />
  
<button class="slds-button">Button</button>
<button class="slds-button slds-button_neutral">Neutral Button</button>
<button class="slds-button slds-button_brand">Brand Button</button>
<button class="slds-button slds-button_outline-brand">Outline Brand Button</button>
<button class="slds-button slds-button_destructive">Destructive Button</button>
<button class="slds-button slds-button_text-destructive">Text Destructive Button</button>

</apex:page>

Let me know if you have any issue related to this.

Thanks,
Parmanand Pathak
Vyomlabs Pvt. Ltd, Pune
 
sreejasreeja
hi Parmanand Pathak, total ui is developed and designed using bootstrap .. so itseems the solution you provided is a lightning one .. 
hope you understand
 thanks 
sri
Parmanand PathakParmanand Pathak
Hi Vani,

I have also faced this issue and I had written a custom style class for buttons as below - 
  
<apex:page >
 <style>
 .button_custom {
            color: white !important;
            background: #26b709 !important;
            padding: 8px 25px !important;
        }
        
        .button_custom:hover {
            background-image: none !important;
            background-color: #ffffff !important;
            color: black !important;
        }
</style>  
  <button class="button_custom ">Button</button>

</apex:page>

You can customize the code as per your requiremenet.

Thanks,
Parmanand Pathak
sreejasreeja
hi pathak ,  we are going to use the bootstrap primary and success buttton and other standard buttons provided by the bootstrap , so iam searching for a solution for it ... im searching for a alternate solution rather than the custom css ..

 thanks 
 sri vani