Is there a way to make BootStrap 5 columns expand in size when the content inside of them overflows, rather than letting it collide with other elements?
https://i.sstatic.net/WIn0F.png
The current issue I'm facing is that my columns (purple) allow their content to overflow, causing overlapping with adjacent elements. Ideally, I want the columns to dynamically adjust in size based on their contents.
Here's the HTML structure for rows and columns:
<div class="row">
<div class="col">
<h1 class="header">User</h1>
<div class="card card-large border-0 me-1">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-user-pen" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Username: </a>
<a class="header row pt-2">Plan: </a>
<a class="header row pt-2">Discord: </a>
<a class="header row pt-2">Date of registration: </a>
<a class="header row pt-2">Used searches: /</a>
</div>
</div>
<div class="mt-2">
<a class="btn shadow text-white me-1" style="background-color: #7289da">Link Discord</a>
<a class="btn btn-secondary shadow text-white me-1">Change password</a>
<a class="btn btn-danger shadow text-white" data-bs-toggle="modal" data-bs-target="#logout">Log out</a>
<div class="modal fade" id="logout" data-bs-backdrop="logout" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style=" width: 25rem">
<div class="modal-content text-white">
<div class="modal-body" style="background-color: #0e0e0e">
<div class="container">
<div class="row justify-content-center">
<div class="col-1" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-triangle-exclamation" style="font-size: 50px;"></i>
</div>
<div class="col-8 mt-4">
Are you sure you wish to log out?
</div>
</div>
</div>
</div>
<div class="modal-footer border-0 justify-content-center" style="background-color: #0e0e0e">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button data-bs-dismiss="modal" type="button" class="btn btn-danger" @click="deleteCookie()">Log out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>