How to bootstrap with Visualforce

Ok so today I am going to show you a small and simple example of how to get started with bootstrap in visualforce. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. So now first thing first:

1. Download bootstrap lib zip file from "http://getbootstrap.com/" and upload it to your custom setting by name "Bootstrap".
2. Now create a visualforce page name "Bootstrap_Mobile_CreateAccount".
3. And include the bootstrap scripts as :

<!-- Load script here -->
    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.2.0-dist/css/bootstrap-theme.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.2.0-dist/css/bootstrap.min.css')}"/>
    <apex:includeScript value="https://code.jquery.com/jquery.js"/>
    <apex:includeScript value="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.2.0-dist/js/bootstrap.min.js')}"/>

    4.   Now create div and give the class of bootstrap as shown here

<div class="container">
 <br/>
 <div class="panel panel-primary">
  <div class="panel-heading">
   <h3 class="panel-title">Create Account</h3>
  </div>
  
  <div class="panel-body">
   Details:
   <div class="row">
    <div class="col-md-4"><input id="inp1" type="text" placeholder="Account Name" class="form-control"/></div>
    <div class="col-md-4"><input id="inp2" type="text" placeholder="Description" class="form-control"/></div>
    <div class="col-md-4"><input id="inp3" type="text" placeholder="Phone" class="form-control"/></div>
   </div>
   <br/>
   <br/>
   <button class="btn btn-lg btn-primary btn-block" type="submit" onclick="createAcc();">Save</button>
  </div>
 </div>
</div>

     5.   Now provide this <javaScript> to the page to we can save the records.

<script>
 Visualforce.remoting.timeout = 120000; // Set timeout at page level
 var $j = jQuery.noConflict();        

 function createAcc(){
  $j('#basicModal2').modal('show');
  var accName= $j('#inp1').val();
  var accDes= $j('#inp2').val();  
  var accPhn= $j('#inp3').val();          
  Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Bootstrap_Mobile_CreateAccountCon.createAccount}',accName,accDes,accPhn,handleResult);  
 } 
 function handleResult(result, event){
  if (event.status) {
   alert(result);
  } 
      
 }             
</script>  

6. Now create a controller and in that create this javascriptRemoting method

@RemoteAction
global static string createAccount(String accName, String accDes, String accPhn){
 Account acc = new Account();
 acc.name = accName;
 acc.Description = accDes;
 acc.Phone = accPhn;
 insert acc;
 return 'Success';
}

That is it, You have created a visualforce page that is using bootstrap css for view and apex controller for saving the records.

PS: For different type of element you can use different class as:
CheckBox:

<div class="checkbox col-md-4">
 <label>
   <input type="checkbox"> Check Box</input>
 </label>
</div>

//get the checkbox values as this or you can also get a array of objects and use .each
//for multiple checkboxes id starting with inp4
function checkId(){
   var inpVal= $j('#inp4').prop('checked');
   alert(inpVal);
}

Hope this helps you!!