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>