My goal was to transition from using bootstrap 3 to bootstrap 4 so that I could achieve uniform-sized divs in a row by utilizing flexbox. I acquired the precompiled files from https://getbootstrap.com/docs/4.6/getting-started/download/.
After downloading the files, I placed them in my static folder and executed manage.py collectstatic on my django project. Subsequently, I included them as links in my file.
The resulting html content has been condensed for clarity:
<!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">
...
<script type="text/javascript" src="/static/highcharts/highcharts.src.js"></script>
<script type="text/javascript" src="/static/highcharts/modules/bullet.src.js"></script>
...
</div>
</body>
</html>
When assigning classes like "col-md-3" to the div elements, the gauges are displayed in a single row. However, if I only use the "col" class, each gauge takes up a separate row below the previous one. Although this is just a portion of the code, my ultimate aim is to have five gauges in a row, but I am unsure about how to enable automatic adjustment through flexbox or whether I need to activate flexbox in some way. I had assumed it would be integrated into the precompiled version.
What am I overlooking?