html – Problema de quebra de linha no bootstrap


Eu tenho um slide do bootstrap que gostaria de adicionar 2 linhas e cada linha teria 3 elementos. Depois para ver o restante dos elementos, a pessoa teria que clicar na seta e passar para o lado. O meu problema é: eu não consigo fazer ele ter 2 linhas, o slide fica com todos os elementos em uma só linha. E também não consigo adicionar a seta para passar para o lado, visto que todos os elementos já estão em uma mesma linha.

Esse é o código que estou usando que está com o problema:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ul class="nav nav-pills nav-justified">
            <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
            <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
            
            <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
            
             
            <li data-target="#myCarousel" data-slide-to="3"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
             
            <li data-target="#myCarousel" data-slide-to="4"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
             
            <li data-target="#myCarousel" data-slide-to="5"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
            
            
          </ul>
          <div class="carousel-inner">
            <div class="item active">
              <img src="https://placehold.it/1200x400/cccccc/ffffff" />
            </div>
        
            <div class="item">
              <img src="https://placehold.it/1200x400/999999/cccccc">
            </div>
        
            <div class="item">
              <img src="https://placehold.it/1200x400/dddddd/333333">
            </div>
            
               <div class="item">
              <img src="https://placehold.it/1200x400/dddddd/333333">
            </div>
            
               <div class="item">
              <img src="https://placehold.it/1200x400/dddddd/333333">
            </div>
            
               <div class="item">
              <img src="https://placehold.it/1200x400/dddddd/333333">
            </div>
          </div>
        </div>