I created website with common head in all pages by <head> <!--#include file="header.shtml"--> </head> but suddenly bootstrap stopped working in them

Viewed 17

I have made a website with common header called in all pages for that but bootstrap suddenly stopped working in it what to do now?

below is the code for that it was working fine but suddenly stopped yesterday

I tried various solution like removing header.shtml and call bootstrap in HTML file directly changing versions

called it at different locations such as before other CSS which I usually do but as it was not working I called it after last CSS file but still issue remained same.

I tried to add different versions of bootstrap but still it was not solved.

<meta http-equiv="content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<title>SREE SHANTHI ANAND VIDYALAYA</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" >
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/shortcodes.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/shortcodes.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/layerslider.css" type="text/css">

<!--prettyPhoto-->
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" media="all" /> 

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bubblegum+Sans' rel='stylesheet' type='text/css'>'
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" >

<!--jquery-->
<script src="js/modernizr-2.6.2.min.js"></script>
<script type='text/javascript'>
var mytheme_urls = {
    theme_base_url:'https://kidslifedev.wpengine.com/wp-content/themes/kidslife/'
    ,framework_base_url:'https://kidslifedev.wpengine.com/wp-content/themes/kidslife/framework/'
    ,ajaxurl:'https://kidslifedev.wpengine.com/wp-admin/admin-ajax.php'
    ,url:'https://kidslifedev.wpengine.com'
    ,scroll:'disable'
    ,stickynav:'enable'
    ,is_admin:''
    ,skin:'turquoise'
    ,layout:'wide'
    ,isResponsive:'enable'
    ,layout_pattern:''
    };
</script>

<script type="application/ld+json" class="aioseo-schema">
{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/kidslifedev.wpengine.com\/#website","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids Life","description":"Just another WordPress site","publisher":{"@id":"https:\/\/kidslifedev.wpengine.com\/#organization"}},{"@type":"Organization","@id":"https:\/\/kidslifedev.wpengine.com\/#organization","name":"Kids Life","url":"https:\/\/kidslifedev.wpengine.com\/"},{"@type":"BreadcrumbList","@id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/kidslifedev.wpengine.com\/#listItem","position":"1","item":{"@id":"https:\/\/kidslifedev.wpengine.com\/#item","name":"Home","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","url":"https:\/\/kidslifedev.wpengine.com\/"}}]},{"@type":"WebPage","@id":"https:\/\/kidslifedev.wpengine.com\/#webpage","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids life children theme for kindergarten","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/kidslifedev.wpengine.com\/#website"},"breadcrumb":{"@id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist"},"datePublished":"2014-12-11T06:20:23+00:00","dateModified":"2020-03-19T10:54:25+00:00"}]
</script>

<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/kidslifedev.wpengine.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.9.3"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
</script>

<style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

</style>

<script type="application/ld+json" class="aioseo-schema">
{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/kidslifedev.wpengine.com\/#website","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids Life","description":"Just another WordPress site","publisher":{"@id":"https:\/\/kidslifedev.wpengine.com\/#organization"}},{"@type":"Organization","@id":"https:\/\/kidslifedev.wpengine.com\/#organization","name":"Kids Life","url":"https:\/\/kidslifedev.wpengine.com\/"},{"@type":"BreadcrumbList","@id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/kidslifedev.wpengine.com\/#listItem","position":"1","item":{"@id":"https:\/\/kidslifedev.wpengine.com\/#item","name":"Home","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","url":"https:\/\/kidslifedev.wpengine.com\/"}}]},{"@type":"WebPage","@id":"https:\/\/kidslifedev.wpengine.com\/#webpage","url":"https:\/\/kidslifedev.wpengine.com\/","name":"Kids life children theme for kindergarten","description":"Kids life children theme for kindergarten is a bundle of joy for running your cr\u00e8che, nursery school, primary school and other children shelters and hostels.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/kidslifedev.wpengine.com\/#website"},"breadcrumb":{"@id":"https:\/\/kidslifedev.wpengine.com\/#breadcrumblist"},"datePublished":"2014-12-11T06:20:23+00:00","dateModified":"2020-03-19T10:54:25+00:00"}]}
</script>
<script type="text/javascript">
    window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/kidslifedev.wpengine.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.9.3"}};
    /*! This file is auto-generated */
    !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
    img.wp-smiley,
    img.emoji {
        display: inline !important;
        border: none !important;
        box-shadow: none !important;
        height: 1em !important;
        width: 1em !important;
        margin: 0 0.07em !important;
        vertical-align: -0.1em !important;
        background: none !important;
        padding: 0 !important;
    }
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" >

<script type='text/javascript' src='https://kidslifedev.wpengine.com/wp-content/plugins/enable-jquery-migrate-helper/js/jquery/jquery-1.12.4-wp.js?ver=1.12.4-wp' id='jquery-core-js'></script>
<script type='text/javascript' src='https://kidslifedev.wpengine.com/wp-content/plugins/enable-jquery-migrate-helper/js/jquery-migrate/jquery-migrate-1.4.1-wp.js?ver=1.4.1-wp' id='jquery-migrate-js'></script>
<script type='text/javascript' id='layerslider-greensock-js-extra'>
/* <![CDATA[ */
var LS_Meta = {"v":"6.7.0"};
/* ]]> */
</script>

<script>
const chmessage = document.getElementsByClassName("ch-message");
chmessage.style.display = "none";
</script>
    <header>
        <div class="container">
            <div class="logo">
                <a href="index.html" title="Kids Life"><img src="images/logo.png" alt="Kids Life" title="Kids Life"></a>
                <br><br>
            </div>
            <div class="contact-details">
                <p class="mail">
                    <a href="mailto:sreesav1611@gmail.com">sreesav1611@gmail.com</a>
                    <span class="fa fa-envelope"></span>
                </p>
                <p class="phone-no">
                    <i>+91 98401 04939</i>
                    <span class="fa fa-phone"></span>
                </p>        
            </div>
        </div>
        
        <!--menu-container starts-->
        <div id="menu-container">
            <div class="container">
                <!--nav starts-->
                <nav id="main-menu">
                    <div class="dt-menu-toggle" id="dt-menu-toggle">Menu<span class="dt-menu-toggle-icon"></span></div>
                    <ul id="menu-main-menu" class="menu">
                        <li class="menu-item-simple-parent menu-item-depth-0 red"> <a href="index.html"> Home </a> 
                            <ul class="sub-menu">
                                <li> <a href="Terms & Conditions.html">Terms & Conditions </a> </li>
                                <li> <a href="Calendar.html">Calender </a>  </li>
                                <li> <a href="News&Events.html">News & Events </a> </li>
                                <li> <a href="Technology.html">Technology </a> </li>                                  
                            </ul>  
                            <a class="dt-menu-expand">+</a>                      
                        </li>

                        <li class="menu-item-simple-parent menu-item-depth-0 red"> <a href="about.html"> About Us </a>
                            <ul class="sub-menu">
                                <li><a href="vision&mission.html">Vision &mission</a></li>
                                <li><a href="Objectives.html">Objectives</a></li>
                                <li><a href="Strategicplanning.html">Strategic Planning</a></li>
                                <li><a href="key-value.html">Key Value</a></li>
                            </ul>
                            <a class="dt-menu-expand">+</a>  
                        </li>
                       
                        <li class="menu-item-simple-parent menu-item-depth-0 red"> <a href="our-staffs.html"> Our Staffs </a> </li>
                        <li class="menu-item-simple-parent menu-item-depth-0 red"> <a href="Academics.html"> Academics </a> 
                            <ul class="sub-menu">
                                <li> <a href="kindergarten.html"> Kinder Garten </a> </li>
                                <li> <a href="primarycurriculum.html"> Primary Curriculum </a>  </li>
                                <li> <a href="secondarycuriculum.html"> Secondary Curriculum </a> </li>
                                <li> <a href="highersecondary.html"> Higher Secondary </a> </li>
                                <li> <a href="Co-Scholastic.html"> Co-Scholastic</a></li>
                            </ul>
                            <a class="dt-menu-expand">+</a>                        
                        </li>
                        <li class="menu-item-simple-parent menu-item-depth-0 blue"><a href="services.php" title="">ADMISSION</a>
                            <ul class="sub-menu">
                                <li><a href="services.php">Admission Process</a></li>
                                <li><a href="services.php">Online Application</a></li>
                                <li><a href="contact.html">Send Enquiry</a></li>
                            </ul>
                            <a class="dt-menu-expand">+</a>  
                        </li>
                        <li class="menu-item-simple-parent menu-item-depth-0 blue"><a href="portfolio-four-column.html" title="">Encyclopedia</a>
                            <ul class="sub-menu">
                                <li><a href="Rules&Regulation.html">Rules & Regulation</a></li>
                                <li><a href="portfolio-three-column.html">School Timing</a></li>
                                <li><a href="portfolio-three-column.html">Transport</a></li>
                                <li><a href="EXAM-SCHEDULE.html">Exam Schedule & System</a></li>
                            </ul>
                            <a class="dt-menu-expand">+</a>  
                        </li>
                        <li class="menu-item-simple-parent menu-item-depth-0 red"> <a href="infrastructure.html"> INFRASTRUCTURE </a> 
                            <ul class="sub-menu">
                                <li> <a href="Classrooms.html"> Classrooms </a> </li>
                                <li> <a href="Laboratories.html"> Laboratories </a>
                                    <ul class="sub-menu">
                                        <li> <a href="Computer-Lab.html"> Computer Lab </a> </li>
                                        <li> <a href="Math-Lab.html"> Math Lab </a> </li>
                                        <li> <a href="Chemistry-Lab.html"> Chemistry Lab </a>  </li>
                                        <li> <a href="Physics-Lab.html"> Physics Lab </a>  </li>
                                        <li> <a href="Biology-Lab.html"> Biology Lab </a>  </li>
                                    </ul>   
                                    <a class="dt-menu-expand">+</a>                             
                                </li>
                            </ul>  
                            <a class="dt-menu-expand">+</a>                      
                        </li>  
                        <li class="menu-item-simple-parent menu-item-depth-0 lavender"><a href="gallery.php" title="">Gallery</a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="gallery.html">Academic year 22-23</a>
                                </li>
                            </ul>
                            <a class="dt-menu-expand">+</a>
                        </li>
                        <li class="pink"><a href="contact.html" title="">Contact us</a></li>
                    </ul>
                </nav>
                <!--nav ends-->

                <ul class="dt-sc-social-icons">
                    <li><a href="#" title="Facebook" class="dt-sc-tooltip-top facebook"><span class="fa fa-facebook"></span></a></li>
                    <li><a href="#" title="Youtube" class="dt-sc-tooltip-top youtube"><span class="fa fa-youtube"></span></a></li>
                    <li><a href="#" title="Twitter" class="dt-sc-tooltip-top twitter"><span class="fa fa-twitter"></span></a></li>
                    <li><a href="#" title="Google Plus" class="dt-sc-tooltip-top gplus"><span class="fa fa-google-plus"></span></a></li>
                </ul>
            </div>
        </div>
        <!--menu-container ends-->
        <br><br><br><br><br><br>
        
        
        
    </header>
1 Answers

From a debugging perspective I'd start by looking at the network tab and verifying if the bootstrap files were being loaded.

if they aren't, well, there's a place to start.

If they are, I'd go into the page elements and inspect them to see if the boot strap styles were being assigned to the components and that they are consistent. You are including a lot of stuff in your header and there are a lot of things that might be conflicting with bootstrap. Try getting rid of all the other stuff and see if including just bootstrap works. if you get there, then add the other stuff back in and see where it breaks.

Related