I have spent several hours trying to figure out how to achieve this, but still haven't found the solution.
I have a form that I believe doesn't look very good:
So, I attempted to center the form on the page and place the footer.php at the bottom-center.
form.php
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well">
<div class="page-header">
<h3>Add Preference Value</h3>
</div>
<form method="post">
<div class="form-group">
<label for="kt">Value Description</label>
<input type="text" class="form-control" id="kt" name="kt" required>
</div>
<div class="form-group">
<label for="jm">Value Amount</label>
<input type="text" class="form-control" id="jm" name="jm" required>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" onclick="location.href='nilai.php'" class="btn btn-success">Go Back</button>
</form>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
</div>
</div>
<?php
include_once 'footer.php';
?>
footer.php
<footer class="text-center">© 2017</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#tabeldata').DataTable();
});
</script>
</body>
</html>
I also discovered some classes in bootstrap.css, which are:
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 24px;
border-radius: 5px;
}
.well-sm {
padding: 9px;
border-radius: 2px;
}
.text-center {
text-align: center;
}