Adding Bootstrap in your WordPress theme

Posted by on

Share this

Let me introduce you to the mobile friendly and most popular front-end framework for the websites nowadays, Bootstrap. I know some of you might be thinking what a weird name it is. But trust me, guys, Bootstrap is the future of web designing and you will love to use it. In this post, I will show you, How to use Bootstrap in WordPress. I will also cover some easy methods for adding Bootstrap in your WordPress theme.

What is Bootstrap ?

Bootstrap is a unique and SEO friendly & responsive framework made with CSS3, JavaScript, and HTML5. It is a first mobile-friendly front-end framework which is supported by all the web browsers till now.

The best thing about Bootstrap is that it is very fast and open source. Frankly speaking, I’ve added Bootstrap on both of the websites of mine and replaced almost all the elements of my theme with Bootstrap. Now my theme is lightweight, super fast and SEO friendly.

Bootstrap is absolutely FREE to download and use.

You may like : How to speed up WordPress site [updated]

Why should you use Bootstrap in WordPress ?

Well, that’s a great question. WordPress was a blogging framework which has now become the most popular website building software  on the web. Integrating Bootstrap in the WordPress is very profitable for Blogs. As Bootstrap is full of different kinds of elements which can be used for detailed analysis of the things.

Bootstrap is becoming more and more popular day-by-day because it is the most powerful among all the frontend languages and it has become one of the major components of web development.

Furthermore, it is the most popular HTML, CSS, and JavaScript friendly framework for creating responsive & mobile friendly projects on the web.

Bootstrap is made in such a way, that the sites which have built with it look perfect on every device such as mobile, desktops, laptops and more. It is a lightweight, fast and responsive framework for WordPress too.

There are many WordPress websites and themes which are built using Bootstrap CSS and JavaScript. Yes, you can use the Bootstrap CSS in your WordPress websites to use the beautiful and active Buttons like this…

 

adding Bootstrap in your WordPress theme, Use Bootstrap in WordPress

adding Bootstrap in your WordPress theme

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Jumbotron can be used as a focusing content on your website. This can be easily done by adding Bootstrap CSS in your WordPress theme. It is kind of a big notifier or header and can be easily placed on the homepage.

 

adding Bootstrap in your WordPress theme, Use Bootstrap in WordPress

adding Bootstrap in your WordPress theme

 

Different type of navigation bars for your header and for any locations on your website.

Bootstrap consist of different types of progress bars which can be used for indicating the status or the grades of the work. It can be mainly used on Portfolio websites or the professional websites of organizations. Below is the example of toggle animation of Bootstrap.

 

45% Complete
60%
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
80% Complete (danger)

These simple animation is very light and doesn’t create much cache. Anyways it is a Bootstrap.

How to add Bootstrap in WordPress theme ?

Bootstrap is easy to integrate and use. Let’s start adding this awesome framework to your WordPress theme. Normally there are three particular ways in which you can add Bootstrap in WordPress theme.

METHOD 1 (using Bootstrap via WordPress plugin)

The Bootstrap plugins are integrated with the Bootstrap CSS and less and sass files. They are compiled in the shortcodes. You can use any of the Bootstrap component using this plugin. The name of the Plugin is Bootstrap shortcodes for WordPress. If you know how to use shortcodes then you can easily use this plugin.

Basically, after the plugin installation and activation, a new button named “Shortcodes” will appear after the “add media” button of WordPress post editor. From there you can easily select and use any of the Bootstrap elements by just clicking on it once.

Thus, most of the Bloggers prefer to use this method because there is no coding stuff and everything works cool without writing a single line of code.

Another WordPress Bootstrap plugin is BootstrapCDN. This plugin will only include Bootstrap CSS, JS, LESS, SASS and Font Awesome CSS, other files to your WordPress site.There is no shortcode feature available for this plugin.

There is no shortcode feature available for this plugin.

But on the other hand, this plugin is fast and consistent. This is because the plugin is regularly updated and has more than 500 active installs.

If you would like to implement other shortcodes in your WordPress site check the link below.

Also read : Best shortcode plugins for WordPress

METHOD 2 (use Bootstrap in WordPress via CDN)

The second method for adding Bootstrap in your WordPress theme via Bootstrap CDN  to your header.php file. Means you’re going to include the Bootstrap CSS and JavaScript file in the opening of the <head> tag so that it will run on every page of your site.

You might be thinking how to do this. Don’t worry its pretty easy.

This code will include Bootstrap in your WordPress theme from official bootstrap CDN network. Well, that’s really amazing that you can use the scripts present on the other sites by adding just a single piece of code.

This is the easiest way but it can conflict with some of the other WordPress plugins. In this easy way, you will be able to use Bootstrap in WordPress timelessly.

All the CSS and sass files of Bootstrap are minified and compressed so there is no chance that your website will become slow. It will remain fast, anyways it is a Bootstrap framework, Right?

Please note :

Before adding this code to your header.php , take the full backup of your WordPress theme. So, that if anything goes wrong, you can easily replace it.

WordPress users add this code just below the <head> tag in your header.php file (header.php file must be located in your Appearance > editor > header.php).

HTML users can also use this code. Add this code just below the <head> of your template or index file. After placing this code in the right place it will start working smoothly on your WordPress website.

The codes given above will add  Bootstrap to your website (i.e WordPress or HTML).

METHOD 3 (adding Bootstrap CSS, JS via Functions.php file)

Another way of adding Bootstrap to your WordPress theme is via function.php file of your WordPress theme. Firstly, go to the official Bootstrap website and download the latest Bootstrap library (not the source files or SASS but the Compiled and minified CSS, JavaScript, and fonts. ) from there.

Upload the Bootstrap.min.css file and Bootstrap-theme.min.css file to your theme folder named “CSS” and upload the Bootstrap.js file to the theme folder named “js” of your WordPress theme.

Now all you have to do is just enqueuing the scripts using the WordPress way.  Paste the code given below to your function.php file. (Note: first upload the files then paste the codes otherwise there is a chance of crash)

You can also enqueue these styles and scripts in your WordPress theme’s functions.php file without actually uploading the files and scripts.

Here is the code. Go get it 🙂

This is the best way to include Bootstrap CSS via Functions.php because it doesn’t create issues in above the fold optimization of your WordPress blog.

These are some easy methods to use Bootstrap in WordPress.

You may also like : How to eliminate render-blocking JavaScript in above-the-fold content ?

Bootstrap is an awesome framework and can be used for multipurpose creations. It is easy to use and flexible. Bootstrap is supported by all the browsers like safari, chrome, firefox, IE, etc.

Bootstrap looks amazing on mobiles and tablets too because is a clean and flat designed layout for the better responsiveness and fast loading of web pages.

You may also like,

If you liked this post do share with your friends on Facebook and Twitter because if you share, it’ll not only help us but more like you. See ya’ in next one. Bye.

adding Bootstrap in your WordPress theme

Last updated: September 12, 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.

6 comments

I’ve been surfing online more than three hours today, yet I never found any interesting article
like yours. It’s pretty worth enough for me. Personally, if all website owners
and bloggers made good content as you did, the internet will be much more
useful than ever before. http://www.yahoo.net/

Glad you liked it, Jack.

Hi Prakhar, I really loved this post and you wrote a very good content. I thought it’s a different language and something like that. Thank you.

Very informative bro. Great thing 🙂

Subodh Chandra Halder

It’s really fantastic document and very helpful. Thank you.

Thanks for reading. Glad you find it useful.

Leave a Reply