+ Start a Discussion
sreejasreeja 

Include the parent and child records in the bootstrap

Copy and paste the below code  in your visualforce page:
in the block a i should get the list of custom parent record in block 1 with selection of parent record, child records should have to  display in the block 2. and new and update and delete option should have to include init 
 
<apex:page sidebar="false">
  
<html lang="en">
<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.3.7/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.3.7/js/bootstrap.min.js"></script>
  <style>
  
   
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
    
    
    
    .tab {
   
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 100%;
    height: 150px;
    padding-right:350px;
}


   
  </style>
</head>
<body>

    


  
<div class="container-fluid text-center">    
  <div class="row content">
    
    
    <div>
    <div class="col-sm-8 text-left"> 
     <h1>Parent Object:</h1> <br/>
           
           <div class="tab">
                  
                  
  
</div>  
 
 <br/>
 
<div  class="button1"  align="center">
     
      <button class="tablinks" >New</button>
  <button class="tablinks" >update</button>
  <button class="tablinks" >Delete </button>
     
     </div>
     
     <br/>
<h1>Child Object:</h1> 

    <div class="tab">
                  
                  
  
</div>
<br/>

<div  class="button1"  align="center">
     
     
  <button class="tablinks" >New </button>
  <button class="tablinks" >update</button>
  <button class="tablinks" >Delete</button>
     
     </div>  
     <br/>
</div>



    </div>
    
    
   

    
    
   
    
  </div>
</div>



</body>
</html>

</apex:page>