Search code examples
sharethistwitter-bootstrap-3

Twitter's Bootstrap 3 with ShareThis widget


bootstrap3 looks like there is a compatibility issue with the sharethis app widgets... images looked cropped due to the use of

{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } see demo http://gurroladesign.com/bootstrap3/

compatibily issue not existant on previous version of bootstrap http://gurroladesign.com/bootstrap/starter-template.html

have not been able to solve? any help greatly appreciated


Solution

  • 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;
    }