title: How can I have multiple carousel on jsp page with fit size according to the browser
body: <p>I'm Attaching the code for JSP file</p>
  
  <pre><code>    &lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
          pageEncoding="ISO-8859-1"%&gt;
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
          &lt;title&gt;HOME PAGE&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;base href="resources\" target="_blank"&gt;
          &lt;style type="text/css"&gt;
          section{
              background-color: #f2f2f2;
  
          }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;section&gt;
          &lt;!-- Carousel code 1--&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
        &lt;/ol&gt;
  
        &lt;!-- Wrapper for slides --&gt;
        &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
            &lt;img class="img-responsive center-block" src="sale.jpg" alt="SALE" id="img"&gt;
          &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="womensale.jpg" alt="WOMEN CLOTHING" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="Mens.jpg" alt="MENS CLOTHING" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="kids.jpg" alt="KIDS CLOTHING" id="img"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Left and right controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;/section&gt;
  &lt;section&gt;
  &lt;!-- Carousel code 2--&gt;
  &lt;div id="myCarousel2" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img class="img-responsive center-block" src="men1.jpg" alt="Mens" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="men2.jpg" alt="Mens" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="men3.jpg" alt="Mens" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="men4.jpg" alt="Mens" id="img"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Left and right controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
  &lt;!-- Carousel code 3--&gt;
  &lt;div id="myCarousel3" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img class="img-responsive center-block" src="women.jpg" alt="Womens" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="women2.jpg" alt="Womens" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="women3.jpg" alt="Womens" id="img"&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img class="img-responsive center-block" src="women4.jpg" alt="Womens" id="img"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Left and right controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel3" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel3" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;/section&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here there are multiple carousel codes. Now I want to have carousel codes such that there size is same as background size.Can any one help me to find the above problem.As I'm running in the browser it is making uncomfortable the flow of html i.e, if there are three carousel then it should have three sections which shows accordingly to background size. </p>