Skip to main content
BuyLog In
ASP.NET Bootstrap Controls
Search in…
Docs > Getting Started > Integration Into an Existing Project
All docs
V24.2
ASP.NET Bootstrap Controls
Overview
Getting Started
Start With Bootstrap Project Template
Integration Into an Existing Project
Demos and Sample Applications
Project Configuration
Security Considerations
Grid View
Card View
Scheduler
Spreadsheet
Rich Text Editor
Charts
Sparkline
Data Editors
Site Navigation
Site Layout
File Manager
Redistribution and Deployment
.NET Framework API Reference
Client API Reference
Download CHM

Integration Into an Existing Project

  • 2 minutes to read

To display DevExpress Bootstrap Controls correctly, ensure any of the following resources are referenced in your project:

  • bootstrap.css

  • bootstrap.min.css

Note

Bootstrap Charts additionally require the DevExtreme library and its dependencies. To learn more, refer to the Getting Started document.

Both CSS files and icon fonts are included in the default Bootstrap distribution package, which you can obtain from the Bootstrap official web site. Place the CSS files into the “Contents” folder and the fonts into the “fonts” folder within your project.

Provide the Required Files using NuGet

You can also install all required files using NuGet as described below.

  1. First, invoke the NuGet project manager for your project.

    Bootstrap_GettingStarted_ManageNuGetPackages

  2. In the NuGet Package Manager window, switch to the Browse tab and locate the Bootstrap package. Select the desired version of the Bootstrap framework and click Install.

    Bootstrap_GettingStarted_NuGetManager

  3. A dialog will appear, prompting you to accept project changes. Click OK to proceed.

Note that the installed package additionally includes bootstrap.js and its dependencies. The bootstrap.js file is not required for the correct operation of DevExpress Bootstrap controls, but you can use it to utilize the functionality of Bootstrap’s jQuery plugins in your web application.

Configuration

Specify the Bootstrap framework version used to render DevExpress Bootstrap controls in the Web.Config file.

<configSections>
  <sectionGroup name="devExpress">
    <!--........-->
    <section name="bootstrap" type="DevExpress.Web.Bootstrap.BootstrapConfigurationSection, DevExpress.Web.Bootstrap.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" />
  </sectionGroup>
</configSections>
<!--........-->
<devExpress>
  <bootstrap mode="Bootstrap5" iconSet="Embedded" />
  <resources>
    <add type="ThirdParty" />
    <add type="DevExtreme" />
  </resources>
  <compression enableHtmlCompression="false" enableCallbackCompression="true" enableResourceCompression="true" enableResourceMerging="true" />
  <settings accessibilityCompliant="true" doctypeMode="Html5" rightToLeft="false" checkReferencesToExternalScripts="true" protectControlState="true" ieCompatibilityVersion="edge" />
  <errors callbackErrorRedirectUrl="" />
</devExpress>

Note

The public key token (b88d1754d700e49a) may differ, depending on the product version you purchased.

Any page that uses DevExpress Bootstrap Controls should reference bootstrap.css (or bootstrap.min.css) directly or through a master page. Additionally, add the following meta tag to <head> to ensure proper rendering of Bootstrap components.

<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
See Also