title: Spring boot carousel fullscreen html,css,bootstrap
body: <p>I have a problen with making fullscreen carousel using html and css. When i start my webapp its just shows me nothing in browser like its blank html file only with glyphicon on the top. It works fine when i just open it up in browser without starting spring. I guessing that i missing something in application properties or mapping.</p>
  
  <pre><code>body {
      font-family: 'Roboto', sans-serif;
  }
  
  
  .carousel-fade .carousel-inner .item {
      -webkit-transition-property: opacity;
      transition-property: opacity;
  }
  .carousel-fade .carousel-inner .item,
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
      opacity: 0;
  }
  .carousel-fade .carousel-inner .active,
  .carousel-fade .carousel-inner .next.left,
  .carousel-fade .carousel-inner .prev.right {
      opacity: 1;
  }
  .carousel-fade .carousel-inner .next,
  .carousel-fade .carousel-inner .prev,
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
      left: 0;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-control {
      z-index: 2;
  }
  
  
  /* carousel fullscreen */
  
  .carousel-fullscreen .carousel-inner .item {
      height: 100vh;
      min-height: 600px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  
  
  /* carousel fullscreen - vertically centered caption*/
  
  .carousel-fullscreen .carousel-caption {
      top: 50%;
      bottom: auto;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
  }
  
  /* overlay for better readibility of the caption  */
  
  .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.3;
      transition: all 0.2s ease-out;
  }
  
  
  /* typography */
  
  h1,h2,h3,h4 {
      font-weight: 700;
  }
  
  .super-heading {
      font-size: 70px;
  }
  
  
  .super-paragraph {
      font-size: 30px; font-weight: 300;
  }
  
  .carousel-caption .super-paragraph a,
  .carousel-caption .super-paragraph a:hover
  {
      color: #fff;
  }
  
  #carousel-example-generic {
      margin: 40px 0;
  }
  
  .demo-content {padding-top: 50px; padding-bottom: 50px; }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,700' rel='stylesheet' type='text/css'&gt;
      &lt;link th:href="@{/css/custom.css}" rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- fullscreen --&gt;
  
  &lt;div id="carousel-example-generic2" class="carousel slide carousel-fullscreen carousel-fade" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#carousel-example-generic2" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-example-generic2" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-example-generic2" data-slide-to="2"&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" style="background-image: url('static/1.jpg');"&gt;
              &lt;div class="overlay"&gt;&lt;/div&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1 class="super-heading"&gt;&lt;/h1&gt;
                  &lt;p class="super-paragraph"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item" style="background-image: url('static/2.jpg');"&gt;
              &lt;div class="overlay"&gt;&lt;/div&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1 class="super-heading"&gt;&lt;/h1&gt;
                  &lt;p class="super-paragraph"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item" style="background-image: url('static/3.jpg');"&gt;
              &lt;div class="overlay"&gt;&lt;/div&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1 class="super-heading"&gt;&lt;/h1&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#carousel-example-generic2" 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="#carousel-example-generic2" 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;script src="https://code.jquery.com/jquery-1.12.0.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;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  import org.springframework.web.servlet.ModelAndView;
  
  @org.springframework.stereotype.Controller
  public class Controller {
  
      @RequestMapping(value = {"/"}, method = RequestMethod.GET)
      public ModelAndView index() {
          ModelAndView modelAndView = new ModelAndView();
          modelAndView.setViewName("index");
          return modelAndView;
      }
  }
  </code></pre>
  
  <p>pom.xml</p>
  
  <pre><code> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"&gt;
          &lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;
  
          &lt;groupId&gt;com.demo&lt;/groupId&gt;
          &lt;artifactId&gt;ritagal&lt;/artifactId&gt;
          &lt;version&gt;0.0.1-SNAPSHOT&lt;/version&gt;
          &lt;packaging&gt;jar&lt;/packaging&gt;
  
          &lt;name&gt;Test&lt;/name&gt;
          &lt;description&gt;Demo project for Spring Boot&lt;/description&gt;
  
          &lt;parent&gt;
              &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
              &lt;artifactId&gt;spring-boot-starter-parent&lt;/artifactId&gt;
              &lt;version&gt;2.0.0.RELEASE&lt;/version&gt;
              &lt;relativePath/&gt; &lt;!-- lookup parent from repository --&gt;
          &lt;/parent&gt;
  
          &lt;properties&gt;
              &lt;project.build.sourceEncoding&gt;UTF-8&lt;/project.build.sourceEncoding&gt;
              &lt;project.reporting.outputEncoding&gt;UTF-8&lt;/project.reporting.outputEncoding&gt;
              &lt;java.version&gt;1.8&lt;/java.version&gt;
          &lt;/properties&gt;
  
  &lt;dependencies&gt;
          &lt;dependency&gt;
              &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
              &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
          &lt;/dependency&gt;
  
          &lt;dependency&gt;
              &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
              &lt;artifactId&gt;spring-boot-starter-test&lt;/artifactId&gt;
              &lt;scope&gt;test&lt;/scope&gt;
          &lt;/dependency&gt;
          &lt;dependency&gt;
              &lt;groupId&gt;net.sourceforge.nekohtml&lt;/groupId&gt;
              &lt;artifactId&gt;nekohtml&lt;/artifactId&gt;
              &lt;version&gt;1.9.21&lt;/version&gt;&lt;!--$NO-MVN-MAN-VER$--&gt;
          &lt;/dependency&gt;
          &lt;dependency&gt;
              &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
              &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
          &lt;/dependency&gt;
  &lt;/dependencies&gt;
  
          &lt;build&gt;
              &lt;plugins&gt;
                  &lt;plugin&gt;
                      &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
                      &lt;artifactId&gt;spring-boot-maven-plugin&lt;/artifactId&gt;
                  &lt;/plugin&gt;
              &lt;/plugins&gt;
          &lt;/build&gt;
  
  
      &lt;/project&gt;
  </code></pre>