How do I use Bootstrap in Blogger Templates? Today we learn the complete process of making Blogger Templates. Yes, you can make blogger templates using Bootstrap. This template was fully responsive on mobile and desktop devices.
Blogger Templates has no complete access to edit the whole template. But some of the components you can edit and customize completely. If you don't have coding knowledge and try to make blogger templates then this guide helps you a lot.
What is Bootstrap?
We need to add only HTML(HyperText Markup Language) code in the text editor the CSS and JS automatically handle by Bootstrap through CDN(Content Delivery Network) link.
How do I use Bootstrap in Blogger Templates?
It is easy to use Bootstrap in Blogger. If you go to the Bootstrap dashboard you can find the CSS and JS code. You need to copy and paste both codes below Head in Blogger Template. Before your action, you need to Backup your XML file.
How to Change Header of Blogger Templates
After Paste CSS and JS code in Blogger, you need to select components that you can change in the template. This is an important step so you need to understand the concept.
There is already a Header in Blogger Templates. So you need to remove this header by Click on Inspect.
What is Inspect in Browser?
Inspect is mainly made for Web Development. This is the function that helps you to change the HTML and CSS of any website. But it does not affect any components of the websites.
Let's back in the story, Ok, you need to first inspect the header layout in a blogger. There you get a Class of the whole Header. Just remove it by going to Edit HTML in Blogger Template. And search the Class of Header.
Change Header in Blogger Using Bootstrap
First Inspect the header menu by Right-click on Header.
Get <!---Header Wrapper---!> Option on HTML View.
Below this option, you get the whole Class of This Header.
Click On Three Dots and Click Edit HTML.
Copy the Class Or ID of this Header( Eg: < div class =
Now go to Edit HTML and Click on HTML and Type (Ctrl + F) For search
After Finding the Whole HTML code remove all this code.
Go to Bootstrap and Click on Document.
Click on Components
Find Navbar and copy all HTML code
Paste this code where you remove the HTML code in Template
Now click on save and see the Header has been changed
How to make a slideshow in blogger using Bootstrap
Making a slideshow in blogger is easy like changing the header. Bootstrap provides slideshow HTML code. This slideshow is responsive on mobile and other devices.
Above the example shown, you can also use Slideshow in Blogger Post. Not the only Slideshow you can also use buttons, Alerts, Badge, and so more.
Slideshow in Blogger
Go to Bootstrap.
Click On Docs.
Click on Components.
Click on Carousel.
Copy HTML of any Carousel.
And go to Edit HTML and Search For header-wrapper.
Below the end of the header paste this code and add the image
How to Use Bootstrap in Blogger Post
Sometimes you need to use the button, card, list group, alerts, in a post. But you can't do this simply. You need to open photoshop and make buttons, and so more. But it doesn't look attractive.
But we use Bootstrap for this we can easily add buttons, cards, list groups, slide shows, and so more.
Easy way to add alerts on a post