Using Wizard in HTML( .Net)

Add following Division in Html page

1234567891011




Account Details
Profile
Confirm
Finish

Add this in Document.ready()

123 $(document).ready(function () {
                $('#rootwizard').bootstrapWizard({ 'tabClass': 'bwizard-steps' });
});

Add the following CSS

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175   .breadcrumb {
            background-color: transparent;
        }

            .breadcrumb > li + li:before {
                /*color: #CCCCCC;*/
                padding: 0px;
                content: "";
            }

            .breadcrumb > li {
                margin-bottom: 0px;
                padding: 0px;
            }

        .bwizard-steps {
            display: inline-block;
            margin: 0;
            padding: 0;
            background: #fff;
        }


            .bwizard-steps .active {
                color: #fff;
                background: #367fa9;
            }

                .bwizard-steps .active:after {
                    border-left-color: #367fa9;
                }

                .bwizard-steps .active a {
                    color: #fff;
                    cursor: default;
                    padding-top: 2px;
                }
                 .bwizard-steps .active .label {
                background-color: #333;
            }

             
            .bwizard-steps .inactive {
                color: #fff;
                background: #00acd6;
            }

                .bwizard-steps .inactive:after {
                    border-left-color: #00acd6;
                }

                .bwizard-steps .inactive a {
                    color: #fff;
                    cursor: default;
                    padding-top: 2px;
                }
                 .bwizard-steps .inactive .label {
                background-color: #333;
            }



            .bwizard-steps .label {
                position: relative;
                top: -1px;
                margin: 0 5px 0 0;
                padding: 1px 5px 2px;
            }

           

            .bwizard-steps li {
                display: inline-block;
                position: relative;
                /*margin-right: 5px;*/
                padding: 12px 17px 5px 30px;
                *display: inline;
                *padding-left: 17px;
                background:#00c0ef;
                line-height: 13px;
                list-style: none;
                zoom: 1;
                margin-bottom: 10px;
             
            }

                .bwizard-steps li:first-child {
                    padding-left: 12px;
                    -moz-border-radius: 4px 0 0 4px;
                    -webkit-border-radius: 4px 0 0 4px;
                    border-radius: 4px 0 0 4px;
                }

                    .bwizard-steps li:first-child:before {
                        border: none;
                    }

                .bwizard-steps li:last-child {
                    margin-right: 0;
                    -moz-border-radius: 0 4px 4px 0;
                    -webkit-border-radius: 0 4px 4px 0;
                    border-radius: 0 4px 4px 0;
                }

                    .bwizard-steps li:last-child:after {
                        border: none;
                    }

                .bwizard-steps li:before {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 0;
                    width: 0;
                    border-bottom: 15px inset transparent;
                    border-left: 15px solid #fff;
                    border-top: 15px inset transparent;
                    content: "";
                }

                .bwizard-steps li:after {
                    position: absolute;
                    right: -15px;
                    top: 0;
                    height: 0;
                    width: 0;
                    border-bottom: 15px inset transparent;
                    border-left: 15px solid #00c0ef;
                    border-top: 15px inset transparent;
                    content: "";
                    z-index: 2;
                }

            .bwizard-steps a {
                color:#fff;
            }

                .bwizard-steps a:hover {
                    text-decoration: none;
                }

            .bwizard-steps.clickable li:not(.active) {
                cursor: pointer;
            }

            .bwizard-steps.clickable li:hover:not(.active) {
                background: #ccc;
            }

                .bwizard-steps.clickable li:hover:not(.active):after {
                    border-left-color: #ccc;
                }

                .bwizard-steps.clickable li:hover:not(.active) a {
                    color: #08c;
                }

        @media (max-width: 10px) {
            /* badges only on small screens */
            .bwizard-steps li:after,
            .bwizard-steps li:before {
                border: none;
            }



            .bwizard-steps li,
            .bwizard-steps li.active,
            .bwizard-steps li:first-child,
            .bwizard-steps li:last-child {
                margin-right: 0;
                padding: 0;
                background-color: transparent;
            }
        }