Растянуть Carousel в Bootstrap?

Question

Андрей @andreychumak

junior

Растянуть Carousel в Bootstrap?

Хочу встроить в этот шаблон Bootstrap. Не могу понять как растянуть во весь экран. Картинки не будет, будет только цвет фона меняться и текст.
Заранее спасибо

HTML

<div class="site-wrapper">
  <div class="site-wrapper-inner">
    <div class="cover-container">
      <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
        <div class="carousel-inner">
        
          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">Cover</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Features</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </nav>
            </div>
          </div>

          <div class="active item">
            <h2>Слайд №1</h2>
            <div class="carousel-caption">
              <h3>Заголовок 1 слайда</h3>
              <p>Текст (описание) 1 слайда...</p>
            </div>
          </div>
          <!-- Слайд №2 -->
          <div class="item">
            <h2>Slide 2</h2>
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
            </div>
          </div>
          <!-- Слайд №3 -->
          <div class="item">
            <h2>Slide 3</h2>
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
 
          <div class="mastfoot">
            <div class="inner">
              <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
            </div>
          </div>
          <!-- Навигация для карусели -->
          <!-- Кнопка, осуществляющая переход на предыдущий слайд с помощью атрибута data-slide="prev" -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <!-- Кнопка, осуществляющая переход на следующий слайд с помощью атрибута data-slide="next" -->
          <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>

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

CSS

h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}