— New online course!  Getting Started with Azure DevOps — Special launch price 50% off —

Utilities for debugging Bootstrap with and without ASP.NET MVC

by

I was running into a problem while trying to get a Bootstrap form to lay out properly.  My problem was that the text of labels was getting rendered under textboxes.  As I was playing with various Bootstrap styles on my DIVs – for example, ‘col-md-5’, ‘col-sm-5’, ‘col-sm-offset-1’, etc – it quickly became clear that I didn’t know which Bootstrap device environment size I was in. 

Bootstrap device environment size?  Bootstrap defines styles so that you can easily do grid layouts using a responsive design.  In order for it to be “responsive”, it needs to be able to intelligently lay out your content depending on the screen size of the device or browser window.  In order to do this, Bootstrap provides you with styles for extra-small (xs), small (sm), medium (md), and large (lg) sizes.  When Bootstrap does its grid-based layout, it’s always based on 12 columns per row.  What makes life tricky for developers is that the same layout doesn’t necessarily make sense on all devices and you’ll probably want to customize how stuff works.  You’ll do this by using some combination of the styles.  The styles use a predictable naming convention that is based on screen size.  For example, setting the style on a DIV to ‘col-sm-2 col-md-5’ would cause that DIV element to take up 2 columns on a small device and 5 columns on a medium device. 

As you can imagine, when you’re applying styles to your application, it’s important to know what it looks like at the various sizes and what size you’re currently looking at.  I wanted a way 1) to see the Bootstrap grid columns, 2) to quickly see what environment I’m in as I resize the window through the various environment sizes, and 3) to be able to toggle some kind of grid border around certain controls so that I could see how Bootstrap was actually laying them out.

Download the complete ASP.NET MVC code sample  View an HTML-only sample 

Display the Bootstrap Columns

The first one – being able to see the grid columns – was easy.  I wanted to see a 12 numbered grid cells in a row like the image below. 

SNAGHTML6ae449d

In order to do this, I simply needed to add the following DIVs to my HTML:

<div class=’row’>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>1</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>2</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>3</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>4</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>5</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>6</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>7</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>8</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>9</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>10</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>11</div>
    <div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>12</div>
</div>

The class attribute value of ‘col-sm-1 col-md-1 col-lg-1’ ensures that it does the same layout on all the screen sizes.  The style attribute with the value of ‘border-style: dotted’ means that the border of each DIV will be dotted. 

In order to save me some tedious and repetitive typing in my ASP.NET MVC applications, I created an extension method for HtmlHelper (aka. “@Html”) that lets me quickly drop this into my views.

public static MvcHtmlString DisplayBootstrapColumnDebugRow<TModel>(
   this HtmlHelper<TModel> html)
{
    var divTemplate =
        “<div class=’col-sm-1 col-md-1 col-lg-1′ style=’border-style: dotted’>{0}</div>”;

    var builder = new StringBuilder();

    builder.AppendLine(“<div class=’row’>”);

    for (var i = 1; i <= 12; i++)
    {
        builder.AppendFormat(divTemplate, i);
        builder.AppendLine();
    }

    builder.AppendLine(“</div>”);

    return new MvcHtmlString(builder.ToString());
}

I can call it from my view simply by calling @Html.DisplayBootstrapColumnDebugRow().

SNAGHTML6b5c813

Display the Current Bootstrap Device Screen Environment Size

Next up, I wanted to be able to see which screen size I was in as I resized my browser window.  In the image below, my browser was sized so that Bootstrap thought I was working on a small device. 

SNAGHTML6b940a0

If I resized the window to make it bigger, this value would automatically change to say ‘md’ or ‘lg’.  In the image below, I’ve resized my browser to be of medium size and Bootstrap thinks the window is ‘md’. 

SNAGHTML6bb17a2

In order to implement this, I tweeked some javascript code from this post on stackoverflow

function displayBootstrapEnvironment() {
   
// add the following control to your html body
    // <label id=’bootstrapEnvironmentName’>(not populated)</label>

    var element = $(‘#bootstrapEnvironmentName’);

    if (element.length > 0) {
        var environmentName = ‘(element is not in a bootstrap environment or not found)’;

        var possibleEnvironmentNames = [‘xs’, ‘sm’, ‘md’, ‘lg’];

        $tempElement = $(‘<div>’);
        $tempElement.appendTo($(‘body’));

        for (var i = possibleEnvironmentNames.length – 1; i >= 0; i–) {
            var currentEnvironmentToTest = possibleEnvironmentNames[i];

            $tempElement.addClass(‘hidden-‘ + currentEnvironmentToTest);
            if ($tempElement.is(‘:hidden’)) {
                $tempElement.remove();
                environmentName = currentEnvironmentToTest;
                break;
            }
        };

        element.text(environmentName);
    }
}

$(function () {
    // when the window is resized, the bootstrap environment info is refreshed
    $(window).resize(displayBootstrapEnvironment);

    // when the page loads, the bootstrap environment info is refreshed
    $(document).ready(displayBootstrapEnvironment);           
});

 

In the HTML, I added the following named control that would be populated by the javascript/jquery code.

<div class=”row”>
    Bootstrap Environment: <label id=’bootstrapEnvironmentName’>(not populated)</label>
</div>

As the window is resized, the javascript code executes and the environment size value gets populated. 

View the Bootstrap Grid for Specific Sections of the UI or Controls

Even after I could see both the environment and the grid columns, I sometimes still couldn’t tell exactly where Bootstrap was putting the controls in relation to the grid.  For this, I wanted to be able to toggle the grid lines around just a handful of controls.  I did this by adding a checkbox to enable and disable bootstrap grid debugging and then adding a CSS style and some javascript.

SNAGHTML6c194c4

If enable grid debugging was turned on, I wanted something like the following image:

SNAGHTML6c41de0

Here’s the code for the checkbox and the CSS style.  The magic on the checkbox happens via the onclick handler which calls the toggleGridDebugging() method. 

<div class=”row”>
    <div class=”col-md-offset-1 col-md-3″>
        <input type=”checkbox” id=”enableGridDebug” onclick=”toggleGridDebugging()”/> enable grid debugging
    </div>
</div>

<style>
    .debuggableGridDiv {
        /* this style marks a column as being debuggable */
        border-style: none;
    }
</style>

Here’s the javascript method for toggling the debugging.  It works by modifying the ‘debuggableGridDiv’ CSS style and changing the border-style from ‘none’ to ‘dotted’ and vice versa. 

function toggleGridDebugging() {
    var element = $(‘#enableGridDebug’);

    if (element.is(‘:checked’)) {
        $(“.debuggableGridDiv”).css(“border-style”, “dotted”);
    }
    else {
        $(“.debuggableGridDiv”).css(“border-style”, “none”);
    }
}

Once you have this code in your HTML page or ASP.NET MVC View, you simply have to add the ‘debuggableGridDiv’ to any DIV that you’d like to enable/disable grid lines for as shown below.

<div class=”row”>
    <div class=”col-sm-2 col-md-2 col-lg-1 debuggableGridDiv“>Name:</div>
    <div class=”col-sm-2 col-md-2 col-lg-2 debuggableGridDiv“>@Html.EditorFor(model => model.FirstName)</div>
    <div class=”col-sm-4 col-md-3 col-lg-3 col-sm-offset-1 col-md-offset-1 col-lg-offset-0 debuggableGridDiv“>Here’s some extra text about first name.</div>
</div>

Summary

I hope that these things help you to debug your Bootstrap responsive grid layouts.  Click here to download the complete ASP.NET MVC code sample.  Click here to view an HTML-only sample. 

 

-Ben


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: