bootstrap table not responsive for mobile

Question

ok so i had a table which the fonts where too big to use. so the bootstrap would just stop scrolling, at a point which led me into finding a fix here is the fix:

using css and media query i did this code:

@media screen and (max-width:768px){ 
#getting-started{/* the div or class id (my case div)/*
        font-size:12px;
    }

    #day{
        font-size:14px
    }
    #minutes{
        font-size:14px
    }
    #hours{
        font-size:14px
    }

i know its a basic fix but it worked fine for me

this is for those guys who searched the web and didn't find anything you just have to lower your font size using css.

p.s.

here is the html code

        <div id="getting-started">
  <div class="container table-responsive-xl">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-12 m-12 offset-lg-12 col-lg-12">
        <div class="card">
          <div class="card-header">
              <img class="card-img-top" src="cherries.png" alt="Card image cap">
              <h1>Next Event:</h1>

            <div class="card-body">

              <table class="table" summary="date and time for the next event">
                <tr>
                  <th scope="col-4">Days</th>
                  <th scope="col-4">Hours</th>
                  <th scope="col-4">Minutes</th>
                </tr>
                <tr>
                  <td id="day" class="display-4"></td>
                  <td id="hours" class="display-4"></td>
                  <td id="minutes" class="display-4"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
            </div>          

the problem is when you set the responsive in bootstrap the table won't continue to scroll if your fonts are too big for the screen, so if for example: ur using a font that is good for a large screen and its too big for small screen it will not continue to scroll the table. here you can find all the info about tables in bootstrap : https://getbootstrap.com/docs/4.4/content/tables/

Answer 1

<div> tag is not  closed properly. for Example

    <div class="card">
     <div class="card-header"></div>
     <div class="card-body"></div>
    </div>

Table Responsive tag:
<div class="table-responsive">
  <table class="table">

  </table>
</div>


Our code may be like this:
  <div class="container ">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 m-12 offset-lg-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table"> 
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


Kindly refer the following URL: [https://www.w3schools.com/bootstrap4/bootstrap_tables.asp][1]
[https://www.w3schools.com/bootstrap4/bootstrap_cards.asp][2]

            <div id="getting-started">
      <div class="container ">
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 m-12 offset-lg-12 col-lg-12">
            <div class="card">
              <div class="card-header">
                  <img class="card-img-top" src="cherries.png" alt="Card image cap">
                  <h1>Next Event:</h1>
              </div>
                <div class="card-body">
                    <div class="table-responsive-xl">
                      <table class="table" summary="date and time for the next event">
                        <tr>
                          <th scope="col-4">Days</th>
                          <th scope="col-4">Hours</th>
                          <th scope="col-4">Minutes</th>
                        </tr>
                        <tr>
                          <td id="day" class="display-4"></td>
                          <td id="hours" class="display-4"></td>
                          <td id="minutes" class="display-4"></td>
                        </tr>
                      </table>
                  </div>
                </div>   
             </div>
            </div>
          </div>
        </div>
      </div>



  [1]: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp
  [2]: https://www.w3schools.com/bootstrap4/bootstrap_cards.asp