stories.html

<div class="jumbotron">

    <ul class="nav nav-tabs">
        <li class="nav-item learn_tab">
            <a class="nav-link active show" data-toggle="tab" href="#learn">Learn</a>
        </li>
        <li class="nav-item connect_tab">
            <a class="nav-link" data-toggle="tab" href="#connect">Connect</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active show category-tab-pane" id="learn">
            <br>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1 heading-content1"></h5>
                        <small>5 days ago</small>
                    </div>
                    <img id="image-1" style="float: left; height: 100px; width: 100px;border-radius: 10px;">
                    <p class="mb-1 big-content1" style="margin-left: 120px"></p>
                    <!-- <small class="small-text">Donec id elit non mi porta.</small> -->
                </a>
                
            </div>

            <br>
            <button type="button" class="btn btn-secondary category_type" title="" data-container="body" data-toggle="popover" data-placement="left"
                data-category="cultural_heroes" data-original-title="Popover Title" id="cultural_heroes_learn">Cultural Heroes</button>
            <button type="button" class="btn btn-secondary category_type" title="" data-container="body" data-toggle="popover" data-placement="top"
                data-category="feminine_fables" data-original-title="Popover Title">Feminine Fables</button>
            <button type="button" class="btn btn-secondary category_type" title="" data-container="body" data-toggle="popover" data-placement="bottom"
                data-category="cuisines" data-original-title="Popover Title">Cuisines</button>
            <button type="button" class="btn btn-secondary category_type" title="" data-container="body" data-toggle="popover" data-placement="right"
                data-category="festivals" data-original-title="Popover Title">Festivals</button>
            <button type="button" class="btn btn-secondary category_type" title="" data-container="body" data-toggle="popover" data-placement="right"
                data-category="folklore" data-original-title="Popover Title">Folklores</button>

            <div>
                <h5 style = "margin-top: 40px; margin-bottom: 40px;" class = "mb-1 heading">Similar Stories !</h5>
            </div>

            <div id="similar-story">
            </div>

        </div>
        <div class="tab-pane fade" id="connect">
            <div style="margin-top: 10px;">
                <button type="button" class="btn btn-secondary category_name" title="" data-container="body" data-toggle="popover" data-placement="left"
                    data-category="culture" data-original-title="Popover Title" id="culture_connect">Culture</button>
                <button type="button" class="btn btn-secondary category_name" title="" data-container="body" data-toggle="popover" data-placement="bottom"
                    data-category="wellbeing" data-original-title="Popover Title">Well-Being</button>
                <button type="button" class="btn btn-secondary category_name" title="" data-container="body" data-toggle="popover" data-placement="right"
                    data-category="pride" data-original-title="Popover Title">Pride</button>
            </div>
            <div id="similar-story-connect" style="margin-top: 20px">
            </div>
        </div>
    </div>
</div>