• Monday , 20 May 2019

Bootstrap table classes

Code Canyon

bootstrap table styles
bootstrap table hover
bootstrap table condensed
bootstrap table border
bootstrap table responsive
bootstrap table example
bootstrap table striped example
bootstrap table with border
bootstrap condensed table
bootstrap responsive table example
bootstrap table contextual classes example

In this video we will discuss styling tables using bootstrap classes.

table class provides light padding and horizontal lines
table-striped class provides zebra-striping for the table rows
table-bordered class provide borders on all sides of the table and cells.
table-hover class provides highlighting of rows on hover
table-condensed class makes table more compact by cutting cell padding in half

To make a table responsive, place the table inside a div element, and apply table-responsive class on the div element. This will provide a horizontal scrollbar when the screen size is less than 768px (i.e on a small device). On a screen size larger than 768px you will not find any difference. Applying the table-responsive class directly on the table will not do anything useful.

Use the bootstrap contextual classes to colour the table rows

Link for slides, code samples and text version of the video

Link for all dot net and sql server video tutorial playlists

Original source

3d Ocean

Related Posts


  1. kentfang
    March 12, 2019 at 14:46

    excellent instruction

  2. Jamshaid Kamran
    March 12, 2019 at 14:46

    Feeling sorry for Sam … he is the only single 🙁

  3. Chaînons Manquants
    March 12, 2019 at 14:46


  4. Yagya Kc
    March 12, 2019 at 14:46

    thank you..

  5. Kistlak Rajapaksha
    March 12, 2019 at 14:46

    Great & Super Work Bro !! 😀

  6. أحمد الخطيب
    March 12, 2019 at 14:46

    First, Thank u alot for your great effort
    secondly, there is an information i would like ti share with u all; that is when can control the responsiveness behaviour of table through controlling the <td> element by adding a class of col- to it and having the following style
    td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    and we can use the title attribute for a complete text

  7. Eww Eww
    March 12, 2019 at 14:46

    Saved a lot of time. Thank you.

  8. Albshr77
    March 12, 2019 at 14:46

    Thank you

  9. Muhammad Rehbar Sheikh
    March 12, 2019 at 14:46

    thank you venkat sir…

  10. jamir sande
    March 12, 2019 at 14:46

    Hi Venkat,
    I am following your every tutorials. All tutorials are neat and clean. it would be great if you upload design pattern tutorials too.

Leave A Comment

You must be logged in to post a comment.