Content written on a responsive button

Question

I have a bootstrap Collapse which is the following already modified code.

           <div class="card">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
                            Planejamento e gestão de programas e projetos socioambientais
                            </button>
                        </h5>
                    </div>
                    <div id="collapse6" class="collapse " aria-labelledby="headingOne" data-parent="#DisciplinasObrigatórias">
                        <div class="card-body">
                        <p>Créditos: 2<br>Docente: Alexandre Túlio Amaral Nascimento </p>
                        <p>Ementa: Diferenciação entre programas e projetos de pesquisa, extensão e monitoramento. Passo a passo da elaboração de projetos: título, introdução, objetivos, 
                        justificativas, metodologias, impactos esperados, cronograma e orçamento. Ferramentas de gestão de projetos socioambientais. Elaboração de projetos.<br>
                        Bibliografia:<br>
                        BURSZTYN, M. A.; BURSZTYN, M. Fundamentos de Política e Gestão Ambiental: caminhos para a sustentabilidade. 1. ed. Rio de Janeiro: Garamond, 2013. <br>
                        FREITAS, J. Sustentabilidade: direito ao futuro. 1. ed. Belo Horizonte. Fórum, 2011. <br>
                        MCSHANE, T. O.; WELLS, E. M. P. Getting Biodiversity Projects to Work: towards a more effective conservation and development. New York: Columbia University Press, 2004. <br>
                        PIRATELLI, A. J.; FRANCISCO, M. R. Conservação da Biodiversidade: dos conceitos às ações. 1. ed. Rio de Janeiro: Technical Books, 2013. <br>
                        RAPS 2017 – Rede de Ação Política Pela Sustentabilidade. Empreendendo cidades e territórios sustentáveis. Disponível em: . Acesso em: 12 mai. 2018, 10:03:00. <br>
                        SILVA, E. M. S.; PENEIREIRO, F. M.; STRABELI, J.; CARRAZZA, L. R. Guia de Elaboração de Pequenos Projetos Socioambientais para Organizações de Base Comunitária. Brasília: Instituto Sociedade, População e Natureza (ISPN), 2014.
                        </p>
                        </div>
                    </div>
                </div>

But when I put to mobile what is written on the button is "off the screen" as if it is not Responsive. Someone can help me

Answer 1

Add the property to your CSS:

.btn{
    white-space: normal;
}

See if it is necessary to add the !important also:

.btn{
    white-space: normal !important;
}

Example:

.btn{
    white-space: normal !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="card">
  <div class="card-header" id="headingOne">
      <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
          Planejamento e gestão de programas e projetos socioambientais Planejamento e gestão de programas e projetos socioambientais
          </button>
      </h5>
  </div>
  <div id="collapse6" class="collapse " aria-labelledby="headingOne" data-parent="#DisciplinasObrigatórias">
      <div class="card-body">
      <p>Créditos: 2<br>Docente: Alexandre Túlio Amaral Nascimento </p>
      <p>Ementa: Diferenciação entre programas e projetos de pesquisa, extensão e monitoramento. Passo a passo da elaboração de projetos: título, introdução, objetivos, 
      justificativas, metodologias, impactos esperados, cronograma e orçamento. Ferramentas de gestão de projetos socioambientais. Elaboração de projetos.<br>
      Bibliografia:<br>
      BURSZTYN, M. A.; BURSZTYN, M. Fundamentos de Política e Gestão Ambiental: caminhos para a sustentabilidade. 1. ed. Rio de Janeiro: Garamond, 2013. <br>
      FREITAS, J. Sustentabilidade: direito ao futuro. 1. ed. Belo Horizonte. Fórum, 2011. <br>
      MCSHANE, T. O.; WELLS, E. M. P. Getting Biodiversity Projects to Work: towards a more effective conservation and development. New York: Columbia University Press, 2004. <br>
      PIRATELLI, A. J.; FRANCISCO, M. R. Conservação da Biodiversidade: dos conceitos às ações. 1. ed. Rio de Janeiro: Technical Books, 2013. <br>
      RAPS 2017 – Rede de Ação Política Pela Sustentabilidade. Empreendendo cidades e territórios sustentáveis. Disponível em: . Acesso em: 12 mai. 2018, 10:03:00. <br>
      SILVA, E. M. S.; PENEIREIRO, F. M.; STRABELI, J.; CARRAZZA, L. R. Guia de Elaboração de Pequenos Projetos Socioambientais para Organizações de Base Comunitária. Brasília: Instituto Sociedade, População e Natureza (ISPN), 2014.
      </p>
      </div>
  </div>
</div>

By default the class .btn Bootstrap has the property white-space equal to nowrap, preventing the breaking of spaces in new line when text exceeds button width.