How to add Bootstrap social buttons on WordPress

add bootstrap social buttons WordPress

bslocal social


The social buttons like these are really attractive and look cool too. You can zoom it here and see that how these social buttons actually work.

[su_dropcap style=”flat”]W[/su_dropcap]hen you’ll read my last post of adding Bootstrap in your WordPress theme, you will come to know that how powerful framework is Bootstrap. It is the fastest frontend design to give your users a killer impression of your website. The components like Jumbotron, navbar, progress bars, Breadcrumbs, pagination, Input groups, button dropdowns, labels, badges, list group, media objects, carousel, group buttons, panels, Glyphicons, header, thumbnails & responsive embeds are the key to the responsive web design. A complete mobile-friendly framework for better vision, preloaded styles and classes, an all in one solution to the development of mobile and SEO friendly website.

These buttons can be used as

  • Social Promotions
  • Social share buttons
  • Post share
  • Popup share
  • Mobile apps

For adding these buttons firstly you have to download the Bootstrap social CSS file. The supported social buttons are Facebook, Twitter, LinkedIn, Yahoo, Google, Instagram, Foursquare, Flickr, Github, SoundCloud, Tumblr, Vimeo and much more. Using this library by lipis you can add or edit the styles of these bootstrap buttons.

How to use

Include Bootstrap and Font Awesome

Firstly you will have to include the latest Bootstrap and Font Awesome in your project.  >>>>  learn how to do that.

Include the CSS

After adding these files to your WordPress theme, you have to unzip the Bootstrap social CSS file you’d downloaded before. Now you will see that there are many types of files in this compressed folder. Go there and find the CSS file named Bootstrap-social.css. Copy and upload this file to your website’s root folder. If you’re a WordPress user just directly upload it in your Cpanel > wp-content web directory. Upload it in such a way that it looks like this URL:

You’ve just added the file now let’s load it on your website. Loading it on your whole website is quite simple. Just copy this code given below to your header.php or HTML file. Note that the code must below the <head> tag. This is because it will load first on your website.

<link rel="stylesheet" href="">

Don’t forget to replace with your website URL otherwise, it will not work on your website.

Done adding it Now let’s try this alluring creation by lipis

Add some buttons!

Start using the buttons as you would normally do with the Bootstrap buttons that have an icon by adding the relevant class. For example:

 <a class="btn btn-block btn-social btn-twitter">
    <span class="fa fa-twitter"></span> Sign in with Twitter

Or if you just want the icon button, use it like this:

<a class="btn btn-social-icon btn-twitter">
    <span class="fa fa-twitter"></span>

The outcome of the codes above is similar to the one given below. You can set the sizes using the commands such as lg sm and more. The default size of the buttons is always medium.

add bootstrap social buttons WordPress



Please enter your comment!
Please enter your name here