Low Priority Bootstrap Bug Report for the ASP.NET website team

Hi there, sorry but I wasn’t able to find a proper way to report this. I tried with a tweet, but probably was lost in a sea of other people contacting you. I hope I can get someone on the team to read this post, and if I fail maybe at least I can help someone out there with a similar problem.

At this page https://get.asp.net/ there’s an error on how bootstrap is used to build the 4 columns on the “Work with your favorite development tools” section. There are elements that are direct child of a .row but aren’t marked as .col-*. It looks like this:

<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="col-sm-12 col-md-6">
<div class="row icon icon-visualstudio"></div>
<div class="row">
<!-- Missing .col element -->
<h3><a href="https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx">Visual Studio</a></h3>
<p class="text-left">The easiest way to get started building applications with ASP.NET is to install the latest version of Visual Studio 2015 (including the freely available Community edition). Visual Studio has the tools you need to build ASP.NET web applications.</p>
<p class="text-muted">Works with ASP.NET 4.6 &amp;amp; 5.0</p>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="row icon icon-vscode"></div>
<div class="row">
<!-- Missing .col element -->
<h3><a href="https://code.visualstudio.com/">Visual Studio Code</a></h3>
<p class="text-left">Visual Studio Code is a cross-platform code editor refined and optimized for building modern web and cloud applications.</p>
<p class="text-muted">Works with ASP.NET 5.0<br><br><br></p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="col-sm-12 col-md-6">
<div class="row icon icon-yeoman"></div>
<div class="row">
<!-- Missing .col element -->
<h3><a href="https://github.com/omnisharp/generator-aspnet#generator-aspnet">generator-aspnet</a></h3>
<p class="text-left">Yeoman is a scaffolding platform built on top of Node.js that allows you to build template-based generators for projects or code files. <em>generator-aspnet</em> is a yeoman generator that allows you to scaffold ASP.NET 5 applications.</p>
<p class="text-muted">Works with ASP.NET 5.0</p>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="row icon icon-omnisharp-vertical"></div>
<div class="row">
<!-- Missing .col element -->
<h3><a href="http://www.omnisharp.net/">OmniSharp</a></h3>
<p class="text-left">OmniSharp is a set of tooling, editor integrations and libraries for developing in .NET. OmniSharp works with a number of editors including Atom, Brackets, Emacs, Sublime Text and Vim.</p>
<p class="text-muted">Works with ASP.NET 5.0</p>
</div>
</div>
</div>
</div>

But should actually look like this:

<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="col-sm-12 col-md-6">
<div class="row icon icon-visualstudio"></div>
<div class="row">
<div class="col-sm-12"> <!-- Added -->
<h3><a href="https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx">Visual Studio</a></h3>
<p class="text-left">The easiest way to get started building applications with ASP.NET is to install the latest version of Visual Studio 2015 (including the freely available Community edition). Visual Studio has the tools you need to build ASP.NET web applications.</p>
<p class="text-muted">Works with ASP.NET 4.6 &amp;amp; 5.0</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="row icon icon-vscode"></div>
<div class="row">
<div class="col-sm-12"> <!-- Added -->
<h3><a href="https://code.visualstudio.com/">Visual Studio Code</a></h3>
<p class="text-left">Visual Studio Code is a cross-platform code editor refined and optimized for building modern web and cloud applications.</p>
<p class="text-muted">Works with ASP.NET 5.0<br><br><br></p>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="col-sm-12 col-md-6">
<div class="row icon icon-yeoman"></div>
<div class="row">
<div class="col-sm-12"> <!-- Added -->
<h3><a href="https://github.com/omnisharp/generator-aspnet#generator-aspnet">generator-aspnet</a></h3>
<p class="text-left">Yeoman is a scaffolding platform built on top of Node.js that allows you to build template-based generators for projects or code files. <em>generator-aspnet</em> is a yeoman generator that allows you to scaffold ASP.NET 5 applications.</p>
<p class="text-muted">Works with ASP.NET 5.0</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="row icon icon-omnisharp-vertical"></div>
<div class="row">
<div class="col-sm-12"> <!-- Added -->
<h3><a href="http://www.omnisharp.net/">OmniSharp</a></h3>
<p class="text-left">OmniSharp is a set of tooling, editor integrations and libraries for developing in .NET. OmniSharp works with a number of editors including Atom, Brackets, Emacs, Sublime Text and Vim.</p>
<p class="text-muted">Works with ASP.NET 5.0</p>
</div>
</div>
</div>
</div>
</div>

Pay attention to the extra div.col-sm-12 element inside the inner div.row.

I’ve created this crude javascript that fixes the elements in question if you’ve want to try it.

$('#editors .row .row h3').parent().each(function(){
var $this = $(this);
var current = $this.html();
$this.html("<div class='col-sm-12'>"+current+"</div>");
});

 

So what’s the big deal?
Well without that col-* element bootstrap won’t add the proper padding to the elements inside each column and they tend to bump into each other. In the following gifs you can see the difference made by this change.

desktop difference

Desktop

 

tablet

Tablet

 

phone

Phone

Author: Maurizio Pozzobon

Maurizio has 5+ years developing solutions in the insurance industry. He is passionate about doing the right thing right, so he works in a tight loop with his clients to deliver the best solution possible.