I am creating a simple Express webserver that serves a landing page made with bootstrap, but I can't get any Flexbox examples to work..
Below is my landing page, is there anything I am not seeing? I have checked that jQuery and Bootstrap links are working. I have also viewed the page in Firefox, Chrome and Edge.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Homepage</title>
<!-- STYLES -->
<link rel="stylesheet" href="../public/styleshee/bootstrap.min.css"/>
<link rel="stylesheet" href="../public/stylesheets/main.css" />
</head>
<body>
<div class="d-flex justify-content-around">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<button id="test-btn" class="btn btn-success">Button</button>
<!-- SCRIPTS-->
<script src="../public/javascripts/jquery.min.js"></script>
<script src="../public/javascripts/bootstrap.min.js"></script>
<script src="../public/javascripts/index.js"></script>
</body>
</html>
Here is a screenshot of the output:
As you can see justify-content-around is not behaving as expected. I have tried several Flexbox classes with the same results.
Aucun commentaire:
Enregistrer un commentaire