Table of Contents
Do you want to add bootstrap to your blogger but don’t know how to do it? Then, you are in the right place. Adding bootstrap to your blogger template requires a handful of knowledge on coding.
Moreover, you may end up destroying your template layout while adding bootstrap. Here are a few simple steps to add bootstrap to your blogger.
What is bootstrap?
Bootstrap is a free CSS framework that helps design your website or blog in a more professional way.
If you want to make your template beautiful, you must use bootstrap CSS. The bootstrap is a javascript-based interface that provides beautiful outfits for forms, buttons, navigation bars, cards, and many other blog components.
It is the most popular CSS framework, making your blog or website template more responsive and beautiful.
Adding bootstrap to blogger is not as easy as we see.
Also read
Bootstrap compatibility with blogger templates
Not all blogger templates are compatible with bootstrap. The default blogger templates lose their structure and get destroyed once you add the bootstrap code.
Hence check your template’s compatibility with bootstrap before adding the CSS to your blog.
How do I check the compatibility?
Before adding bootstrap to your blog, add the same code to a demo blog that carries the same template (the one you are using in your blog).
Check for any structural irregularities in the layout of the blog after adding the code.
If there are any, find a way to rectify them by changing the code wherever possible. If you are a non-techie, I would advise you not to mess with the code. Find a template that accepts bootstrap.
How to add the bootstrap code?
The CSS code comes in 2 parts. The first part contains “href links” to the bootstrap CDN, while the second part includes the javascript code required for the bootstrap’s proper functioning.
Adding the Bootstrap CDN to your blogger template
- Open your blogger
- Click on “Themes”
- Click on customize and select the option “Edit HTML.”
- Now you enter an HTML editor containing your blog’s HTML code.
- Press “CTRL + F”
- A search box will appear above the HTML editor.
- In the search box, type <head> and find the head tag of the HTML.
- Add the below bootstrap CDN to the HTML just after the head tag (shown in the picture).
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>Hurray! Now you finished adding bootstrap CDN to your blog.
Adding the bootstrap javascript to your blogger
It is ideal for adding JavaScript to your blogger at the end of your blog code. In simple words, add the JavaScript before the closing tag of the body.
Hence here are few steps to add the javascript.
- In the search box, type “</body> and search for the closing body tag.
- Add the JavaScript code (shown below) just before the closing body tag.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Now you have completed adding bootstrap to your blogger.
The next step is to check for any compatibility issues.
Common errors while adding bootstrap code to blogger
You may encounter some errors while adding bootstrap to your blogger. Here are a few common mistakes and their solutions.
Error while adding bootstrap CDN
While adding the bootstrap CDN, the blogger might not accept the default code as it is not XML compatible.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">The default bootstrap CDN code is shown above contains the bootstrap CSS. But this default code is not XML compatible. Hence, we should modify this code just by adding “/” at the closing tag. Here is the final modified CDN code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>Place of adding bootstrap CDN
Always try to add the bootstrap CDN just after the starting head tag (<head>). Never add the bootstrap CDN code in the body or at the ending head or body tag as the CSS may defer with the custom CSS of your blog, which may raise compatibility issues.
Place of adding bootstrap javascript
Always try to add a javascript at the end of the code. The ideal position is to add just before the closing body tag.
You may even try adding the javascript with the help of your HTML widget of the blogger.
java script conflict
The bootstrap javascript comes with jQuery and popper.js along with its native JavaScript (bootstrap.bundle.min.js) function. But some blogger templates come with jQuery by default.
In such conditions adding the complete JavaScript code might cause JavaScript conflict issues. Such a problem can be rectified by adding only the bootstrap JavaScript.
In simple words, only add the below code instead of the entire javascript code.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>Irregular layout after adding bootstrap
Few blogger templates are not compatible with bootstrap. The problem comes with the “classes” in the code. In simple words, different CSS are framed for the same class.
For example, the container class will have a set of CSS codes for the blogger template. On the other hand, the bootstrap has a different CSS code for the same container class.
This can give rise to container class conflict distorting the default layout of your blog. In such cases, if different CSS is coded for the same classes or IDs, then try to change the name of the class or ID in your blogger code.
Let me explain with an example, the bootstrap and the blogger may quote different CSS for the same ID “Navbar” in such cases, we cannot change the CSS of the navbar either in the blog or in the bootstrap.
A simple solution is to change your blog’s ID to “Navbar1” instead of “Navbar.”
But finding the conflict code is a hectic and challenging task. It is always better for a non-techie guy to find a different blogger template that is bootstrap compatible.
I hope this article will answer most of your questions on bootstrap for bloggers. If you still face problems with bootstrap, try to comment below. We will try to provide a better solution to your problem.
Thanks