bad idea

<div class="col-md-8 col-sm-12 mx-auto">

    <div class="row no-gutters">

        <!-- first column, outfit column basically -->
        <div class="col-md col-sm-12">

            <!-- accordion -->
            <div class="col-12 p-0 bg-faded">
            <div id="accordion">

            <!-- outfit stuff -->
            <div id="dafit" class="collapse show" data-parent="#accordion">
                <div id="clothes" class="carousel slide w-100" data-ride="carousel">
                <div class="carousel-inner">

                <!-- outfit 1, the main one -->
                <div class="carousel-item active">
                    <div style="background-image: url(imgurlhere); height: 300px; background-size: cover; background-position: center"></div>
                </div>

                <!-- outfit 2, the secondary one -->
                <div class="carousel-item">
                    <div style="background-image: url(imgurlhere); height: 300px; background-size: cover; background-position: center"></div>
                </div>

                <!-- add more above this line -->
                </div>

                <!-- controls -->
                <a class="carousel-control-prev" href="#clothes" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">prev.</span>
                </a>


                <a class="carousel-control-next" href="#clothes" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">next</span>
                </a>
            </div>
            </div>

            <!-- design notes -->
            <div id="danotes" class="collapse" data-parent="#accordion">
                <div class="p-1" style="font-weight: 800; font-style: italic; font-size: 18px; text-align: center">DESIGN NOTES</div>

                <!-- write em here -->
                <div class="overflow-auto p-1" style="height: 265px">
                    <ul class="fa-ul mx-4 text-justify">
                        <li><span class="fa-li"><i class="fal fa-square-info text-muted"></i></span> ok hiii i did it</li>
                        <li><span class="fa-li"><i class="fal fa-square-info text-muted"></i></span> for some reason getting the right height was really hard</li>
                        <li><span class="fa-li"><i class="fal fa-square-info text-muted"></i></span> yeah im great at coding i know</li>
                        <li><span class="fa-li"><i class="fal fa-square-info text-muted"></i></span> (he is literally guessing and checking like a 5th grader)</li>
                        <li><span class="fa-li"><i class="fal fa-square-info text-muted"></i></span> you know what i have stuck in my head</li>
                        <li><span class="fa-li"><i class="fal fa-square-info text-muted"></i></span> when you're small by mgmt</li>
                        <li><span class="fa-li"><i class="fal fa-square-info text-muted"></i></span> for whatever fucken reason. little dark age is a good album tho</li>
                    </ul>
                </div>

            </div>

            </div>
            </div>

            <!-- buttons -->
            <div class="col-12 text-center bg-faded">
            <a style="cursor:pointer;" data-toggle="collapse" data-target="#dafit" aria-expanded="true" aria-controls="dafit">
                <i class="fal fa-shirt"></i>
            </a>

            <a style="cursor:pointer;" data-toggle="collapse" data-target="#danotes" aria-expanded="true" aria-controls="danotes">
                <i class="fal fa-list"></i>
            </a>
            </div>
        </div>

        <!-- second column, main stuff basically -->
        <div class="col-md-5 col-sm-12 px-md-2 px-sm-0 d-block d-md-flex flex-column">

            <!-- buttons -->
            <div class="bg-faded p-2 overflow-auto">

            <ul class="nav justify-content-center p-0 m-0" style="border-bottom: 1px solid">
            <li class="mx-0 my-auto text-center p-0 nav-item m-1">
                <a href="#abt" data-toggle="tab" class="text-reset nav-link p-0"><i class="fal fa-comment-question my-auto"></i></a>
            </li>
            <li class="mx-0 my-auto text-center p-0 nav-item m-1">
                <a href="#story" data-toggle="tab" class="text-reset nav-link p-0"><i class="fal fa-book-open my-auto"></i></a>
            </li>
            <li class="mx-0 my-auto text-center p-0 nav-item m-1">
                <a href="#rships" data-toggle="tab" class="text-reset nav-link p-0"><i class="fal fa-link my-auto"></i></a>
            </li>
            <li class="mx-0 my-auto text-center p-0 nav-item m-1">
                <a href="#trivia" data-toggle="tab" class="text-reset nav-link p-0"><i class="fal fa-clipboard-list my-auto"></i></a>
            </li>
            </ul>
            </div>

            <!-- tab shite -->
            <div class="bg-faded" style="flex: 1 1 100px; min-height: 250px; overflow-y: auto;">
            <div class="tab-content">

                <!-- basics -->
                <div id="abt" class="tab-pane fade active show">

                    <!-- title -->
                    <div class="justify-content-between px-1">
                        <div class="px-2 font-weight-bold bg-secondary d-inline-flex" style="font-size: 20px">
                            ABOUT</div>

                        <div style="font-size: 20px"><i class="fal fa-comment-question"></i></div>
                    </div>

                    <div class="p-1">

                    <!-- name -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-signature text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">name</span>
                        </div>
                        <div class="text-right p-1">name surname</div>
                    </div>

                    <!-- nickname -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-comment text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">nickname</span>
                        </div>
                        <div class="text-right p-1">nickname</div>
                    </div>

                    <!-- age -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-birthday-cake text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">age</span>
                        </div>
                        <div class="text-right p-1">uhh number</div>
                    </div>

                    <!-- birthday -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-calendar-alt text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">birthday</span>
                        </div>
                        <div class="text-right p-1">date</div>
                    </div>

                    <!-- species -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-person text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">species</span>
                        </div>
                        <div class="text-right p-1">name</div>
                    </div>

                    <!-- nationality -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-flag text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">nationality</span>
                        </div>
                        <div class="text-right p-1">nationality</div>
                    </div>

                    <!-- job -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-briefcase text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">occupation</span>
                        </div>
                        <div class="text-right p-1">thing</div>
                    </div>

                    <!-- theme -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="far fa-music text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">theme</span>
                        </div>
                        <div class="text-right p-1">
                            <a class="text-muted" href="URLHERE">song</a>
                        </div>
                    </div>

                    <!-- worth -->
                    <div class="justify-content-between">
                        <div class="col-auto p-1">
                            <i class="fas fa-dollar text-muted" style="font-size: 18px; position: absolute; opacity: .3"></i> <span class="ml-2">worth</span>
                        </div>
                        <div class="text-right p-1">$0</div>
                    </div>


                    </div>
                </div>

                <!-- story tab -->
                <div id="story" class="tab-pane fade">

                    <!-- title -->
                    <div class="justify-content-between px-1">
                        <div class="px-2 font-weight-bold bg-secondary d-inline-flex" style="font-size: 20px">
                            STORY</div>

                        <div style="font-size: 20px"><i class="fal fa-book-open"></i></div>
                    </div>

                    <!-- part 1 -->
                    <div class="sticky-top bg-faded">
                    <div class="text-right px-1 py-0" style="font-size: 18px">i. CHILDHOOD</div>
                    <hr class="my-1">
                    </div>

                    <div class="p-1 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>

                    <!-- part 2 -->
                    <div class="sticky-top bg-faded">
                    <div class="text-right px-1 py-0" style="font-size: 18px">ii. ADOLESCENCE</div>
                    <hr class="my-1">
                    </div>

                    <div class="p-1 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>

                    <!-- part 3 -->
                    <div class="sticky-top bg-faded">
                    <div class="text-right px-1 py-0" style="font-size: 18px">iii. ADULTHOOD</div>
                    <hr class="my-1">
                    </div>

                    <div class="p-1 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>

                </div>

                <!-- relationships -->
                <div id="rships" class="tab-pane fade">
                    <div class="justify-content-between px-1">
                        <div class="px-2 font-weight-bold bg-secondary d-inline-flex" style="font-size: 20px">
                            RELATIONSHIPS</div>

                        <div style="font-size: 20px"><i class="fal fa-link"></i></div>
                    </div>

                    <!-- guy 1 -->
                    <div class="col-12 p-1">
                        <!-- profile picture -->
                        <div class="pull-left mr-1" style="background-image: url(imgurlhere); height: 100px; width: 100px; background-size: cover"></div>

                        <!-- name + status, go to fontawesome.com ykno -->
                        <p class="justify-content-between m-0">
                            <a href="#" class="text-muted font-weight-bold">NAME</a>
                            <i class="fas fa-handshake tooltipster" title="friends?"></i>
                        </p>

                        <!-- quick thing about this relationship -->
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
                    </div>

                    <hr class="my-1">

                    <!-- guy 2 -->
                    <div class="col-12 p-1">

                        <!-- profile picture -->
                        <div class="pull-right ml-1" style="background-image: url(imgurlhere); height: 100px; width: 100px; background-size: cover"></div>

                        <!-- names + relation -->
                        <p class="justify-content-between m-0">
                            <i class="fas fa-user-minus my-1 tooltipster" title="idfk"></i>
                            <a href="#" class="text-muted font-weight-bold">NAME</a>
                        </p>

                        <!-- quickwrite -->
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
                    </div>

                    <!-- add more above this line -->
                </div>

                <!-- trivia -->
                <div id="trivia" class="tab-pane fade">

                    <!-- title -->
                    <div class="justify-content-between px-1">
                        <div class="px-2 font-weight-bold bg-secondary d-inline-flex" style="font-size: 20px">
                            TRIVIA</div>

                        <div style="font-size: 20px"><i class="fal fa-clipboard-list"></i></div>
                    </div>

                    <!-- trivia and likes and dislikes -->
                    <div class="row no-gutters p-1">
                        <!-- likes -->
                        <div class="col-md-6 col-sm-12 pr-md-1 pr-sm-0 mb-1">

                            <div class="p-1 px-2 card rounded-0" style="font-weight: 800; font-style: italic; font-size: 18px;">LIKES</div>

                            <ul class="fa-ul mb-0">
                                <li><span class="fa-li"><i class="fal fa-square-check"></i></span>like</li>
                                <li><span class="fa-li"><i class="fal fa-square-check"></i></span>like</li>
                                <li><span class="fa-li"><i class="fal fa-square-check"></i></span>like</li>
                                <li><span class="fa-li"><i class="fal fa-square-check"></i></span>like</li>
                            </ul>
                        </div>

                        <!-- dislikes -->
                        <div class="col-md-6 col-sm-12 pl-md-1 pl-sm-0 mb-1">

                            <div class="py-1 px-2 card rounded-0" style="font-weight: 800; font-style: italic; font-size: 18px;">DISLIKES</div>

                            <ul class="fa-ul mb-0">
                                <li><span class="fa-li"><i class="fal fa-square-x"></i></span>dislike</li>
                                <li><span class="fa-li"><i class="fal fa-square-x"></i></span>dislike</li>
                                <li><span class="fa-li"><i class="fal fa-square-x"></i></span>dislike</li>
                                <li><span class="fa-li"><i class="fal fa-square-x"></i></span>dislike</li>
                            </ul>
                        </div>

                        <!-- trivia -->
                        <div class="col-12">

                            <div class="py-1 px-2 card rounded-0" style="font-weight: 800; font-style: italic; font-size: 18px;">TRIVIA</div>

                            <ul class="fa-ul mb-0">
                                <li><span class="fa-li"><i class="fal fa-square-question"></i></span>trivial note</li>
                                <li><span class="fa-li"><i class="fal fa-square-question"></i></span>trivial note</li>
                                <li><span class="fa-li"><i class="fal fa-square-question"></i></span>trivial note</li>
                                <li><span class="fa-li"><i class="fal fa-square-question"></i></span>trivial note</li>
                            </ul>
                        </div>
                    </div>

                    <!-- moodboard -->
                    <div class="py-1 px-2 card rounded-0 m-1" style="font-weight: 800; font-style: italic; font-size: 18px;">MOODBOARD</div>

                    <div class="row no-gutters p-1">

                        <!-- img1 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>

                        <!-- img2 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: top"></div>

                        <!-- img3 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>

                        <!-- row2 img1 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>

                        <!-- row2 img2 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>

                        <!-- row2 img3 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>

                        <!-- row3 img1 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>

                        <!-- row3 img2 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>

                        <!-- row3 img3 -->
                        <div class="col-4" style="background-image: url(imgurlhere); height: 90px; background-size: cover; background-position: center"></div>
                    </div>

                </div>
            </div>

            </div>

        </div>

        <!-- third column, quote column basically. wow newspaper core -->
        <div class="col-md-4 col-sm-12 d-block d-md-flex flex-column">

            <!-- write as long as you want the img will just small -->
            <div class="bg-faded p-2">
                <i class="fal fa-quote-left"></i> START OF QUOTE...
            </div>

            <!-- profile picture -->
            <div class="my-1" style="flex: 1 1 100px; min-height: 200px; background-image: url(imgurlhere); background-size: cover"></div>

            <!-- write as long as you want the img will just small -->
            <div class="bg-faded p-2 text-right">
                 ...END OF QUOTE <i class="fal fa-quote-right"></i>
            </div>

        </div>

    </div>

    <!-- dont remove these -->
    <div class="text-center">
        <a class="text-muted" href="/micro-wave" data-toggle="tooltip" title="code by micro-wave"><i class="fas fa-microwave"></i></a>
        <a class="text-muted" href="/togo" data-toggle="tooltip" title="layout by togo"><i class="fas fa-table-layout"></i></a>
    </div>
</div>