I just wanted to move from bootstrap 3 to bootstrap 4 in order to get equally sized divs in a row thanks to flexbox. I downloaded the precompiled files from https://getbootstrap.com/docs/4.6/getting-started/download/.
Then I put them in my static folder and ran manage.py collectstatic on my django project. I included them as links in my file.
The rendered html looks like this (I only reduced it for readibiity):
<!DOCTYPE html>
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-3.5.1.min.js"><\/script>')</script>
<html>
<head>
<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 -->
<meta name="description" content="">
<meta name="author" content="">
<title>My project</title>
<link rel="stylesheet" href="/static/boot/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/boot/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<nav aria-label="breadcrumb" class="nav navbar-nav navbar-left">
<ul class="breadcrumb">
<li class="active">Dashboard</li>
</ul>
</nav>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0 main">
<h2>My Dashboard</h2>
<br>
<div class="container-fluid">
<div class="row">
<div class="col">
<h4>My bills</h4>
<div id="hccontainer_medabr" style="height:200px;"></div>
</div>
<div class="col">
<h4>My brother's bills</h4>
<div id="hccontainer_medjan" style="height:200px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/static/highcharts/highcharts.src.js"></script>
<script type="text/javascript" src="/static/highcharts/modules/bullet.src.js"></script>
<script type="text/javascript" src="/static/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="/static/highcharts/modules/solid-gauge.js"></script>
<script>
Highcharts.chart('hccontainer_medabr', {"chart": {"displayErrors": true, "type": "solidgauge", "renderTo": "hccontainer_medabr", "plotBorderWidth": 0}, "title": false, "pane": {"center": ["50%", "85%"], "size": "130%", "startAngle": -90, "endAngle": 90, "background": {"backgroundcolor": "Highcharts.defaultOptions.legend.backgroundColor || '#EE'", "innerRadius": "60%", "outerRadius": "100%", "shape": "arc"}}, "exporting": {"enabled": false}, "tooltip": {"enabled": true}, "yAxis": {"stops": [[0.2, "#55BF3B"], [0.5, "#DDDF0D"], [0.8, "#DF5353"]], "min": 0, "max": 1500, "lineWidth": 0, "tickWidth": 0, "minorTickInterval": "null", "tickAmount": 2, "title": {"y": 40, "text": "Nicht eingereicht"}, "labels": {"y": 16}}, "credits": {"enabled": false}, "plotOptions": {"solidgauge": {"dataLabels": {"useHTML": true, "borderWidth": 0, "y": 6}}}, "series": [{"name": "Serie: noch nicht eingereicht", "data": [1664.54], "dataLabels": {"format": "<div style=\"text-align:center\"><span style=\"font-size:20px\">{y}</span><br/><span style=\"font-size:12px;opacity:0.4\">\u20ac</span></div>"}, "tooltip": {"valueSuffix": " \u20ac"}}]});
Highcharts.chart('hccontainer_medjan', {"chart": {"displayErrors": true, "type": "solidgauge", "renderTo": "hccontainer_medabr", "plotBorderWidth": 0}, "title": false, "pane": {"center": ["50%", "85%"], "size": "130%", "startAngle": -90, "endAngle": 90, "background": {"backgroundcolor": "Highcharts.defaultOptions.legend.backgroundColor || '#EE'", "innerRadius": "60%", "outerRadius": "100%", "shape": "arc"}}, "exporting": {"enabled": false}, "tooltip": {"enabled": true}, "yAxis": {"stops": [[0.2, "#55BF3B"], [0.5, "#DDDF0D"], [0.8, "#DF5353"]], "min": 0, "max": 1500, "lineWidth": 0, "tickWidth": 0, "minorTickInterval": "null", "tickAmount": 2, "title": {"y": 40, "text": "Nicht eingereicht"}, "labels": {"y": 16}}, "credits": {"enabled": false}, "plotOptions": {"solidgauge": {"dataLabels": {"useHTML": true, "borderWidth": 0, "y": 6}}}, "series": [{"name": "Serie: noch nicht eingereicht", "data": [106.55], "dataLabels": {"format": "<div style=\"text-align:center\"><span style=\"font-size:20px\">{y}</span><br/><span style=\"font-size:12px;opacity:0.4\">\u20ac</span></div>"}, "tooltip": {"valueSuffix": " \u20ac"}}]});
</script>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-3.5.1.min.js"><\/script>')</script>
<script>window.jQuery || document.write('<script src="/static/boot/js/jquery.min.js"><\/script>')</script>
</body>
</html>
When I use classes like "col-md-3" and so on, I get the divs with the gauges in one row, but if I use just "col", each of them takes a row and they are placed beneath each other. As I said, I reduced the code for you. Actually I want to place five gauges in this row, but I don't know how to enable the automatic adjustment of flexbox or if I somehow have to enable flexbox. I hoped it would be included in the precompiled version.
What do I miss?