title: Angular-kendo with Bootstrap look and feel
body: <p>I am trying to build a UI with Kendo UI and angular-kendo. But don't want to use Kendo CSS. Want a Bootstrap integration.</p>
  
  <p>This link below gives information on how to do this:
  docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap</p>
  
  <p>and there is a sample demo page:
  demos.telerik.com/kendo-ui/bootstrap/</p>
  
  <p>Now what we observed from the demo page and the instructions is that the Bootstrap works with JQuery coding. Though we are OK with jQuery as a dependency to Kendo UI, we don't want to write code in JQuery. We want to use Angular directives only.</p>
  
  <p>We noticed that the demo page shown above draws a dropdown box like this:</p>
  
  <pre><code> &lt;div id="configurator-wrap" class="col-sm-9 hidden-xs"&gt;
        &lt;div id="configurator" class="row"&gt;
                    &lt;label class="col-sm-4"&gt;
                        &lt;div class="description"&gt;Dimensions&lt;/div&gt;
                        &lt;select id="dimensions"&gt;
                        &lt;/select&gt;
                    &lt;/label&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Bootstrap mandates a JQuery like this:</p>
  
  <pre><code> &lt;script&gt;
        $("#dimensions").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            value: "common",
            dataSource: [
                { text: "Default", value: "common" },
                { text: "Bootstrap", value: "common-bootstrap" }
            ],
            change: function(e) {
                var commonLink = Application.getCurrentCommonLink();
                Application.updateLink(commonLink, Application.getCommonUrl(this.value()));
            }
        });
    &lt;/script&gt;
  </code></pre>
  
  <p>Instead we want to be able to use the angular-kendo way of writing drop down. We will include the Bootstrap CSS etc, and it should give the Bootstrap look.
  Like this:</p>
  
  <pre><code>&lt;select kendo-drop-down-list&gt;
    &lt;option value="1"&gt;Thing 1&lt;/option&gt;
    &lt;option value="2"&gt;Thing 2&lt;/option&gt;
    &lt;option value="3"&gt;Thing 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>as given in this demo,(but this is using kendo CSS files): <a href="http://kendo-labs.github.io/angular-kendo/#/" rel="nofollow">http://kendo-labs.github.io/angular-kendo/#/</a></p>