Currently working on a display layout using Bootstrap 4, specifically utilizing cards.
The issue I'm facing is that the text exceeds the limit of the card, causing it to overflow. Is there a solution to make the text automatically wrap to the bottom instead?
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="scrolling-wrapper">
<!-- Board card -->
<div class="card bg-light" style="width: 320px;">
<div class="card-body">
<div class="row">
<p style="font-weight: 600; font-size: 17px;" class="text-dark">
To Do
</p>
</div>
<!-- Board task -->
<div class="row mb-2">
<div class="board-content">
<div class="row">
<div class="col-6">
<p class="brandName card-title card-text">
Register asokdasokd apodk saoksa dokasokdpask asdasa gdffgfdfgdffgdfgfddffgf gdgdfgdf
</p>
</div>
<div class="col-6 text-right">
<button class="btn btn-primary">tes</button>
</div>
</div>
</div>
</div>
<!-- Button create task -->
<div class="row justify-content-center">
<button class="btn p-0 mt-2 btn-transparent btn-create-task" data-toggle="modal" data-target=".bd-example-modal-lg">
<i class="fas fa-plus"></i> Create Task
</button>
</div>
</div>
</div>
<!-- End of board -->