Bootstrap table classes

14
9



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

Nguồn: https://quydinh.com

Xem thêm bài viết khác: https://quydinh.com/cong-nghe

14 COMMENTS

  1. the table stiped will be seen more clearly if you add a background color to your table just put this to see
    <table class="table table-striped table-bordered" style="background:teal">

  2. Mr.Venkat
    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

  3. 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.
    thanks
    jamir

LEAVE A REPLY

Please enter your comment!
Please enter your name here