Responsive Text Boxes Activated by Buttons (Pills Nav Bootstrap)

HTML

<!-- Pills nav -->

            <ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">

                <li class="nav-item" role="presentation">

                    <img src=../../../images/secretaria-missao-logo.png>

                    <a

                        class="nav-link active border border-primary"

                        id="ex3-tab-1"

                        data-mdb-toggle="pill"

                        href="#ex3-pills-1"

                        role="tab"

                        aria-controls="ex3-pills-1"

                        aria-selected="true"

                        >

                        <strong>Missão</strong></a

                    >

                </li>

                <li class="nav-item" role="presentation">

                    <img src=../../../images/secretaria-visao-logo.png>

                    <a

                        class="nav-link border border-primary"

                        id="ex3-tab-2"

                        data-mdb-toggle="pill"

                        href="#ex3-pills-2"

                        role="tab"

                        aria-controls="ex3-pills-2"

                        aria-selected="false"

                        ><strong>Visão</strong></a

                    >

                </li>

                <li class="nav-item" role="presentation">

                    <img src=../../../images/secretaria-valores-logo.png>

                    <a

                        class="nav-link border border-primary"

                        id="ex3-tab-3"

                        data-mdb-toggle="pill"

                        href="#ex3-pills-3"

                        role="tab"

                        aria-controls="ex3-pills-3"

                        aria-selected="false"

                        ><strong>Valores</strong></a

                    >

                </li>

            </ul>

            <div style="text-align:center">

                <div class="tab-content" id="v-pills-tabContent">

                <div class="tab-pane fade show active" id="ex3-pills-1" role="tabpanel" aria-labelledby="ex3-pills-1-tab">

                    Promover a preservação, a conservação e a recuperação dos ecossistemas, desenvolvendo e implementando as políticas públicas relativas à qualidade ambiental, à biodiversidade, aos recursos hídricos e ao saneamento, visando à manutenção do equilíbrio ecológico, ao uso racional dos recursos naturais, à qualidade de vida e ao desenvolvimento sustentável, para as gerações presentes e futuras.

                </div>

                <div class="tab-pane fade" id="ex3-pills-2" role="tabpanel" aria-labelledby="ex3-pills-2-tab">

                    Ser referência na gestão das políticas públicas de meio ambiente, saneamento e recursos hídricos da Região dos Lagos.

                </div>

                <div class="tab-pane fade" id="ex3-pills-3" role="tabpanel" aria-labelledby="ex3-pills-3-tab">

                    Governança. Integridade. Eficiência. Transparência. Inovação. Participação Social. Responsabilidade Compartilhada.

                </div>

                </div>

            </div>

            <!-- Pills nav FIM -->