I am developing this site in laravel and I am having troubles when I try to use DataTables, for my design I am using AdminLTE and whenever I try to put datatables on the content the search bar, the page selector, the order by icons disappear. I am following the example ahead: https://datatables.net/examples/styling/bootstrap. The cdn's for this datatable deforms my adminLTE. https://i.imgur.com/6fY7tMF.png
I've already tried to change cdn but I don't really think that that is the problem here.
------------------------HEAD--------------------------------
<head>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ config('app.name') }}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet">
</head>
------------------------BODY--------------------------------
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Gestão de Utilizadores
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
@yield('content')
<div class="table-reponsive box">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Password</th>
<th>Empresa</th>
<th>Conta</th>
<th>EDITAR</th>
<th>APAGAR</th>
</tr>
</thead>
<tbody>
@foreach($utilizadores as $utilizador)
<tr>
<td>{{ $utilizador->id }}</td>
<td>{{ $utilizador->username }}</td>
<td>{{ $utilizador->password }}</td>
<td>{{ $utilizador->empresa }}</td>
<td>@if($utilizador->type == 1) <b>Admin</b> @else User Normal @endif</td>
<td><a href = 'edituser/{{ $utilizador->id }}'>EDITAR</a></td>
<td><a href = 'edituser/{{ $utilizador->id }}'>APAGAR</a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
I expect something like the example ('https://datatables.net/examples/styling/bootstrap'). When I am actually having this: https://i.imgur.com/Wnt7tcn.png
