Available in the OSS Version

Themes - Bootstrap Default

This is the Ignite UI for jQuery Bootstrap default theme. You can use this independently of Bootstrap for Ignite UI for jQuery, but it is based on this Bootstrap theme so that you can use it along with other Bootstrap-themed elements.


You can also generate your own Bootstrap-based themes for Ignite UI for jQuery using our Ignite UI for jQuery Bootstrap Theme Generator!

Generate Your Own Custom Bootstrap Theme

igGrid

Show
records
Product Name
Product Number
List Price
Standard Cost
Add new row
Adjustable RaceAR-538100
Bearing BallBA-832700
BB Ball BearingBE-234900
Headset Ball BearingsBE-290800
BladeBL-203600
LL CrankarmCA-596500
ML CrankarmCA-673800
HL CrankarmCA-745700
Chainring BoltsCB-290300
Chainring NutCN-613700

igEditors

igCombo

igDialog

igDataChart

jQuery UI Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget porta urna. Ut gravida mi at ligula commodo feugiat vehicula lacus tincidunt. Proin lobortis magna sed lacus malesuada commodo fermentum felis auctor. Sed quis nulla quis tellus facilisis malesuada. Mauris aliquam neque consequat mi blandit in luctus magna rutrum. Fusce sit amet ipsum magna. Vivamus porttitor arcu vitae eros molestie et sagittis dolor cursus. Quisque ultrices feugiat risus, vitae molestie felis interdum ac. Suspendisse pellentesque magna nec est commodo porttitor.

jQuery UI Datepicker

PrevNext
March 2025
SuMoTuWeThFrSa
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/bootstrap3/default/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

    <style type="text/css">

        .flex {
            display: -webkit-box; 
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex; 
            display: flex;
            -webkit-flex-wrap: wrap; /* Safari 6.1+ */
            flex-wrap: wrap;
        }

        .ui-tabs .ui-tabs-panel{
            margin-top: auto;
        }

        .sampleContainer p {
            line-height:28px;
        }

        .sampleContainer .ui-igcombo-wrapper {
            width:100%;
        }

        igsb-sample-desc  {
            font-size: 16px;
        }

        .themeButtonContainer {
            margin-bottom:30px;
        }

        section {
            margin-bottom:30px;
        }

        .sampleContainer .pageTitle {
            font-size:20px;
            margin-bottom:10px;
        }

        .igEditors input {
            width:100%;
            margin-bottom:15px;
            padding:5px;
            box-sizing:border-box;
        }

        .igEditors > div:last-of-type input {
            padding:0;
            height:29px;
        }

        .igEditors label {
            display:block;
            margin-bottom:5px
        }

        .igEditors > div {
            min-width:32%;
            margin:5px;
        }
       
        .text-rigth {
            text-align:right;
        }

        .three-col > div {
            padding: 10px;
            min-width: 32.1%;
            background: #f9f9f9;
            margin:5px;
            box-sizing: border-box;
           
        }
    </style>
</head>
<body>

    <section>
        <div class="igsb-sample-desc">
            <p>This is the Ignite UI for jQuery Bootstrap default theme.  You can use this independently of Bootstrap for Ignite UI for jQuery, but it is based on this Bootstrap theme so that you can use it along with other Bootstrap-themed elements.</p>
        </div>

        <br />
        <p>You can also generate your own Bootstrap-based themes for Ignite UI for jQuery using our Ignite UI for jQuery Bootstrap Theme Generator!</p>
        <div class="themeButtonContainer">
            <a class="themeButton" href="http://www.igniteui.com/bootstrap-theme-generator/default">
                <span>Generate Your Own Custom Bootstrap Theme</span>
            </a>
        </div>
    </section>

    <section>
        <h1 class="pageTitle">igGrid</h1>
        <table id="grid"></table>
    </section>


    <section>
        <h1 class="pageTitle">igEditors</h1>
        <div class="igEditors flex">
            <div>
                <label for="textEditor">Text</label>
                <input id="textEditor" value="John" />
            </div>

            <div>
                <label for="dateEditor">Date</label>
                <input id="dateEditor" value="07/07/2012" />
            </div>

            <div>
                <label for="maskEditor">Mask</label>
                <input id="maskEditor" value="mask edit" />
            </div>

            <div>
                <label for="currencyEditor">Currency</label>
                <input class="text-rigth" id="currencyEditor" value="42" />
            </div>

            <div>
                <label for="numericEditor">Numeric</label>
                <input class="text-rigth" id="numericEditor" value="42" />
            </div>

            <div>
                <label for="percentEditor">Percent</label>
                <input class="text-rigth" id="percentEditor" value="0.42" />
            </div>

            <div>
                <label for="datePicker">Date Picker</label>
                <input id="datePicker" type="date" />
            </div>
        </div>

    </section>

    <section class="three-col flex">
        <div>
            <h1 class="pageTitle">igCombo</h1>
            <div id="combo"></div>
        </div>

        <div>
            <h1 class="pageTitle">igTree</h1>
            <ul id="tree"></ul>
        </div>

        <div>
            <h1 class="pageTitle">igDialog</h1>
            <input type="button" id="openDialog" />
            <div id="dialog">
                <img style="width: 200px" src="/images/samples/dialog-window/content.jpg" />
            </div>
        </div>
    </section>

    <section>
        <h1 class="pageTitle">igDataChart</h1>
        
        <div id="chart"></div>
        
    </section>

    <section>
        <h1 class="pageTitle">jQuery UI Tabs</h1>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Lorem ipsum</a></li>
                <li><a href="#tabs-2">Nunc lacinia</a></li>
                <li><a href="#tabs-3">Praesent tristique</a></li>
            </ul>
            <div id="tabs-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget porta urna. Ut gravida mi at ligula commodo feugiat vehicula lacus tincidunt. Proin lobortis magna sed lacus malesuada commodo fermentum felis auctor. Sed quis nulla quis tellus facilisis malesuada. Mauris aliquam neque consequat mi blandit in luctus magna rutrum. Fusce sit amet ipsum magna. Vivamus porttitor arcu vitae eros molestie et sagittis dolor cursus. Quisque ultrices feugiat risus, vitae molestie felis interdum ac. Suspendisse pellentesque magna nec est commodo porttitor.</p>
            </div>
            <div id="tabs-2">
                <p>Nunc lacinia ligula a nisl porta sed facilisis mauris facilisis. Sed a ante turpis, eget semper odio. Curabitur facilisis faucibus iaculis. Ut fermentum pretium ultrices. Etiam sem dui, adipiscing sed tempus et, adipiscing eget erat. Vestibulum nec eros magna.</p>
            </div>
            <div id="tabs-3">
                <p>Praesent tristique arcu eget ligula pulvinar mollis. Maecenas at elit at justo posuere gravida id eu enim. Duis imperdiet lectus nec augue sollicitudin hendrerit. Suspendisse consectetur, lorem nec eleifend rutrum, eros metus sodales libero, et rutrum diam augue et lectus. Integer sed est vitae risus dignissim condimentum ullamcorper at massa. Donec a orci nisl, eget ullamcorper augue. Quisque sagittis fringilla tortor. Vivamus ligula velit, aliquam ut pellentesque quis, fringilla sit amet tortor.</p>
                <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis risus sit amet lorem facilisis posuere. Cras malesuada lobortis sodales. Praesent aliquam elementum tortor nec sollicitudin. Phasellus sed erat lectus, elementum adipiscing odio.</p>
            </div>
        </div>
    </section>

    <section>
        <h1 class="pageTitle">jQuery UI Datepicker</h1>
        <div id="datepickerui"></div>
    </section>

    <script src="/data-files/adventureworks.min.js"></script>
    <script>
        $(function () {
            //igGrid
            $("#grid").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                primaryKey: "ProductID",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "string", width: "0%", hidden: true },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "20%" },
                    { headerText: "List Price", key: "ListPrice", dataType: "number", width: "20%" },
                    { headerText: "Standard Cost", key: "StandardCost", dataType: "number", width: "20%" }
                ],
                dataSource: adventureWorks,
                features: [
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 10
                    },
                    {
                        name: "Sorting",
                        type: "local"
                    },
                    {
                        name: "Filtering",
                        type: "local"
                    },
                    {
                        name: "Updating",
                        dataDirty: function (evt, ui) {
                            ui.owner.grid.commit();
                            return false;
                        }
                    },
                    {
                        name: "Summaries"
                    }
                ]
            });

            //igEditors
            $("#textEditor").igTextEditor();
            $("#dateEditor").igDateEditor();
            $("#maskEditor").igMaskEditor();
            $("#currencyEditor").igCurrencyEditor();
            $("#numericEditor").igNumericEditor();
            $("#percentEditor").igPercentEditor();
            $("#datePicker").igDatePicker();

            //igCombo
            $("#combo").igCombo({
                dataSource: [
                      { "ID": 1, "Name": "John Smith", "Age": 45 },
                      { "ID": 2, "Name": "Mary Johnson", "Age": 32 },
                      { "ID": 3, "Name": "Bob Ferguson", "Age": 27 }
                ],
                valueKey: "ID",
                textKey: "Name",
                text: "John Smith"
            });

            //igTree
            $("#tree").igTree({
                dataSource: [
                {
                    "ID": 1, "RegionName": "North America", "Countries":
                    [
                        { "ID": 1, "CountryName": "United States" },
                        { "ID": 2, "CountryName": "Canada" },
                        { "ID": 3, "CountryName": "Mexico" }
                    ]
                },
                {
                    "ID": 2, "RegionName": "South America", "Countries":
                    [
                        { "ID": 4, "CountryName": "Brazil" },
                        { "ID": 5, "CountryName": "Uruguay" }
                    ]
                },
                {
                    "ID": 3, "RegionName": "Europe", "Countries":
                    [
                        { "ID": 6, "CountryName": "United Kingdom" },
                        { "ID": 7, "CountryName": "Germany" },
                        { "ID": 8, "CountryName": "Bulgaria" }
                    ]
                }
                ],
                bindings: {
                    textKey: "RegionName",
                    valueKey: "ID",
                    childDataProperty: "Countries",
                    bindings: {
                        textKey: "CountryName",
                        valueKey: "ID"
                    }
                }
            });

            //igDialog
            $("#dialog").igDialog({ height: 250, state: "closed" });
            $("#openDialog").igButton({
                labelText: "Open Dialog", click: function () {
                    $("#dialog").igDialog("open");
                }
            });

            //igDataChart
            $("#chart").igDataChart({
                width: "100%",
                height: "400px",
                title: "Population per Country",
                subtitle: "Five largest projected populations for 2015",
                dataSource: [
                { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
                { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
                { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
                { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
                { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
                ],
                axes: [
                    {
                        name: "NameAxis",
                        type: "categoryX",
                        title: "Country",
                        label: "CountryName"
                    },
                    {
                        name: "PopulationAxis",
                        type: "numericY",
                        minimumValue: 0,
                        title: "Millions of People",
                    }
                ],
                series: [
                    {
                        name: "2015Population",
                        type: "column",
                        isHighlightingEnabled: true,
                        isTransitionInEnabled: true,
                        xAxis: "NameAxis",
                        yAxis: "PopulationAxis",
                        valueMemberPath: "Pop2015"
                    }
                ]
            });

            // jQuery UI controls
            $("#tabs").tabs();
            $("#datepickerui").datepicker();
        });
    </script>

</body>
</html>