How to add Bootstrap social buttons on WordPress

Posted by on

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.

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

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.

Don’t forget to replace yourwebsite.com 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:

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

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.
twiii

add bootstrap social buttons WordPress

Share This Post

Last updated: July 8, 2017

Authored by :

I'm 3nions's co-founder and an individual contributor to the team. Besides being a Web Enthusiast, My latest obsession is SEO. When I'm not playing with CSS3 or Adobe Illustrator, I love adventuring nature and eating.

2 comments

Thanks for sharing this.. 🙂

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

Leave a Reply