Bootstrap 5
Bootstrap 5
mcoogan62
Posts: 3Questions: 0Answers: 0
After adding the css files for DataTables my menu is no longer right justified and all content that was centered on pages is now left justified. It is like the Bootstrap Sass generated CSS is not being used. Below is my head and foot sections:
Head
<!DOCTYPE html>
<html lang="en">
<head>
<title>"<?php echo $title; ?>"</title>
<meta name="og:title" content="The Garland Cemetery" />
<meta name="og:type" content="website" />
<meta name="og-url" content="http://www.garlandcemetery.com" />
<meta name="og:image"
content="https://www.garlandcemetery.com/images/Header-1.png" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no" />
<meta name="description" content="<?php echo $description; ?>" />
<meta name="author" content="M-PC Web Development" />
<meta name="keywords" content="" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link href="DataTables/DataTables-1.10.25/css/dataTables.bootstrap5.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="css/style.css?v=2" rel="stylesheet" />
<!-- Fav icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#6c757d">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
</head>
Foot
<!-- Put scripts here so pages load faster -->
<!-- Latest JQuery library -->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Datatable extensions -->
<script src="DataTables/datatables.min.js"></script>
<script src="DataTables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function()
{
$("#manager a.nav-link:contains('Home')").addClass('active');
$("#view-docs a.nav-link:contains('View Docs')").addClass('active');
$("#view7 a.dropdown-item:contains('View Section 7')").parent().parent().parent().addClass('active');
$("#view8 a.dropdown-item:contains('View Section 8')").parent().parent().parent().addClass('active');
$("#view9 a.dropdown-item:contains('View Section 9')").parent().parent().parent().addClass('active');
$("#search-interred a.dropdown-item:contains('Search by Interred')").parent().parent().parent().addClass('active');
$("#search-owner a.dropdown-item:contains('Search by Owner')").parent().parent().parent().addClass('active');
$("#update-7 a.dropdown-item:contains('Update Section 7')").parent().parent().parent().addClass('active');
$("#update-8 a.dropdown-item:contains('Update Section 8')").parent().parent().parent().addClass('active');
$("#update-9 a.dropdown-item:contains('Update Section 9')").parent().parent().parent().addClass('active');
$("body").click(function(event)
{
$(".navbar-collapse").collapse("hide");
});
$('#Section_7').DataTable({searching:false, responsive:true});
$('#Section_8').DataTable({searching:false, responsive:true});
$('#Section_9').DataTable({searching:false, responsive:true});
});
</script>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Replies
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Here is a link to the site. Do not make any attempts at updating as the secretary would shoot me. The menu should be right aligned at the top. The Welcome message, change email and passwords links and Go to the website should all be centered on the page. This all broke when I added the database css file. It is still broken even after i commented it out.
https://garlandcemetery.com/dmt7zgfi2qi/SandBox/manager.php
Problem has been solved. No issues with DataTables for Bootstrap 5. Thanks for the help anyways.