How to disable loader / spinner after page load with Bootstrap 4? - html

I‘ve created a page with a data table with Bootstrap 4. In some cases the table is very large and the data retrieval takes a few seconds. Therefore I‘ve added a spinner / loader which shows that the page is still loading. However, the spinner does not stop as expected when the page is completely loaded and I can't find a note in the documentation how to implement this. Am I using the "div" element incorrectly or do I need JavaScript? - Unfortunately I have 0% knowledge of JavaScript. Or is this a browser/OS specific issue? (I'm using Firefox / Linux).
<!doctype html>
<html lang="en">
<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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, Table!</title>
</head>
<body>
<div class="container">
<div class="pt-3">
<span class="h1 mr-3">Large Table</span>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="table-responsive pt-3">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Name 1</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 2</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 3</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>


You can use
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
});
OR
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
});
or if you want to hide loader after checking the table is present in DOM or not, then you can check if the table is presnt or not by its tag or selctor length.
Something like this.
var yourElement= document.getElementById("yourElement");
if(yourElement){
// Element exists
}
By jQuery
if ($( "#yourElement").length) {
// element exists
}
$(document).ready(function() {
$('.spinner-border').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, Table!</title>
</head>
<body>
<div class="container">
<div class="pt-3">
<span class="h1 mr-3">Large Table</span>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="table-responsive pt-3">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Name 1</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 2</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Name 3</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Related

how can I centered text in bootstrap table? [duplicate]

This question already has answers here:
Centering text in a table in Twitter Bootstrap
(10 answers)
Closed 10 months ago.
In this table how can I align the text in center? text-center is not working.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>

You have to apply the Bootstrap-class: text-center to every single td not the the table! Alternativly you could consider creating a custom css with td { text-align: center; } which will be shorter and easier then applying the bvootstrap-class to every single td.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td class="text-center">name</td>
<td class="text-center">supplier </td>
<td class="text-center"><button>Delete</button> </td>
</tr>
</tbody>
</table>

You can use the classname text-center.
<div class="text-center">
I am centered
</div>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<table class="table table-striped">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
Or in CSS put this in the parent container
display: flex;
align-items: center;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody align="center">
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
add align="center" to the tbody

use css classes, go checkout centertag - w3schools
.class{text-align:center;}
<tbody>
<tr>
<td class="center">name</td>
<td class="center">supplier </td>
<td><button class="center">Delete</button> </td>
</tr>
</tbody>`

I cannot connect to bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<h1 class="header">My Booklist</h1> <br>
<body>
<form>
<input class="book"></input><br><br>
<input class="author"></input><br><br>
<input class="isbn"></input><br><br>
<button class="btn">Submit</button>
</form>
<br>
<br>
<!-- <table class="tbl" >
<tr >
<th>book</th>
<th>author</th>
<th>isbn</th>
</tr>
</table>
<table class="table"> -->
<thead class="tbl">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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>
</body>
</html>
please help me I am stuck because of this issue while learning. I have tried downloading and adding CDN but nothing is working for me to connect bootstrap. I have been trying to make an app using HTML, CSS, js but stuck in this very silly problem.
please help me I am stuck because of this issue while learning. I have tried downloading and adding CDN but nothing is working for me to connect bootstrap. I have been trying to make an app using HTML, CSS, js but stuck in this very silly problem.

Write the JavaScript CDNs just above the closing of the body tag. Try the code I wrote and you will see it works.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<h1 class="header">My Booklist</h1> <br>
<body>
<form>
<input class="book"></input><br><br>
<input class="author"></input><br><br>
<input class="isbn"></input><br><br>
<button class="btn btn-primary">Submit</button>
</form>
<br>
<br>
<!-- <table class="tbl" >
<tr >
<th>book</th>
<th>author</th>
<th>isbn</th>
</tr>
</table>
<table class="table"> -->
<thead class="tbl">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

your code seems ok except JavaScript cdn version. Your bootstrap css version is 5.0.0 where as your JavaScript version is 3.4.1.
You can update your "atest compiled JavaScript" cdn to
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Instead of
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
I pray this fix may help you. Thank you.

Bootstrap Table Plugin export option

I'm using https://bootstrap-table.com/ plugins to search, have a pagination, sort a table in my HTML page, every feature work except for the export function. I've been lurking on forums for a few hours now and the only answer that seem to work is just use another plugin, but Bootstrap tables are really friendlier to the eye in my opinion.
I've run and added the requirements for the plugin itself, and added the https://github.com/hhurz/tableExport.jquery.plugin requirements too but i can't find a way to get to this result https://live.bootstrap-table.com/example/extensions/export.html, even with another online editor it fails, although i can't see any resources being loaded locally...
For the moment my HTML page looks like this (I'm working on Django if that matters in any ways):
<!DOCTYPE html>
<html lang="en">
<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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Loading main stylesheets -->
<link rel="stylesheet" type="text/css" href="{% static 'main/main.css' %}">
<!-- Loading icon -->
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
</head>
<body>
<div class="container-fluid">
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table class="table" id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-search="true"
data-side-pagination="server"
data-click-to-select="true"
data-toolbar="#toolbar"
data-show-toggle="true"
data-show-columns="true"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-en-US.min.js"></script>
</body>
</html>
But no way to see the export button, am i missing some dependencies or something?
I can include my working tree but again, it's a basic Django app tree, since all resources look like they are being loaded from URLs, and even the top URLs from the official example https://examples.bootstrap-table.com/index.html#extensions/export.html#view-source don't help...
Thanks in advance for any help you could provide

As I can see you forgot to add a lot of libraries from the example. See more in snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- just added all required libraries from your example site -->
<link href="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.17.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="toolbar" class="select">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table class="table" id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-search="true"
data-side-pagination="server"
data-click-to-select="true"
data-toolbar="#toolbar"
data-show-toggle="true"
data-show-columns="true"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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>
</body>
</html>

How to make a large table responsive

My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout.
How can I set this table to be displayed fine in the mobile
This is my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row clearfix">
<div class="col-xs-12">
<div class="card">
<div class="body">
<div class="table-responsive">
<table id="myTable" class="table table-bordered table-striped table-hover js-basic-example dataTable">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

Another option might be to enable horizontal scrolling for the table by adding overflow-x:auto; to the stylesheet for the parent div.
div.table-responsive {
overflow-x:auto;
}

Don't try to fight fisics, my friends. Maybe you can hide the less important columns using media queries, show 3 instead of 6

How to position button to bottomright of table when width is auto?

I have included my plunker link here https://plnkr.co/edit/TD6iQJvIExwTeJ9QPbRS?p=preview
I want the submit button to appear at the right bottom of the table.My table width changes according to the data. My table's width is auto. So how will i position the button to right bottom everytime.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<div class="col-sm-1">
<button class="btn btn-success pull-right">SUBMIT</button>
</div>
</div>
</body>
</html>

You can try this code.
When trying remove last tr from tbody and check the width and button position.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July jan</td>
<td>Dooley Hello</td>
<td>julyjan12345678#example.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right"><button class="btn btn-success pull-right">SUBMIT</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

Change the Grid class to col-sm-12 and make the width of the table to 100%.
Added the Preview,
https://plnkr.co/edit/M3p2bpj460niGCu59irR?p=preview