Ese es el código que tengo hecho, solo que no tengo la idea como mostrar en la tabla de bootstrap lo que guardo en los arreglos
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script >
var nombre=[];
var apellido=[];
var telefono=[];
var email=[];
var i=0;
function insertarDatos(){
nombre[i]=document.getElementById("nombre").value;
apellido[i]=document.getElementById("nombre").value;
telefono[i]=document.getElementById("nombre").value;
email[i]=document.getElementById("nombre").value;
i++
alert("Ha insertado Los datos correctamente");
}
function insertarDatos(){
}
</script>
</head>
<body>
<div class="container text-center bg-inverse text-white ">
<h1 class="font-weight-normal">Bienvenido a Bootstrap 4</h1>
</div>
<div class="container text-left pt-5">
<h2>Registro de datos</h2>
<form>
<div class="form-group row col-12 ">
<label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="nombre" placeholder="Ingresa Tu Nombre">
</div>
</div>
<div class="form-group row col-12 ">
<label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Apellido</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="apellido" placeholder="Ingresa Tu Apellido">
</div>
</div>
<div class="form-group row col-12 ">
<label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Telefono</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="telefono" placeholder="Ingresa Tu Telefono">
</div>
</div>
<div class="form-group row col-12 ">
<label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Correo</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="correo" placeholder="Ingresa Tu correo">
</div>
</div>
<div class="d-flex justify-content-sm-center">
<button type="button" class="btn btn-outline-success " onClick="insertarDatos();">Insertar</button>
</div>
</form>
</div>
<div class="container">
<div class="container text-center bg-inverse text-white col-12 pt-5 my-3">
</div>
<div class="mt-5">
<h2>Tabla de datos Registrado </h2>
<table class="table mt-3">
<thead class="thead-inverse">
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Telefono</th>
<th>Correo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>