I am using Bootstrap 5 to design a layout that changes based on the width of the screen. When the screen width is greater than or equal to 992 pixels, a table is displayed in the sidebar and some text is shown in the main content area. However, if the screen is resized to less than 992 pixels, the sidebar disappears, and both the table and text are displayed as tabbed panels in the main content area. Here is the code for this layout:
<main class="container">
<div class="row">
<aside class="d-none d-lg-block col-lg-4">
<table class="table table-striped">
<thead>
<tr>
<th colspan="2">My Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td>2023</td>
</tr>
<tr>
<td>Make</td>
<td>Honda</td>
</tr>
<tr>
<td>Model</td>
<td>Civic</td>
</tr>
</tbody>
&
When the screen is less than 992px wide, the text only displays in the main content area if that tab was selected. This issue seems to be related to the ".active" class that Bootstrap uses to add/remove tabs when they are clicked. I am unsure how to resolve this problem.
Check out the CodePen link for reference.