Почему текст не влезает в карусель bootstrap 4?

<!-- Карусель -->
          <!-- Bootstrap 4 -->
          <div id="carousel" class="carousel slide" data-ride="carousel">
          <!-- Индикаторы -->
          <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
          <li data-target="#carousel" data-slide-to="2"></li>

          </ol>
          <div class="carousel-inner border-12">

            <div class="carousel-item active">
              <img class="img-fluid d-block w-100" src="<?php echo get_template_directory_uri(); ?>/images/slide_1.jpg" alt="...">
              <div class="carousel-caption">
                <h1>Заголовок</h1>
                <p>Тут должен быть текст
                      Тут должен быть текст
                      Тут должен быть текст
                      Тут должен быть текст </p>
              </div>
            </div>

            <div class="carousel-item">
              <img class="img-fluid d-block w-100" src="<?php echo get_template_directory_uri(); ?>/images/slide_2.jpg" alt="...">
            </div>

            <div class="carousel-item">
              <img class="img-fluid d-block w-100" src="<?php echo get_template_directory_uri(); ?>/images/slide_3.jpg" alt="...">
            </div>

          </div>
          <!-- Элементы управления -->
          <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Предыдущий</span>
          </a>
          <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Следующий</span>
          </a>
          </div>