Bootstrap 4 Support

[niftylettuce]

Per my findings here https://github.com/twbs/bootstrap/issues/19877 and here https://github.com/lipis/bootstrap-social/issues/91, there are a few missing variables.

// bootstrap-social
$line-height-computed: floor(($font-size-base * $line-height-base));
$padding-base-vertical: $btn-padding-y;
$padding-base-horizontal: $btn-padding-x;
$font-size-large: $font-size-lg;
$padding-large-vertical: $btn-padding-y-lg;
$padding-large-horizontal: $btn-padding-x-lg;
$font-size-small: $font-size-sm;
$padding-small-vertical: $btn-padding-y-sm;
$padding-small-horizontal: $btn-padding-y-sm;

@import '../../../node_modules/bootstrap-social/bootstrap-social.scss';

However I noted that the sizing of the buttons seems to be off still with V4, so if I use this package, and the above code, but exclude the class btn-social, it at least sets the colors for me.

[niftylettuce]

I am using this in CrocodileJS at https://github.com/crocodilejs/crocodile-node-mvc-framework (release v1.0.0 will be out soon with this included).

[lipis]

Soon I'll have to check what is going to happen with BS4 :)

[gitviola]

+1

[anysomewhere]

+1

[vvzen]

+1 !

EDIT: It seems to be working fine.. Here's what happens when I tried it :

[niftylettuce]

Update: Bootstrap 4 Beta's button-variant mixin has changed per https://github.com/twbs/bootstrap/commit/597e9f861807868d8d13bac93e8a328493fe6d54#diff-edb9cd89b66120ef946a81de31f6bb06R6.

You need to modify bootstrap-social to use a different approach. Bootstrap 4 Beta has a mixin called color-yiq that automatically calculates the best font color for a button depending the background-color, so we don't need to explicitly pass a font color.

You can use my fork if interested until my pull request for BS 4 support at https://github.com/lipis/bootstrap-social/pull/162 is accepted and released:

npm install niftylettuce/bootstrap-social#gh-pages

or if you're using yarn:

yarn add niftylettuce/bootstrap-social#gh-pages

I've opened a pull request for adding Bootstrap 4 support.

[niftylettuce]

Hi folks, see http://niftylettuce.com/bootstrap-social/ for documentation for Bootstrap 4 Beta until my pull request is accepted. Thanks! Make sure you yarn add niftylettuce/bootstrap-social#gh-pages. Otherwise see my fork at https://github.com/niftylettuce/bootstrap-social for the latest assets.

[niftylettuce]

PR added https://github.com/lipis/bootstrap-social/pull/162

[ivanmaxlogiudice]

@niftylettuce u need update the live demo link in ur fork

[niftylettuce]

@Sylvert0 done, thx

[mallardduck]

Hey, just wanted to bump this PR to see if it can be merged into a major release soon? Would love to start using this but my project is already using bootstrap 4.0.

[zgoda]

B4 left beta in January 2018, now it's at 4.1.

[Woodehh]

I've created a solution myself: https://github.com/Woodehh/social-buttons

It doesn't depend on Bootstrap in any way, so future proof! :)