I am looking for a way to structure my contact page using Bootstrap.
https://i.sstatic.net/e3TCu.png
If you're interested, the code for this layout can be accessed here: https://codepen.io/MatteCrystal/pen/xxXpLmK
<div class="container">
<div class="row">
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title: </b>
</div>
<div class="col minWidth350">
Info that spans <br />
multiple lines
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 2: </b>
</div>
<div class="col minWidth350">
More info, providing details about a subject to the user
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 3: </b>
</div>
<div class="col minWidth350">
Even more detailed information, essential for optimal user experience.
</div>
</div>
</div>
</div>
Primarily, I want each section of the contact page to consist of a title and an accompanying informational content block. On smaller screens, I prefer the titles to appear above the respective content blocks to save space.
To ensure uniformity, the title elements are designed to be the same size, while the text sections have a minimum size requirement but can expand as needed.
The challenge arises when the columns stack on top of each other due to size constraints. In such cases, the alignment of the title element appears awkward if not adjusted. Refer to this image for clarification: https://i.sstatic.net/Vz5Ba.png
Do you know of any built-in Bootstrap classes or elegant solutions that can address this issue? I'm seeking a flexible solution that adapts dynamically without manual adjustments, even if the size constraints change. It should be capable of detecting when columns are stacked vertically instead of horizontally, depending on the screen size and other factors.