title: bootstrap slider in libraries are changing the all other layout
body: <p>I am using a slider from here:</p>
  
  <p><a href="https://codepen.io/kravisingh/pen/pLGzgo" rel="nofollow noreferrer">https://codepen.io/kravisingh/pen/pLGzgo</a></p>
  
  <p>And the code of the complete page:</p>
  
  <p>paste.ofcode.org/Dx5NyPRunupjL6GRysUx9g</p>
  
  <p>But after adding these libraries, the other layouts of the web page don't display fine and the display is wrong. How can i avoid this?</p>
  
  <p>ejs code:</p>
  
  <pre><code>           &lt;div id="demo" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
  
                             &lt;!-- The slideshow --&gt;
                             &lt;div class="container carousel-inner no-padding"&gt;
                               &lt;!-- mapping your meetings parent --&gt;
                               &lt;% meetings.forEach(function(meeting,index){ %&gt;
                               &lt;div class="carousel-item &lt;%= index === 0 ? 'active' : '' %&gt;"&gt;
                                 &lt;!-- mapping your meetings child --&gt;
                                 &lt;% meeting.forEach(function(m){ %&gt;
                                 &lt;div class="col-xs-3 col-sm-3 col-md-3"&gt;
                                   &lt;div class="col-md-2 col-xs-12 upcoming-btn"&gt;
                                     &lt;span href="" class="btn btn-success btn-lg dashboard-icon" style="width: 200px; height: 150px;"&gt;
                                       &lt;p style="padding-top: 15px; font-size: 25px; font-weight: bold;"&gt;&lt;%= m.subject %&gt;&lt;/p&gt;
                                       &lt;p style="font-size: 25px; font-weight: bold;"&gt;&lt;%= convertDate(m.date) %&gt;&lt;/p&gt;
                                       &lt;p style="font-size: 25px; font-weight: bold;"&gt;Upcoming&lt;/p&gt;
                                     &lt;/span&gt;
                                   &lt;/div&gt; 
                                 &lt;/div&gt;    
                                 &lt;% }) %&gt;   
                               &lt;/div&gt;
                             &lt;% }) %&gt;   
                             &lt;/div&gt;
  
                             &lt;!-- Left and right controls --&gt;
                             &lt;a class="carousel-control-prev" href="#demo" data-slide="prev"&gt;
                               &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
                             &lt;/a&gt;
                             &lt;a class="carousel-control-next" href="#demo" data-slide="next"&gt;
                               &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
                             &lt;/a&gt;
                           &lt;/div&gt;
  </code></pre>
  
  <p>and its libraries are </p>
  
  <pre><code>    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt; 
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt; 
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>