Just starting out with Bootstrap and have made some progress. However, the bootstrap classes I'm using are not rendering properly. What could be the issue?
<div class="position-absolute bottom-0 end-0 border border-dark">
https://i.sstatic.net/VTlQQ.png
Interestingly, when I use regular CSS styling, everything works as expected.
<div style="position:absolute; bottom: 0; right: 0; border-style: solid;">
https://i.sstatic.net/mWQfT.png Check out the complete HTML code snippet below:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>{{ title }}</title>
</head>
<body>
<div id="background-div" class="position-relative mx-10">
<div id="title-div">
<h1>Title</h1>
<h3>One-liner goes here</h3>
<hr>
</div>
<div id="content-div" style="max-width: 66%;">
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
<div class="position-absolute bottom-0 end-0 border border-dark">
<div id="legend-div">
legend goes here
</div>
<div id="scale-bar-div">
scalebar goes here
</div>
</div>
</div>
</body>
</html>