Can anyone tell me how to create lookup field in viusalforce page using bootstrap library?
My use case is create contact record fields(LastName,AccountName and Lead Source).
For that I have created a page and it doest give the proper style for lookup field..
My VFP as follows:

<apex:page standardController="Contact" sidebar="false" standardStylesheets="false" showHeader="false" >
    <title>Create New Contact</title>        
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>        
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <apex:includeScript value="{!URLFOR($Resource.js, '/js/bootstrap.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.js, '/js/bootstrap.min.js')}"/>    
    <apex:stylesheet value="{!URLFOR($Resource.css, '/css/bootstrap.css')}"/>
    <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>

    <style type="text/css"><!-- Spacing for the Nav bar -->
      body {
        padding-top: 60px;
        padding-bottom: 40px;

    <script type="text/javascript">
        var $j = jQuery.noConflict();


     <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <a class="brand" href="#">Bootstrap Page</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <span class="navbar-form span3 pull-right">
                <li><a href="#">Right Link</a></li>
          </div><!--/.nav-collapse -->

    <div class="container">
    <apex:pageBlock >
        <apex:form >
            <h3>LastName </h3>
            <apex:inputField value="{!Contact.LastName}" styleClass="form-control"  html-placeholder="Enter Your Last Name"  /><br/>
             <h3>Account name</h3>
            <apex:inputField value="{!Contact.accountid}"   styleClass="form-control" html-placeholder="Enter Account Name"  /> <br/>
             <h3>Lead Source </h3>
            <apex:inputField value="{!contact.LeadSource}" styleClass="form-control"   /><br/>

            <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Create New Contact" />

    </div> <!-- /container -->



The above page gives like enter image description here

My expectation looks like enter image description here

Please help me on this.

Thanks in advance

  • 1
    All the info to do this would be HERE: blogforce9.blogspot.com/2013/10/…
    – Eric
    Commented Nov 27, 2014 at 5:23
  • @Eric I have seen the blog that you mentioned. But we have to install that package. I dont want to install any package in my project Commented Nov 27, 2014 at 5:26
  • +1 to Eric's comment especially as its an unmanaged package (so source code is included and can be modified after installation) and its also available in Github to brows/download.
    – Keith C
    Commented Nov 27, 2014 at 9:05

1 Answer 1


If you expect a simple solution with just a few lines of code you won't get it. A good lookup mechanism is internally not simple. But luckily thanks to the component mentioned by @eric the usage is simple.

But since there is a unmanaged package here


you can install it in a developer org and have a look at the full source code. And also deploy it without any package just using eclipse later.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .