All Components

Bootstrap Forms Integration

Kendo UI for Angular integrates seamlessly with the form styling options of Twitter Bootstrap.

All available Kendo UI themes support integration with the Bootstrap forms. If your project requires you to mix Kendo UI and Bootstrap components, use the Kendo UI Bootstrap theme to ensure that the styles match.

Getting Started

To integrate with the Bootstrap forms, use the form-control class on the Kendo UI for Angular components—just like on the regular form inputs.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <!-- example layout -->
    <div class="row example-wrapper">
        <div class="col-xs-12 col-sm-8 offset-sm-2 example-col">
            <div class="card">
                <div class="card-block">

                  <!-- form items markup -->
                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">Input</label>
                    <div class="col-sm-8">
                      <input type="text" class="k-textbox form-control"/>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">NumericTextBox</label>
                    <div class="col-sm-8">
                      <kendo-numerictextbox class="form-control" [value]="10" [min]="0" [max]="100">
                      </kendo-numerictextbox>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">DropDownList</label>
                    <div class="col-sm-8">
                      <kendo-dropdownlist class="form-control" [data]="listItems" [value]="'Basketball'">
                      </kendo-dropdownlist>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">ComboBox</label>
                    <div class="col-sm-8">
                      <kendo-combobox class="form-control" [data]="listItems" [value]="'Basketball'">
                      </kendo-combobox>
                    </div>
                  </div>

                  <div class="row">
                    <label class="col-sm-4 col-form-label">MultiSelect</label>
                    <div class="col-sm-8">
                      <kendo-multiselect class="form-control" [data]="listItems" [value]="value">
                      </kendo-multiselect>
                    </div>
                  </div>

                </div>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {
  public listItems: Array<string> = [
    'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
    'Football', 'Table Tennis', 'Tennis', 'Volleyball'
  ];

  public value = [ 'Basketball', 'Cricket' ]
}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { InputsModule } from '@progress/kendo-angular-inputs';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    InputsModule,
    DropDownsModule,
    DateInputsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
import { enableProdMode, NgModule } from '@angular/core';
import { AppModule } from './ng.module.ts';

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Setting Different Element Dimensions

To make the form elements larger or smaller, use the form-control-lg or form-control-sm classes.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <!-- example layout -->
    <div class="row example-wrapper">
        <div class="col-xs-12 col-sm-8 offset-sm-2 example-col">
            <div class="card">
                <div class="card-block">

                  <!-- large form items -->
                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">Input</label>
                    <div class="col-sm-8">
                      <input type="text" class="k-textbox form-control form-control-lg"/>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">NumericTextBox</label>
                    <div class="col-sm-8">
                      <kendo-numerictextbox class="form-control form-control-lg" [value]="10" [min]="0" [max]="100">
                      </kendo-numerictextbox>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">DropDownList</label>
                    <div class="col-sm-8">
                      <kendo-dropdownlist class="form-control form-control-lg" [data]="listItems" [value]="'Basketball'">
                      </kendo-dropdownlist>
                    </div>
                  </div>
                </div>
            </div>

            <div class="card">
                <div class="card-block">

                  <!-- small form items -->
                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">Input</label>
                    <div class="col-sm-8">
                      <input type="text" class="k-textbox form-control form-control-sm"/>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">NumericTextBox</label>
                    <div class="col-sm-8">
                      <kendo-numerictextbox class="form-control form-control-sm" [value]="10" [min]="0" [max]="100">
                      </kendo-numerictextbox>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-4 col-form-label">DropDownList</label>
                    <div class="col-sm-8">
                      <kendo-dropdownlist class="form-control form-control-sm" [data]="listItems" [value]="'Basketball'">
                      </kendo-dropdownlist>
                    </div>
                  </div>
                </div>
            </div>

        </div>
    </div>
  `
})
export class AppComponent {
  public listItems: Array<string> = [
    'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
    'Football', 'Table Tennis', 'Tennis', 'Volleyball'
  ];

  public value = [ 'Basketball', 'Cricket' ]
}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { InputsModule } from '@progress/kendo-angular-inputs';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    InputsModule,
    DropDownsModule,
    DateInputsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
import { enableProdMode, NgModule } from '@angular/core';
import { AppModule } from './ng.module.ts';

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Using with Input Groups

You can also use Kendo UI components inside Bootstrap input groups, which are specified by the input-group class. To place static data in add-ons on either side of the component, set the input-group-addon class.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <!-- example layout -->
    <div class="row example-wrapper">
        <div class="col-xs-12 col-sm-8 offset-sm-2 example-col">
            <div class="card">
                <div class="card-block">

                  <!-- item groups markup -->
                  <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <kendo-numerictextbox class="form-control" [value]="20" [min]="0" [max]="100">
                    </kendo-numerictextbox>
                  </div><br>

                  <div class="input-group">
                    <kendo-autocomplete class="form-control" [data]="listItems" [placeholder]="'Your country name'">
                    </kendo-autocomplete>
                    <span class="input-group-addon">Go!</span>
                  </div><br>

                  <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <kendo-numerictextbox class="form-control" [value]="10" [decimals]="0">
                    </kendo-numerictextbox>
                    <span class="input-group-addon">.99</span>
                  </div>

                </div>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {
  public listItems: Array<string> = [
    "Bulgaria",
    "Canada",
    "France",
    "Germany",
    "United States"
  ];
}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { InputsModule } from '@progress/kendo-angular-inputs';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    InputsModule,
    DropDownsModule,
    DateInputsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
import { enableProdMode, NgModule } from '@angular/core';
import { AppModule } from './ng.module.ts';

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In this article