Introduction

In this section, we are going to show you how to change bootstrap default toggle button with the icon. Is that possible to change bootstrap toggle button? the answer is yes. you can change it with an icon like right align icon or home icon or anything. what did you want to do? don’t worry in this tutorial we will show you how to change it and also style with your own color.

Most of the time it is very difficult to create your own custom icon. So the way to create it just changes toggle button with different icons. we did not create an icon in this tutorial but we just change toggle button with our icons. look out this image.

how to change bootstrap default toggle button

In the above image, you will see we have changed toggle button. we have changed this toggle with font awesome icon. if you are not comfortable with this website you can choose the different one. In this tutorial, we added some links and drop-down button. we also added input textbox and search button in the navigation menu.

If you are not familiar with the icon you can just use bootstrap toggle button glyphicon also. If you want to know how to add glyphicon in the toggle button then we will create another article for that especially. Now let’s jump into the code and create this beautiful tutorial.

In the demo, we created a simple toggle.html file. we added bootstrap CSS files and js files. In the Js files, we have added jquery files. you do not want to add anything because we are using CDN of all these files.

Step 1:-

The first step is to add bootstrap.css and font awesome CDN in the head of your HTML file. you can just copy all this code into your HTML file.

In the above code, we have added metadata which is very important for responsive web pages. so make sure do not remove it from the head. Then we have added the bootstrap minified CSS compiled file. After this, we have added font awesome js file. Then add the title of your web page. You can just copy all this code and paste in the head tag.

Step 2:-

Following is demonstrate body part of our tutorial. In this body, we have added navigation menu. Navigation menu contains website brand name, toggle button and navigation menu. we have also created a drop-down menu.

This toggle button contains navbar-brand  class which is for your company, product, or project name. we have also used navbar-nav for full height and lightweight navigation.Just like that, we added some more classes which you can learn from the bootstrap website.

Import this code in  <body>  Tag.

This code will create responsive navigation menu on the top of the page. You will see the toggle button we have use span tag to style button. In the span tag, we had used I tag which is change default bootstrap navigation icon. At the last, for demo text, we have added h2 heading tag with text center and padding 5 bootstrap classes.

Step 3:-

Add Jquery and bootstrap.js file at the bottom of the body section. make sure you jquery file is before bootstrap file. if you place it in just after the bootstrap.js file then navigation menu will not work. copy this code and paste just before the closing body tag.

In the above code jquery is added first and then the bootstrap.js file is added just after jquery file. if you want to know what happened if you change file position. Then must change it and see what happened. The experiment with the code will always help you to improve your programming skills.

If you follow all the step properly then your toggle.html file or your HTML file must look like this.

So now Everything is ready to execute. Run your project and just restore down your window. You will see which you are expecting about. Navigation toggle button will change to align right icon of font awesome. you can create awesome icon instead of using the bootstrap default icon. You can change it with your own one and create a beautiful looking website. To make your website unique you really need to create something different. So this idea will definitely help you create your own bootstrap toggle button.

That’s all for today.

See you in the next lesson with a new tutorial. If you find something useful in this tutorial then must comment us in the comment section. follow us on Facebook, Instagram, and youtube for more information.

 

Leave a Reply

Your email address will not be published. Required fields are marked *