I am trying to use Bootstrap with a CF site that makes heavy use of CFChart. Bootstrap has worked fine in the past with pages that don't use CFChart.
Bootstrap requires 3 meta tags to appear first in the HTML header:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
With a CFChart tag in the page, tags are injected into the header above the Bootstrap tags, thus breaking some of the Bootstrap functionality:
<!DOCTYPE html>
<html lang="en">
<head><script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/cf_scripts/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/cf_scripts/scripts/ajax";
_cf_jsonprefix='//';
_cf_websocket_port=8579;
_cf_flash_policy_port=1243;
_cf_clientid='F6BB2B1167EC6583C9AE1D7B3272CA1E';/* ]]> */</script><script type="text/javascript" src="/cf_scripts/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/chart/cfchart-server.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
How do I fix this or get Bootstrap to work without the 3 tags first in the header?
![Robert Priest - People Like You and Me (2024) [Hi-Res]](http://www.dibpic.com/uploads/posts/2025-07/1751805912_lhttl01vuwv8a_600.jpg)
