How to stop some bootstrap classes from activating globally?-Twitter bootstrap

moniker
August 5, 2020
145 views
0 votes
2 Answers

The following HTML and CSS code is working fine on my local computer, but when I run it on a server, the appearance changes.

You could check it on there: http://examhotwire.com/.

Some bootstrap class has been actived. How can I get the same result from both local and server?

body {
  padding-top: 50px;
}

.container {
  width: 100%;
}

.col-md-3 {
  width: 20%;
  margin-left: 0;
}

.col-md-9 {
  width: 58%;
}

#masthead {
  min-height: 250px;
}

#masthead h1 {
  font-size: 30px;
  line-height: 1;
  padding-top: 20px;
}

#masthead .well {
  margin-top: 8%;
}

.breadcrumb>li+li::before {
  content: ">0a0";
}

.back-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

.mytable {
  display: inline-block;
  width: 100%;
  overflow: auto;
  height: auto;
  overflow: scroll;
  border: 0px solid;
}

table tr {
  /*display: block;*/
  border-top: 1px solid #777;
}

th td {
  width: auto;
}

#collapse_menu {
  visibility: hidden;
  height: 2%;
  display: none;
}

.back-to-top:hover {
  background-color: #ca8df6;
}

.back-to-top:hover::before {
  background-color: #ca8df6;
}

.back-to-top:hover::after {
  background-color: #ca8df6;
}

@media screen and (max-width: 600px) {
  #leftCol {
    visibility: hidden;
    height: 2%;
    display: none;
  }
  #sec0 {
    font-size: 25px;
  }
  #collapse_menu {
    visibility: visible;
    display: table-caption;
    margin-top: 25%;
    position: sticky;
  }
  .navbar {
    padding: 0px !important;
  }
  .col-md-9 {
    width: 100%;
  }
  #leftCol1 {
    width: 100%;
  }
}

#sidebar1 {
  text-align: left;
}

@media screen and (min-width: 768px) {
  #masthead h1 {
    font-size: 50px;
  }
}

.navbar-bright {
  background-color: #111155;
  color: #fff;
}

.affix-top,
.affix {
  position: static;
}

@media (min-width: 979px) {
  #sidebar.affix-top {
    position: static;
    margin-top: 30px;
    width: 228px;
  }
  #sidebar.affix {
    position: fixed;
    top: 70px;
    width: 228px;
  }
}

#sidebar li.active {
  border: 0 #eee solid;
  border-right-width: 5px;
}

.navbar {
  margin-bottom: 0;
  border-radius: 0;
  position: static;
  padding: 15px;
  background-color: #ffffff;
  min-height: 60px;
  text-decoration: none;
}

.navbar-fixed-top {
  position: fixed !important;
}

body {
  margin-top: 20px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109357260-3"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-109357260-3');
  </script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta name="description" content="Average height of a rose plant varies from 8 inches to as tall as 50 feet depending on the variety.">
  <link rel="icon" sizes="92*200" href="brand.jpg">

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a href="index.html"> <img src="logo.jpg" class="navbar-brand" id="brand-image" style="height: 50px; width: 130px; padding: 0px;"></a>

      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="home.html">Home</a></li>

          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Exams<b class="caret"></b></a>
            <ul class="dropdown-menu multi-level">
              <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">SSC</a>
                <ul class="dropdown-menu">
                  <li><a href="#">SSC CGL</a></li>
                  <li><a href="#">SSC CHSL</a></li>
                  <li><a href="#">SSC MTS</a></li>
                  <li><a href="#">SSC JE</a></li>
                  <li><a href="#">SSC Sub Inspecto</a></li>
                  <li><a href="#">SSC Stenographer</a></li>
                  <li><a href="#">SSC GD Constable</a></li>
                  <li><a href="#">SSC JHT</a></li>
                  <li><a href="#">SSC Selection Post</a></li>


              </li>
              </ul>
          </li>
          <li><a href="#">Railway</a></li>
          <li><a href="#">UPSC</a></li>
          <li><a href="#">DRDO</a></li>
          <li><a href="#">LIC</a></li>
          <li><a href="#">RBI</a></li>
          <li><a href="#">IBPS</a></li>
          <li><a href="#">SBI</a></li>

          </ul>
          </li>
          <li><a href="privacy.html">Academic</a></li>
          <li><a href="privacy.html">Privacy</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <div>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="about.html" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
            <li><a href="https://www.facebook.com/Titlys-Collection-115875246882822/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="https://twitter.com/TitlyCollection" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://www.instagram.com/titlyscollection/" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>

          </ul>

        </div>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>


  <script type="text/javascript">
    $(function() {
      $('.dropdown').hover(function() {
          $(this).addClass('open');
        },
        function() {
          $(this).removeClass('open');
        });
    });
  </script>

  <div class="container" style="margin-top: 3%;">
    <div class="row">
      <!--left-->
      <div class="col-md-3" id="leftCol">

        <ul class="nav nav-stacked" id="sidebar">
          <li style="margin-top: 2%; text-align: center;"><b> Table of Content</b></li>
          <li><a href="#sec0" class="list-group-item">SSC CGL 2020 Exam Date</a></li>
          <li><a href="#sec1" class="list-group-item">SSC CGL Eligibility Criteria</a></li>
          <li><a href="#sec2" class="list-group-item">Online Application</a></li>
          <li><a href="#sec3" class="list-group-item">SSC CGL Exam Pattern</a></li>
          <li><a href="#sec4" class="list-group-item">SSC CGL Syllabus</a></li>
          <li><a href="#sec5" class="list-group-item">SSC CGL Exam Centre </a></li>
          <li><a href="#sec6" class="list-group-item">SSC CGL Vacancy</a></li>
          <li><a href="#sec7" class="list-group-item">SSC CGL Result and Cut Off</a></li>
          <li><a href="#sec8" class="list-group-item">SSC CGL Posts and Salary</a></li>
          <li><a href="#sec9" class="list-group-item">Miscellaneous Information</a></li>

        </ul>
      </div>
      <!--/left-->

      <div id="collapse_menu" style="text-align: center;">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="background-color: #8310d5; border: none;">Collapsible Menu</button>
        <div id="demo" class="collapse">
          <div class="col-md-3" id="leftCol1">

            <ul class="nav nav-stacked" id="sidebar1" style="width: auto; ">
              <li><a href="#sec0" class="list-group-item">SSC CGL 2020 Exam Date</a></li>
              <li><a href="#sec1" class="list-group-item">SSC CGL Eligibility Criteria</a></li>
              <li><a href="#sec2" class="list-group-item">Online Application</a></li>
              <li><a href="#sec3" class="list-group-item">SSC CGL Exam Pattern</a></li>
              <li><a href="#sec4" class="list-group-item">SSC CGL Syllabus</a></li>
              <li><a href="#sec5" class="list-group-item">SSC CGL Exam Centre </a></li>
              <li><a href="#sec6" class="list-group-item">SSC CGL Vacancy</a></li>
              <li><a href="#sec7" class="list-group-item">SSC CGL Cut Off</a></li>
              <li><a href="#sec8" class="list-group-item">SSC CGL Posts and Salary</a></li>
              <li><a href="#sec9" class="list-group-item">Miscellaneous Information</a></li>

            </ul>
          </div>
        </div>
      </div>




      <!--right-->
      <div class="col-md-9 ">
        <ol class="breadcrumb" style="background-color: white;">
          <li class="breadcrumb-item">
            <a href="collections.html">Exams  </a>
          </li>
          <li class="breadcrumb-item">
            <a href="collections.html">SSC  </a>
          </li>
          <li class="breadcrumb-item active">SSC CGL Exam</li>
        </ol>
        <h1 style="text-align: center; font-weight: bold; border: 3px; padding: 15px; background-color: #8310d5; color: #ffffff; " id="sec0">SSC CGL Exam Date & Notification - 2020</h1>
        <p>
          SSC CGL exam is conducted by stuff Selection Commission for the recruitment of candidates in group B and C posts in various departments. The full form of SSC CGL is Staff Selection Commission Combined Graduate Level.</p>

        <hr>

        <h2>SSC CGL 2020 Exam Date</h2>
        <p>The tetative dates of the SSC CGL 2020 exam is announced by the Stuff Selection Commission.</p>
  

        </div><!--/right-->
<!--    right column here
 -->   

 <div class="col-sm-2 sidenav" id="related_plant" style="background-color: white; text-align: left;">
      <h3>Related Exams</h3>
      <p><a href="azalea.html" >SSC CHSL Exam</a></p>
      <p><a href="begonia.html" >SSC MTS Exam</a></p>
      <p><a href="carnation.html" >SSC JE Exam</a></p>
      <p><a href="chrysanthemum.html" >SSC Sub Inspector Exam</a></p>
      <p><a href="cyclamen.html" >SSC Stenographer</a></p>
      <p><a href="cyclamen.html" >SSC GD Constable exam</a></p>
      <p><a href="daffodils.html" >SSC JHT</a></p>
      <p><a href="lavender.html" >SSC Selection Post</a></p>
    </div>
  </div><!--/row-->
</div><!--/container-->


<script type="text/javascript">
  /* activate sidebar */
$('#sidebar').affix({
  offset: {
    top: 235
  }
});

/* activate scrollspy menu */
var $body   = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;

$body.scrollspy({
  target: '#leftCol',
  offset: navHeight
});


</script>

<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>

<script type="text/javascript">
  $(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        
        $('#back-to-top').tooltip('show');

});
</script>
<footer class="container-fluid text-center" style="margin-top: 5%;">
  
   <a href="home.html" >Home</a> | <a href="collections.html" >Exams</a> | <a href="about.html" >Academic</a> | <a href="privacy.html" >Privacy</a> | <a href="contact.html" >Contact</a>
   <p style="margin-top: 1%;" >@2020 examhotwire.com</p><br>
</footer>



</body>
</html>

Answers

- PuneetKarajagi
- August 5, 2020 at 12:43 pm
- 0 votes
0
Always load the jquery script above boostrap script in order for bootstrap to work correctly.

Like this –
```
<script src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
```
Login or Signup to reply.

- CharukaHS
- August 5, 2020 at 12:49 pm
- 0 votes
0
Pay attention to your css imports
First you import css, then fontawesome, then your css file and then again you import bootstrap from a cdn.
Which means first you import bootstrap, then you override those classes with your own css, and again you import bootstrap overriding default classes over your custom css.

Solution is remove the last bootstrap import <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">. It will fix your problem

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.