icon-bar class doesn't display the line in the Button

Question

I have a navbar where there is a hamburger button which comes with the bootstrap which is

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

but when I remove thenavbar-toggler-icon class and apply icon-bar the button is disappers.But in the console it shows that there is a button a very tiny one. I have added the image for reference.

EDIT: https://jsfiddle.net/8m1gyw7t/ this is working fine.

but in that code if I change from navbar-toggler-icon to icon-bar the button is small and tiny

Answer 1

The problem is in bootstrap version, in your fiddle you are using bootstrap v4-alpha and the class icon-bar no more exist in v4.

Now if you want to use bootstrap v3 classes you need to replace your bootstrap v4 files with twitter-bootstrap-v3.

CDN LINK for bootstrap v3

and use following code

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>