I am in the process of building a webpage for my resume. To help me achieve a responsive design, I have turned to Bootstrap 4 but I am facing challenges when it comes to spacing different collapsible (div) elements.
After researching on w3schools, I discovered that using the HTML br tag can create a new line within a paragraph. However, this does not create a visible space between various elements.
Below is a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<p></p>
<p>Some text here.</p>
</div>
</body>
</html>Currently, I am utilizing an empty p tag (as shown above) to create space between a collapsible element and the subsequent one. Are there any other methods to add space? Or is this approach independent of the viewport/device?