How to add Bootstrap social buttons on WordPress

Posted by on

Share this

add bootstrap social buttons wordpress

bslocal social

 

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

When 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 of 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. add bootstrap social buttons wordpress

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 many 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 : www.yourwebsite.com/wp-content/Bootstrap-social.css

You’ve just added the file now lets load it on your website. Loading it on your whole website is quiet 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.

Don’t forget to replace yourwebsite.com with your website url otherwise it will not work on your website.

Done adding it Now lets try this alluring creations 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:

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

The outcome of the codes above are 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 are always medium.
twiii

add bootstrap social buttons wordpress

add bootstrap social buttons wordpress

Last updated: September 8, 2016

Authored by :

Hi ! I'm Prakhar Shrivastav, currently a final year BSc student and a co-founder of 3nions. I love spending quality times on Web development, Graphic designing, and SEO.

2 comments

Thanks for sharing this.. 🙂

Thank you! Lipis
The credit also goes to you ??

Leave a Reply