How do I use Bootstrap in Blogger Templates?

 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.



Bootstrap

What is Bootstrap?

Bootstrap is the ready-made code that helps you make a responsive website. Their you get starter template code from Bootstrap. You need to copy and paste CSS(Cascading Style Sheet) and JS(JavaScript) below the head. 

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 = "Header-Wrapper">
  • Now go to Edit HTML and Click on HTML and Type (Ctrl + F) For search the Class. 
  • 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 URL.


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.


     
   

This is so cool you know, I used this in a post. You can also use this in a post and make a valuable post. The step you need to follow.

  • Copy any Components
  • Go to any post
  • Click On HTML view in a post
  • You need to paste CSS and JS on a Blogger Template
  • Paste the code end of any tag and edit it


Sandesh Tandan

My name is Sandesh tandan from Nepal. I start blogging in 2019 years. I have a knowledge about Blogging, Programming, Online earning, Photoshop, Illustrator

Post a comment

Previous Post Next Post