Bootstrap環境で、複数のSNSボタンを簡単一括表示

複数のSNSボタンを簡単に表示するために、こちらのサイトのお世話になりました！
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

サンプルコードをダウンロードし、少し編集するだけで、複数のSNSボタンを簡単に実装できます！
ありがたやー(━＿━)ゝ
ただ、Bootstrap環境だと上手く横並びで表示してくれない…
各グリッドに一つのボタンを配置してもウインドウサイズによって表示がバラバラ。

そこで、各ボタンにbtnクラスを付けて、btn-groupでまとめました！
あとボタンの種類とか、marginとか少しだけいじっています。
JSとかCSSファイルは上記サイトでダウンロード出来ます。

PCだとこんな感じで表示されます。

ウインドウをぐっと縮めるとこんな感じ

ソースは以下の通りです。

HTML

<div class="text-center social-area-syncer">
	<div class="social-button-syncer">
		<div class="text-center　btn-group row">
			<!-- Twitter -->
			<div class="btn sc-tw" style="margin-top: 4px;"><a data-url="" href="" class="twitter-share-button" data-lang="ja" data-count="horizontal" data-dnt="true">ツイート</a></div>

			<!-- Facebook -->
			<div class="btn sc-fb"><div class="fb-like" data-href="" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></div>

			<!-- Google+ -->
			<div class="btn social-button" style="margin-top: 9px;"><div data-href="" class="g-plusone" data-annotation="none" data-width="120px" data-size="tall"></div></div>

			<!-- はてなブックマーク -->
			<div class="btn" style="margin-top: 4px;"><a href="" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a></div>

			<!-- LINE [画像は公式ウェブサイトからダウンロードして下さい] -->
			<div class="btn sc-li"><a href="">
				<image src='linebutton_82x20.png' alt='LINEに送る' class='sc-li-img' style='max-width:110px; max-height: 20px;' />
			</a></div>
		</div>
	</div>
	
	<!-- Facebook用 -->
	<div id="fb-root"></div>

</div>