I'm having an issue where my text overflows the page at certain sizes. How can I prevent this from happening?
Despite my efforts to find a solution through Google and various attempts, I have been unsuccessful.
If you take a look at the screenshot I've provided, you'll see exactly what I mean. Below is the code causing this problem.
Thank you in advance!
https://i.sstatic.net/IPKR9.jpg
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde3fde2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="container">
<div class="shadow p-3 mb-5 bg-white rounded">
<table class="table">
<thead>
<tr>
<th scope="col" >CRN</th>
<th scope="col">Subject</th>
<th scope="col">Course</th>
<th scope="col">Credits</th>
<th scope="col">Title</th>
<th scope="col">Days</th>
<th scope="col">Times</th>
<th scope="col">Instructor</th>
<th scope="col">Attribute</th>
<th scope="col">Professor Difficulty</th>
<th scope="col">Professor Rating</th>
<th scope="col">Would Take Again</th>
</tr>
</thead>
<tbody>
{% for row in all_data %}
<tr>
<th><a href="https://selfserveprod.yu.edu/pls/banprd/bwckschd.p_disp_listcrse?term_in=202109&subj_in={{row['subj']}}&crse_in={{row['crse']}}&crn_in={{row['crn']}}" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="Click to get register for this CRN on the YU Banner Site.">{{row['crn']}}</a></th>
<td><strong>{{row['subj']}}</strong></td>
<td >{{row['crse']}}</td>
<td>{{row['cred']}}</td>
<td>{{row['title']}}</td>
<td>{{row['days']}}</td>
<td>{{row['time']}}</td>
<td>{{row['instr']}}</td>
<td>{{row['Attr']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{row['profDiff']}}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{row['profDiff']}}%
</div>
</div>
</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profRating']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profWouldTakeAgain']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>