Using Bootstrap with the DevExpress ASP.NET Data Grid

DX + Bootstrap
I’ve been having a lot of fun lately (and been quite productive) using Bootstrap as a way to lay my sites out before giving them a final visual style. The past three websites I’ve done have used Bootstrap and I love the CSS classes it provides and the speed with which I can develop a nice, consistent, responsive site with it.

In my most recent project I’ve been working on integrating some of the MVC Extensions from DevExpress with good success. However, one quirk had me scratching my head. My customer was generally very happy with the ASP.NET Data Grid but wanted a few additional features, one being the ability for the user to specify the page size for the grid. Easy enough – I thought – it’s just a setting after all.

However, this is what I saw after enabling the setting:

Page Size Item Before

After some poking around using the Developer Tools in Chrome, I was able to identify the CSS in Bootstrap that was interfering with the rendering of the ASP.NET Data Grid. Here is the CSS I used to fix the issue:

/* for playing happy with DX */
td.dxpDropDownButton img {
    max-width: none;

td.dxpComboBox input {
    margin-bottom: 0px;
    padding: 0px 0px;

With that bit of CSS in place the control now renders properly:

Page Size Item After

Note that there’s also a post available from DevExpress here on fixes for common CSS issues with Bootstrap. However, using that method requires overwriting your bootstrap.css file.

4 thoughts on “Using Bootstrap with the DevExpress ASP.NET Data Grid

    1. nwoolls

      Hi Mike – I actually linked to that KB article at the bottom of my post. I noticed the other fixes in the KB article, but personally don’t want to use an unofficial source for my Bootstrap CSS. Is there any chance of you guys providing a small CSS file that overrides the conflicting CSS, rather than replacing the entire bootstrap.css with your fixed version?

      1. Pete

        A small css file would be extremely helpful. An unofficial bootstrap source would cause some serious issues on scalability and updating.

        1. nwoolls Post author

          Unless I am mistaken, the examples I gave in the article are small CSS files as opposed to the unofficial Bootstrap replacement provided by DevExpress. That was the motivation for the blog post.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>