Manter a formatação do formulario Bootstrap quando executa o script de esconder div do javascript

Olá pessoal, sou novo em HTML, bootstrap e css. Fiz um script q esconde a div e depois mostra ela, essa div é um formulário feito em bootstrap.



O problema é q quando escondo a div e depois mostro novamente, através de um botão, ela volta sem a formatação de formulário em linha do bootstrap, alguém poderia me ajudar? Preciso que quando a div mostre novamente ela mostre com a formatação do bootstrap de formulário em linha.

*Bootstrap 4.



Segue abaixo os códigos do formulário e do script :



<div class="form-row col-md-12" id="esconder" style="display:none;">
<div class="form-group col-md-4">
<label for="inputNomeusuario">Usuário</label>
<input type="text" class="form-control" id="inputNomeusuario" placeholder="Entre com o usuário">
</div>
<div class="form-group col-md-4">
<label for="inputDatainclusao">Data da inclusão</label>
<input type="date" class="form-control" id="inputDatainclusao" readonly >
</div>
<div class="form-group col-md-4">
<label for="inputUltimaatt">Ultima atualização</label>
<input type="date" class="form-control" id="inputUltimaatt" readonly>
</div>
<div class="form-group col-md-8">
<label for="inputNome">Nome</label>
<input type="text" class="form-control" id="inputNome" placeholder="Entre com o nome completo">
</div>
<div class="form-group col-md-4">
<label for="inputCpf">CPF</label>
<input type="text" class="form-control" id="inputCpf" placeholder="Entre com o CPF">
</div>
<div class="form-group col-md-1">
<label for="inputEmpresa">Empresa</label>
<input type="number" class="form-control" id="inputEmpresa" placeholder="Codigo">
</div>
<div class="form-group col-md-7">
<label for="inputNomeempresa"> </label>
<input type="text" class="form-control" id="inputNomeempresa" placeholder="Escolha a empresa">
</div>
<div class="form-group col-md-4">
<label for="inputAtividade">Situação</label>
<select id="inputAtividade" class="form-control">
<option selected>Selecione...</option>
<option>Ativo</option>
<option>Inativo</option>
</select>
</div>
<div class="form-group col-md-12">
<label for="textareaMotivo">Motivo</label>
<textarea class="form-control" id="textareaMotivo" rows="3"></textarea>
</div>



------------------------------------------------------



<script>
function ativa(){
var div = document.getElementById('esconder')
/* se conteúdo está escondido, mostra e troca o valor do botão para: esconde */
if (div.style.display == 'none') {
document.getElementById("botao").value='esconde'
div.style.display = 'block'
} else {
/* se conteúdo está a mostra, esconde o conteúdo e troca o valor do botão para: mostra */
div.style.display = 'none'
document.getElementById("botao").value='mostra'
}
}
</script>