Q:

Como inserir uma linha por cima do carousel

Estou tentando fazer um carousel que ao clicar nos itens é exibido a imagem e ao lado o conteúdo mais gostaria de inserir um uma linha como da imagem abaixo e centralizar os itens com o titulo ao lado como faço isso? 

<div class="home-destaque">
  <div class="container">

    <div class="row">
      <center><h2>Destaques</h2></center>
    </div>

    <div class="outline-destaque">

    <div class="row">   
          <div class="col-xs-12" id="slider">
              <!-- Top part of the slider -->
              <div class="row">
                  <div class="col-sm-8" id="carousel-bounding-box">
                      <div class="carousel slide" id="destaqueCarousel">
                          <!-- Carousel items -->
                            <div class="carousel-inner">
                              <div class="active item" data-slide-number="0">
                                <img src="http://placehold.it/770x300&text=Brigadeiro">
                              </div>
                              <div class="item" data-slide-number="1">
                                <img src="http://placehold.it/770x300&text=Petit gateau">
                              </div>
                              <div class="item" data-slide-number="2">
                                <img src="http://placehold.it/770x300&text=Boleria">
                              </div>
                            </div>
                            <!-- Carousel nav -->
                            <a class="left carousel-control" href="#destaqueCarousel" role="button" data-slide="prev">
                              <span class="glyphicon glyphicon-chevron-left"></span>                                       
                            </a>
                            <a class="right carousel-control" href="#destaqueCarousel" role="button" data-slide="next">
                              <span class="glyphicon glyphicon-chevron-right"></span>                                       
                            </a>                                
                        </div> <!-- fim carousel -->
                    </div> <!-- fim carousel-bounding-box -->

                    <div class="col-sm-4" id="carousel-text"></div>

                    <div id="slide-content" style="display: none;">
                      <div id="slide-content-0">
                          <h2>Brigadeiro</h2>
                            <p>Lorem Ipsum Dolor</p>
                          <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                        </div>

                        <div id="slide-content-1">
                          <h2>Petit gateau</h2>
                          <p>Lorem Ipsum Dolor</p>
                            <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                        </div>

                        <div id="slide-content-2">
                          <h2>Boleria</h2>
                          <p>Lorem Ipsum Dolor</p>
                          <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                        </div> 
                    </div>
                </div> <!-- fim row -->
            </div> <!-- fim col-xs-12 -->
        </div><!-- fim row-->

        <div class="row hidden-xs" id="slider-thumbs">
          <!-- Bottom switcher of slider -->
            <ul class="hide-bullets">
              <li class="col-sm-2">
                  <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=Brigadeiro"></a>
                </li>

                <li class="col-sm-2">
                  <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=Petit gateau"></a>
                </li>

                <li class="col-sm-2">
                  <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=Boleria"></a>
                </li>
            </ul>                 
        </div>  

        </div><!-- linha destaque -->

  </div><!-- fim container -->
</div> <!-- fim home-destaque -->

.home-destaque .hide-bullets {
            list-style:none;
            margin-left: 0px;/*margin-left: -40px;*/
            margin-top:20px;
    }

    .outline-destaque {
        padding: 70px 30px;
        outline: #e8e8e8 1px solid;
        outline-offset: -50px;
        z-index: 999;
    }

  <script type="text/javascript">

            /* Inicio carousel Suites */
            jQuery(document).ready(function($) {

                $('#destaqueCarousel').carousel({
                        interval: 5000
                });

                $('#carousel-text').html($('#slide-content-0').html());

                //Handles the carousel thumbnails
               $('[id^=carousel-selector-]').click( function(){
                    var id = this.id.substr(this.id.lastIndexOf("-") + 1);
                    var id = parseInt(id);
                    $('#destaqueCarousel').carousel(id);
                });

                // When the carousel slides, auto update the text
                $('#destaqueCarousel').on('slid.bs.carousel', function (e) {
                         var id = $('.item.active').data('slide-number');
                        $('#carousel-text').html($('#slide-content-'+id).html());
                });
            });
            /* Fim carousel Suites */

        </script>

A:

Para alinhar os títulos nos Thumbnails eu tive que usar display flex, e separa imagem em uma coluna e título em outra coluna. Veja no Snippet que vc vai entender. Tirando isso não mexi no HTML, só CSS.
E para a linha que coloquei em vermelho só para enxergar melhor precisei usar o z-index para jogar uns elementos para frente dos outros. 
Veja como ficou no Snippet, mande executar em "Página toda" para ver melhor.
OBS: Não usei o <script> da sua pergunta pq estava dando erro no Snippet do StackOverflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  .home-destaque .hide-bullets {
  list-style:none;
  margin-left: 0px;/*margin-left: -40px;*/
  margin-top:20px;
}
  /* .home-destaque .row {
    position: relative;
    z-index: -1;
} */

.outline-destaque {
    padding: 128px 80px;
    /* outline: #e8e8e8 1px solid ; */
    outline: 1px solid red;
    outline-offset: -100px;
    position: relative;
    z-index: 99;
    margin-top: -70px;
}
    .hide-bullets {
        list-style: none;
        display: flex;
        align-items: center;
        margin-top: 24px;
    }
    .thumbnail {
      margin-bottom: 0;
    }
</style>
</head>
<body>
    
        <div class="home-destaque">
                <div class="container">
              
                  <div class="row">
                    <center><h2>Destaques</h2></center>
                  </div>
              
                  <div class="outline-destaque">
              
                  <div class="row" style="position: relative !important; z-index: -1 !important;">   
                        <div class="col-xs-12" id="slider">
                            <!-- Top part of the slider -->
                            <div class="row">
                                <div class="col-sm-8" id="carousel-bounding-box">
                                    <div class="carousel slide" id="destaqueCarousel">
                                        <!-- Carousel items -->
                                          <div class="carousel-inner">
                                            <div class="active item" data-slide-number="0">
                                              <img src="http://placehold.it/770x300&text=Brigadeiro">
                                            </div>
                                            <div class="item" data-slide-number="1">
                                              <img src="http://placehold.it/770x300&text=Petit gateau">
                                            </div>
                                            <div class="item" data-slide-number="2">
                                              <img src="http://placehold.it/770x300&text=Boleria">
                                            </div>
                                          </div>
                                          <!-- Carousel nav -->
                                          <a class="left carousel-control" href="#destaqueCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                          </a>
                                          <a class="right carousel-control" href="#destaqueCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                          </a>                                
                                      </div> <!-- fim carousel -->
                                  </div> <!-- fim carousel-bounding-box -->
                                  <div class="col-sm-4" id="">
                                      <h3>Descrição</h3>
                                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae cupiditate eveniet exercitationem illum a quos voluptatem magni possimus nostrum similique!
                                  </div>
              
                                  <div class="col-sm-4" id="carousel-text"></div>
              
                                  <div id="slide-content" style="display: none;">
                                    <div id="slide-content-0">
                                        <h2>Brigadeiro</h2>
                                          <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                      </div>
              
                                      <div id="slide-content-1">
                                        <h2>Petit gateau</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                          <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                      </div>
              
                                      <div id="slide-content-2">
                                        <h2>Boleria</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                      </div> 
                                  </div>
                              </div> <!-- fim row -->
                          </div> <!-- fim col-xs-12 -->
                      </div><!-- fim row-->
              
                      <div class="row hidden-xs" id="slider-thumbs">
                        <!-- Bottom switcher of slider -->
                          <ul class="hide-bullets">
                            <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=Brigadeiro"></a>
                              </li>
                              <li class="col-sm-2">
                                    titulo 1
                                  </li>
              
                              <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=Petit gateau"></a>
                              </li>
                              <li class="col-sm-2">
                                titulo 2
                              </li>
              
                              <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=Boleria"></a>
                              </li>
                              <li class="col-sm-2">
                                    titulo 3
                                  </li>
                          </ul>                 
                      </div>  
              
                      </div><!-- linha destaque -->
              
                </div><!-- fim container -->
              </div> <!-- fim home-destaque -->
    

    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

