MVC Bootstrap Input Group Button Space

Recently, I’ve fired-up a new MVC5 website with the default template. I’m looking to use the Bootstrap input button group but instead of the controls flush against each other I see a large gap between the two elements.

Here is what I’m expecting:

bootstrap-mvc-2

Here is what I get instead:

boostrap-mvc-1

Here is the HTML markup:

<div class="row">
    <div class="col-md-4">
        <h3>Bootstrap Input Group</h3>
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-btn">
                <button class="btn btn-primary">OK</button>
            </span>
        </div>
    </div>
</div>

The Problem

It turns out the Visual Studio’s MVC template Site.css stylesheet is causing problems here.

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

The Solution

Remove the max-width and the space between the elements disappear.

Getting The Solution

It would be helpful to share how I solved this issue — For experienced developers this is probably common knowledge.

In this case I used the browser’s debugger tools to inspect the page elements: On the rendered page in the browser, hover the mouse pointer over the input box then Right-ClickInspect Element.

bootstrap-dev-tools

Chrome’s Developer Tools gives you a screen like the one above. Using this you can examine which CSS rules are applied to a specific element and it also tells you which file the rule comes from (site.css, line 20).

The process on Firefox and Internet Explorer is almost exactly the same as with Chrome.


Frameworks and libraries in this article:
  1. ASP.NET MVC 5.1.2
  2. Twitter Bootstrap 3.1.1
Advertisements