Responsive Table Handling in Twitter Bootstrap

Responsive table in bootstrap

You should check Bootstrap Docs: https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables

Simply wrap your table with .table-responsive

Basic example:

<div class="table-responsive">
    <table class="table">
       ...
    </table>
</div>

You can have breakpoint specific responsive table using class table-responsive{-sm|-md|-lg|-xl}

Responsive Table glitch with Twitter Bootstrap

remove inline style in tr & Add class table like table

<tr /*style="display:block"*/><td class="elist-title"><a href="/events/winter/">Winter</a></td><td class="elist-date">27 February 2016 </td><td class="elist-time">10:00am - 4:00pm</td><td class="elist-with">Gordon Peterson </td><td class="elist-cost"></td></tr>

<table class="table">

https://jsfiddle.net/ppq3xxwv/1/

Responsive table navigation bar with twitter bootstrap

What about a button group?

<div class="btn-group" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Back</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">First</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Previous</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Next</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Last</button>
  </div>
  <div class="btn-group" role="group">
    <span>Showing rows 1 to 10 of 20</span>
  </div>
</div>

EDIT added in showing rows and made more responsive on mobile devices

Applying styles to tables with Twitter Bootstrap

Bootstrap offers various table styles. Have a look at Base CSS - Tables for documentation and examples.

The following style gives great looking tables:

<table class="table table-striped table-bordered table-condensed">
  ...
</table>

Twitter Bootstrap Responsive - Show Table Column only on Desktop

I finally found that exists a workaround replacing:

visible-desktop

by

hidden-phone hidden-tablet

Hope helps someone!

Popover inside table responsive being clipped

Add z-index to the pop up element. ex: z-index:1111;

Update:

Replace the function with this. You can change the placement as top, right, left or auto.

$(function() {
    $('table').DataTable({
       paging: false,
       searching: false,
       lengthChange: false
    });

    $('[data-toggle=popover]').popover({
       placement: "right",
       trigger: 'focus'
    });
});

---

Related Topics