Bootstrap nested container test

In this example below you will see how to do a Bootstrap nested container test with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by toddprouty, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright toddprouty ©
  • HTML
  • CSS
  • JavaScript
    <div class="config container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Collapsible Group Item #1
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Nested Level 1</h3>
                                </div>
                                <div class="panel-body">
                                    <h4>Subheading</h4>
                                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat, est sed tincidunt pretium, odio enim consectetur massa, non faucibus ipsum quam eget arcu. Etiam non semper est. Aliquam et viverra massa.</p>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Nested Level 2</h3>
                                        </div>
                                        <div class="panel-body">
                                            <h4>Subheading</h4>
                                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat, est sed tincidunt pretium, odio enim consectetur massa, non faucibus ipsum quam eget arcu. Etiam non semper est. Aliquam et viverra massa.</p>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Nested Level 2</h3>
                                        </div>
                                        <div class="panel-body">
                                            <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Nested Level 2</h3>
                                        </div>
                                        <div class="panel-body">
                                            Panel content
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Nested Level 2</h3>
                                        </div>
                                        <div class="panel-body">
                                            Panel content
                                        </div>
                                    </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Collapsible Group Item #2
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            (Body)
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Collapsible Group Item #3
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            (Body)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

/*Downloaded from https://www.codeseek.co/toddprouty/bootstrap-nested-container-test-QawBzM */
    body {
    padding: 20px;
}


/*Downloaded from https://www.codeseek.co/toddprouty/bootstrap-nested-container-test-QawBzM */
    

Comments