Right border of the AddThis counter missing with Twitter's Bootstrap 3
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?
Twitter's Bootstrap 3 with ShareThis widget
Wrap your code (span tags) in a container and reset css box-sizing property to content-box
of this spans (see also: Right border of the AddThis counter missing with Twitter's Bootstrap 3):
your html:
<div id="sharethis">
<span class='st_sharethis_hcount' displayText='ShareThis'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>
</div>
css (add after the Bootstrap CSS):
#sharethis span
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Chosen.js styling not conforming to Bootstrap3 styles
Actually, there is someone who created a Bootstrap 3.0 CSS theme for Chosen.
Some screens:
The theme is available in this Github issue Use Gist below.
Edit
I've created a Fiddle using the same HTML as the official Chosen documentation page with the Bootstrap theme applied. (added form-control
to all selects and removed style="width:350px;"
)
And also, I'll be maintaining the theme in this gist: https://gist.github.com/koenpunt/6424137
Why did Bootstrap 3 switch to box-sizing: border-box?
The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)
Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.
Personally I think most benefits go to the grid system. In Twitter's Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With border-box
this calculating is easy because the border-box
value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)
Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Updating Bootstrap to version 3 - what do I have to do?
Download the latest version from http://getbootstrap.com/ OR Replace the css and js files with the newest versions or use CDN (http://www.bootstrapcdn.com/)
Migrate your html, yes indeed read http://bootply.com/bootstrap-3-migration-guide. You could try http://twitterbootstrapmigrator.w3masters.nl/ or http://code.divshot.com/bootstrap3_upgrader/ (provide checklist too)
- Images not responsive by default in Twitter Bootstrap 3?
- Styling Twitter's Bootstrap 3.x Buttons
- Change navbar color in Twitter Bootstrap 3
remove html5shiv cause TB drops support for IE7 and Firefox 3.xadd html5shiv.js to add support of HTML5 elements to IE8add respond.js (https://github.com/scottjehl/Respond) for media query support in IE. NOTE this won't work with CDN, see: IE8 issue with Twitter Bootstrap 3
If you use Glyphicons, you will have to add them from http://glyphicons.getbootstrap.com/ ( icons have been moved to a separate repository.)Glyphicons are back since RC2 (180 glyphs in font format from the Glyphicon Halflings set)If you use the Javascript Typeahead component, you will have to integrate https://github.com/twitter/typeahead.js/ (cause typeahead javascript is dropped) See also: Typeahead problems with Bootstrap 3.0 RC1 Or use the "old" plugin: https://github.com/bassjobsen/Bootstrap-3-Typeahead, see also: https://stackoverflow.com/questions/18615964/ajax-call-in-bootstrap-3-0-typeahead/18620473
Switch to the latest version of jQuery 1.x (don't use the 2.x version cause jQuery 2.x don't support IE8)
If you use third party widgets which adds or insert html to your code (like addthis.com, sharethis.com and Google maps), create a wrapper for the box-sizing, see: Right border of the AddThis counter missing with Twitter's Bootstrap 3
Other:
Bootstrap 3 switch to box-sizing: border-box why?: https://stackoverflow.com/a/18858771/1596547
Note support for IE7 has been dropped. https://github.com/coliff/bootstrap-ie7 try to add the css part back with use of some conditional CSS.
Related Topics
Css3 Filter: Drop-Shadow Spread Property Alternatives
Creating Rounded Corners in IE7/IE8
Why Is the Two P-Tags Not Beside Each Other When the Screen Is Wide
How to Set Animation on First Element on Loading
How to Change Image a When Hovering Over Image B Without JavaScript Only CSS
Custom Tags Not Working in IE8
How to Put Text Inside Radio Button
How to Custom Table Responsive Materialize
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders
How to Remove a Specific Bullet Point Within a Ul in CSS
How to Remove the Underline of a Link in Chrome Using CSS
Reset Angle of Text in Skewed Div Using CSS
Centering an Image in a Paragraph
CSS Best Practices - Combining All CSS into a Single Stylesheet