I am in the process of developing a basic web application using Bootstrap that involves taking user input on a form, sending it to a database, and then displaying the data in a table below the form. The main challenge I am facing relates to the styling aspect of the project. My objective is to clearly demarcate the two sections as illustrated in my desired output compared to the current setup (refer to the image).
Despite researching multiple solutions on platforms like Stack Overflow and others, I have been unable to find a suitable resolution thus far. I suspect that the issue might be straightforward (even though I'm not entirely certain) and hope that a simple fix exists for the problem.
Below is an excerpt from my HTML:
<!-- Omitted default bootstrap script/css calls for simplicity -->
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css"></script>
</head>
<body class="container">
<div class="logo">
<h1 class="headline">Text Items</h1>
</div>
<div class="main">
<!-- Form content here -->
</div>
</body>
</html>
(Default bootstrap script/css calls were excluded to maintain clarity)
I attempted segregating each element into separate <div> containers but encountered no success. Additionally, when populating the table with data, the white background extended along with the table rendering. As such, I aimed to implement a scrollable table within the second <div>.
The following snippets represent the CSS configurations utilized:
<!-- CSS code snippet goes here --> The final outcome comprises incorporating two distinct <div>s which house the form component and the resultant data table respectively. Although seemingly uncomplicated, I aim to optimize this structure accordingly. Any advice or guidance would be greatly appreciated. Thank you!