locked
Bootstrap step wizard CSS RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I am trying to upgrade from Bootstrap 3 to bootstrap 4 and some of my style messed up. Here is bootstrap 3 and the wizard steps looks correct

    https://codepen.io/aklima/pen/yXQLLb

    But when I update the bootstrap css to 4.4.1, the style doesn't work correctly anymore and I could not figure why.

    https://codepen.io/asplearning/pen/XWmVVbE

    Any suggestion how I could fix this?

    Thanks. 

    Tuesday, May 5, 2020 11:15 AM

Answers

  • User1535942433 posted

    Hi asplearning,

    Accroding to your description and codes,as far as I think,if you only want to fix the error of wizard steps,you could change the css.Besides,another way is that you could try to migrate to bootstrap 4.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <style>
            .design-process-section .text-align-center {
                line-height: 25px;
                margin-bottom: 12px;
            }
    
            .design-process-content {
                border: 1px solid #e9e9e9;
                ;
                padding: 16px 34% 30px 30px;
            }
    
                .design-process-content img {
                    ;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 0;
                    max-height: 100%;
                }
    
                .design-process-content h3 {
                    margin-bottom: 16px;
                }
    
                .design-process-content p {
                    line-height: 26px;
                    margin-bottom: 12px;
                }
    
            .process-model {
                list-style: none;
                padding: 0;
                ;
                max-width: 600px;
                margin: 20px auto 26px;
                border: none;
                z-index: 0;
            }
    
                .process-model li::after {
                    background: #e5e5e5 none repeat scroll 0 0;
                    bottom: 0;
                    content: "";
                    display: block;
                    height: 4px;
                    margin: 0 auto;
                    ;
                    right: 30px;
                    top: 33px;
                    width: 85%;
                    z-index: -1;
                }
    
                .process-model li.visited::after {
                    background: #57b87b;
                }
    
                .process-model li:last-child::after {
                    width: 0;
                }
    
                .process-model li {
                    display: inline-block;
                    width: 18%;
                    text-align: center;
                    float: none;
                }
    
                    .nav-tabs.process-model > li.active > a, .nav-tabs.process-model > li.active > a:hover, .nav-tabs.process-model > li.active > a:focus, .process-model li a:hover, .process-model li a:focus {
                        border: none;
                        background: transparent;
                    }
    
                    .process-model li a {
                        padding: 0;
                        border: none;
                        color: #606060;
                    }
    
                    .process-model li.active,
                    .process-model li.visited {
                        color: #57b87b;
                    }
    
                        .process-model li.active a,
                        .process-model li.active a:hover,
                        .process-model li.active a:focus,
                        .process-model li.visited a,
                        .process-model li.visited a:hover,
                        .process-model li.visited a:focus {
                            color: #57b87b;
                        }
    
                        .process-model li.active p,
                        .process-model li.visited p {
                            font-weight: 600;
                        }
    
                    .process-model li i {
                        display: block;
                        height: 68px;
                        width: 68px;
                        text-align: center;
                        margin: 0 auto;
                        background: #f5f6f7;
                        border: 2px solid #e5e5e5;
                        line-height: 65px;
                        font-size: 30px;
                        border-radius: 50%;
                    }
    
                    .process-model li.active i, .process-model li.visited i {
                        background: #fff;
                        border-color: #57b87b;
                    }
    
                    .process-model li p {
                        font-size: 14px;
                        margin-top: 11px;
                    }
    
                .process-model.contact-us-tab li.visited a, .process-model.contact-us-tab li.visited p {
                    color: #606060 !important;
                    font-weight: normal
                }
    
                .process-model.contact-us-tab li::after {
                    display: none;
                }
    
                .process-model.contact-us-tab li.visited i {
                    border-color: #e5e5e5;
                }
    
    
            ul li {
                margin-left:12px;
            }
            @media screen and (max-width: 560px) {
                .more-icon-preocess.process-model li span {
                    font-size: 23px;
                    height: 50px;
                    line-height: 46px;
                    width: 50px;
                }
    
                .more-icon-preocess.process-model li::after {
                    top: 24px;
                }
            }
    
            @media screen and (max-width: 380px) {
                .process-model.more-icon-preocess li {
                    width: 16%;
                }
    
                .more-icon-preocess.process-model li span {
                    font-size: 16px;
                    height: 35px;
                    line-height: 32px;
                    width: 35px;
                }
    
                .more-icon-preocess.process-model li p {
                    font-size: 8px;
                }
    
                .more-icon-preocess.process-model li::after {
                    top: 18px;
                }
    
                .process-model.more-icon-preocess {
                    text-align: center;
                }
            }
        </style>
        <script>
            $(function () {
                // script for tab steps
                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    
                    var href = $(e.target).attr('href');
                    var $curr = $(".process-model  a[href='" + href + "']").parent();
    
                    $('.process-model li').removeClass();
    
                    $curr.addClass("active");
                    $curr.prevAll().addClass("visited");
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <section class="design-process-section" id="process-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12">
                                <!-- design process steps-->
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs justify-content-center process-model more-icon-preocess" role="tablist">
                                    <li role="presentation" class="active"><a href="#discover" aria-controls="discover" role="tab" data-toggle="tab"><i class="fa fa-search" aria-hidden="true"></i>
                                        <p>Discover</p>
                                    </a></li>
                                    <li role="presentation"><a href="#strategy" aria-controls="strategy" role="tab" data-toggle="tab"><i class="fa fa-send-o" aria-hidden="true"></i>
                                        <p>Strategy</p>
                                    </a></li>
                                    <li role="presentation"><a href="#optimization" aria-controls="optimization" role="tab" data-toggle="tab"><i class="fa fa-qrcode" aria-hidden="true"></i>
                                        <p>Optimization</p>
                                    </a></li>
                                    <li role="presentation"><a href="#content" aria-controls="content" role="tab" data-toggle="tab"><i class="fa fa-newspaper-o" aria-hidden="true"></i>
                                        <p>Content</p>
                                    </a></li>
                                    <li role="presentation"><a href="#reporting" aria-controls="reporting" role="tab" data-toggle="tab"><i class="fa fa-clipboard" aria-hidden="true"></i>
                                        <p>Reporting</p>
                                    </a></li>
                                </ul>
                                <!-- end design process steps-->
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="discover">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Discovery</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="strategy">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Strategy</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="optimization">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Optimization</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="content">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Content</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="reporting">
                                        <div class="design-process-content">
                                            <h3>Reporting</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat. </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
    
            </div>
        </form>
    </body>

    Result:

    More details,you could refer to below article:

    Migration to bootstrap 4:

    https://ingresso.github.io/ingresso-bootstrap/migration/

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 6, 2020 2:18 AM

All replies

  • User475983607 posted

    Any suggestion how I could fix this?

    I would create a new project using the Bootstrap 4 temples and create a simple demo step wizard with all the features you used in the Bootstrap 3 version..  Then compare the demo code with the old code to figure out where you made a mistake while upgrading the code.  

    Keep in mind you cannot just upgrade from Bootstrap 3 to Bootstrap 4 without making changes to the HTML.  See the Bootstrap migration documentation. 

    Tuesday, May 5, 2020 11:37 AM
  • User1535942433 posted

    Hi asplearning,

    Accroding to your description and codes,as far as I think,if you only want to fix the error of wizard steps,you could change the css.Besides,another way is that you could try to migrate to bootstrap 4.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <style>
            .design-process-section .text-align-center {
                line-height: 25px;
                margin-bottom: 12px;
            }
    
            .design-process-content {
                border: 1px solid #e9e9e9;
                ;
                padding: 16px 34% 30px 30px;
            }
    
                .design-process-content img {
                    ;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 0;
                    max-height: 100%;
                }
    
                .design-process-content h3 {
                    margin-bottom: 16px;
                }
    
                .design-process-content p {
                    line-height: 26px;
                    margin-bottom: 12px;
                }
    
            .process-model {
                list-style: none;
                padding: 0;
                ;
                max-width: 600px;
                margin: 20px auto 26px;
                border: none;
                z-index: 0;
            }
    
                .process-model li::after {
                    background: #e5e5e5 none repeat scroll 0 0;
                    bottom: 0;
                    content: "";
                    display: block;
                    height: 4px;
                    margin: 0 auto;
                    ;
                    right: 30px;
                    top: 33px;
                    width: 85%;
                    z-index: -1;
                }
    
                .process-model li.visited::after {
                    background: #57b87b;
                }
    
                .process-model li:last-child::after {
                    width: 0;
                }
    
                .process-model li {
                    display: inline-block;
                    width: 18%;
                    text-align: center;
                    float: none;
                }
    
                    .nav-tabs.process-model > li.active > a, .nav-tabs.process-model > li.active > a:hover, .nav-tabs.process-model > li.active > a:focus, .process-model li a:hover, .process-model li a:focus {
                        border: none;
                        background: transparent;
                    }
    
                    .process-model li a {
                        padding: 0;
                        border: none;
                        color: #606060;
                    }
    
                    .process-model li.active,
                    .process-model li.visited {
                        color: #57b87b;
                    }
    
                        .process-model li.active a,
                        .process-model li.active a:hover,
                        .process-model li.active a:focus,
                        .process-model li.visited a,
                        .process-model li.visited a:hover,
                        .process-model li.visited a:focus {
                            color: #57b87b;
                        }
    
                        .process-model li.active p,
                        .process-model li.visited p {
                            font-weight: 600;
                        }
    
                    .process-model li i {
                        display: block;
                        height: 68px;
                        width: 68px;
                        text-align: center;
                        margin: 0 auto;
                        background: #f5f6f7;
                        border: 2px solid #e5e5e5;
                        line-height: 65px;
                        font-size: 30px;
                        border-radius: 50%;
                    }
    
                    .process-model li.active i, .process-model li.visited i {
                        background: #fff;
                        border-color: #57b87b;
                    }
    
                    .process-model li p {
                        font-size: 14px;
                        margin-top: 11px;
                    }
    
                .process-model.contact-us-tab li.visited a, .process-model.contact-us-tab li.visited p {
                    color: #606060 !important;
                    font-weight: normal
                }
    
                .process-model.contact-us-tab li::after {
                    display: none;
                }
    
                .process-model.contact-us-tab li.visited i {
                    border-color: #e5e5e5;
                }
    
    
            ul li {
                margin-left:12px;
            }
            @media screen and (max-width: 560px) {
                .more-icon-preocess.process-model li span {
                    font-size: 23px;
                    height: 50px;
                    line-height: 46px;
                    width: 50px;
                }
    
                .more-icon-preocess.process-model li::after {
                    top: 24px;
                }
            }
    
            @media screen and (max-width: 380px) {
                .process-model.more-icon-preocess li {
                    width: 16%;
                }
    
                .more-icon-preocess.process-model li span {
                    font-size: 16px;
                    height: 35px;
                    line-height: 32px;
                    width: 35px;
                }
    
                .more-icon-preocess.process-model li p {
                    font-size: 8px;
                }
    
                .more-icon-preocess.process-model li::after {
                    top: 18px;
                }
    
                .process-model.more-icon-preocess {
                    text-align: center;
                }
            }
        </style>
        <script>
            $(function () {
                // script for tab steps
                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    
                    var href = $(e.target).attr('href');
                    var $curr = $(".process-model  a[href='" + href + "']").parent();
    
                    $('.process-model li').removeClass();
    
                    $curr.addClass("active");
                    $curr.prevAll().addClass("visited");
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <section class="design-process-section" id="process-tab">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12">
                                <!-- design process steps-->
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs justify-content-center process-model more-icon-preocess" role="tablist">
                                    <li role="presentation" class="active"><a href="#discover" aria-controls="discover" role="tab" data-toggle="tab"><i class="fa fa-search" aria-hidden="true"></i>
                                        <p>Discover</p>
                                    </a></li>
                                    <li role="presentation"><a href="#strategy" aria-controls="strategy" role="tab" data-toggle="tab"><i class="fa fa-send-o" aria-hidden="true"></i>
                                        <p>Strategy</p>
                                    </a></li>
                                    <li role="presentation"><a href="#optimization" aria-controls="optimization" role="tab" data-toggle="tab"><i class="fa fa-qrcode" aria-hidden="true"></i>
                                        <p>Optimization</p>
                                    </a></li>
                                    <li role="presentation"><a href="#content" aria-controls="content" role="tab" data-toggle="tab"><i class="fa fa-newspaper-o" aria-hidden="true"></i>
                                        <p>Content</p>
                                    </a></li>
                                    <li role="presentation"><a href="#reporting" aria-controls="reporting" role="tab" data-toggle="tab"><i class="fa fa-clipboard" aria-hidden="true"></i>
                                        <p>Reporting</p>
                                    </a></li>
                                </ul>
                                <!-- end design process steps-->
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="discover">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Discovery</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="strategy">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Strategy</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="optimization">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Optimization</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="content">
                                        <div class="design-process-content">
                                            <h3 class="semi-bold">Content</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat</p>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="reporting">
                                        <div class="design-process-content">
                                            <h3>Reporting</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat. </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
    
            </div>
        </form>
    </body>

    Result:

    More details,you could refer to below article:

    Migration to bootstrap 4:

    https://ingresso.github.io/ingresso-bootstrap/migration/

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 6, 2020 2:18 AM