title: How to get active class only in first div of carousel?
body: <p>Trying a dynamic carousel of bootstrap-4 in which the images comes from the database. But only single div is allowed to be active in carousel, so how can i achieve it ? How can I get active in first div in foreach loop.</p>
  
  <pre><code>&lt;?php 
      include '../employee.php';
      $obj= new employees();
      $result=$obj-&gt;select_image();
   ?&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
      &lt;title&gt;Hello, world!&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
  &lt;div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
    &lt;?php 
      foreach ($result as $values){
    ?&gt;
    &lt;?php echo $values['profile_pic']; ?&gt; 
      &lt;div class="carousel-item active" data-interval="2000"&gt;
        &lt;img src="&lt;?php echo $values['profile_pic']; ?&gt;" class="d-block w-100" alt="..."&gt;
      &lt;/div&gt;
      &lt;?php 
      }
      ?&gt;
  
     &lt;/div&gt;
    &lt;a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>