Cacher is the code snippet organizer for pro developers

// Adds active state to secion navigation
$('.nav li').click(function(e) {
  e.preventDefault();
  $('.nav li').removeClass('active');
  $(this).addClass('active');
});

section {
  border-bottom: 1px solid #ccc;
  margin-top: 1em;
}

section .col-md-3 {
  border-left: 1px solid #ccc;
}

section .col-md-3:first-child {
  border: none;
}

<div class="container">
     <h1>Chronological Site Map Template</h1>
    <ul class="nav nav-pills">
        <li role="presentation" class="nav-item"><a href="#sec1" class="nav-link">Section 1</a>
        </li>
        <li role="presentation" class="nav-item"><a href="#sec2" class="nav-link">Section 2</a>
        </li>
        <li role="presentation" class="nav-item"><a href="#sec3" class="nav-link">Section 3</a>
        </li>
        <li role="presentation" class="nav-item"><a href="#sec4" class="nav-link">Section 4</a>
        </li>
    </ul>
    <section id="sec1">
         <h2>Section 1</h2>
        <div class="row">
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <section id="sec2">
         <h2>Section 2</h2>
        <div class="row">
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul></ul>
            </div>
        </div>
    </section>
    <section id="sec3">
         <h2>Section 3</h2>
        <div class="row">
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul></ul>
            </div>
        </div>
    </section>
    <section id="sec4">
         <h2>Section 4</h2>
        <div class="row">
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>
<!-- /container -->