Right border of the AddThis counter missing with Twitter's Bootstrap 3

Question

When using the default code from http://www.addthis.com/ with Twitter's Bootstrap 3 the right border of the counter is missing:

Sixteenth

Answer 1

Twitter's Bootstrap 3 use a CSS's universal selector to set box-sizing (see: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) to border-box. This will be save cause support for IE7 has been dropped. This selector breaks the AddThis counter.

The counter is set by: <a class="addthis_counter addthis_bubble_style"></a>.

Solution: Reset the box-sizing for the .addthis_counter class. Add the following code after your bootstrap css:

 .addthis_counter
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

Or Less:

.addthis_counter,
.addthis_counter * { .box-sizing(content-box); }

See also: http://getbootstrap.com/getting-started/#third-parties and Why did Bootstrap 3 switch to box-sizing: border-box?

Sixteenth