bootstrap-table - responsive settings

Viewed 88

Using bootstrap-table with bootstrap 5.0.1.

Is there a way to:

  1. change the breakpoint where bootstrap-table enters responsive mode? I'd like to have the horiz scrollbar display when I hit bootstrap's md breakpoint.

  2. preserve the column widths when the horiz scrollbar is displayed? Right now, the column widths are compressing, but I want to maintain the widths I set in regardless of the breakpoint.

                             <table class="m-auto"
                                                 data-toggle="table"
                                                 data-pagination="true"
                                                 data-search="true">
    
                             <thead>
                             <tr>
                                 <th data-field="id" data-width="100" data-width-unit="px"
                                         data-sortable="true" data-field="id">#</th>
                                 <th data-field="col-02" data-width="200" data-width-unit="px">COL 02 - 20</th>
                                 <th data-field="col-03" data-width="200" data-width-unit="px">COL 03 - 20</th>
                                 <th data-field="col-04" data-width="200" data-width-unit="px">COL 04 - 30</th>
                                 <th data-field="col-05" data-width="300" data-width-unit="px">COL 05 - 10</th>
                                 <th data-field="col-06" data-width="300" data-width-unit="px">COL 06 - 10</th>
                             </tr>
                             </thead>
    
1 Answers

You can alter bootstrap by overriding it’s scss. But are you sure that you should use bootstrap at all when you want this. You can easily style an html table to look like bootstraps. If you don’t like it’s breakpoints and it’s compression what’s the point?

Related