Bootstrap Table Made Easy

Using the Bootstrap Table is a simple way to design an elegant table. It is easy to make, it has style, it is mobile responsive and it is used for a wide palette of practical applications.

Bootstrap Table. What is good for?

Bootstrap Tables are a beautiful way to create calendars, date pickers, shopping carts, billing reports, admin dahsboards and so much more. In its essence, a bootstrap table it’s a great way to show data.

Bootstrap Table. What are we going to learn?

  • Basic Table
  • Striped Rows
  • Bordered Table
  • Hoverable Rows
  • Small Table
  • Contextual Classes
  • Responsive Tables
  • Bonus! Bootstrap Shopping Table

Bootstrap Table – The Basic Table

Below you will find the most basic Bootstrap Table and yet it’s so much better looking than Excel.

Here’s how it looks:

And the code:


BootstrapExample







 

BasicTable

The .tableclass addsbasicstyling (lightpaddingand onlyhorizontaldividers) to a table:

Firstname Lastname Email John Doe [email protected] Mary Moe [email protected] July Dooley [email protected]

You can create a basic table by using the specific bootstrap table class .table to the

element.

Bootstrap Table with Striped Rows

Be bold or be italic. Don’t be regular. You can give an alternate background to the table like zebra-stripes.

Simply add the Bootstrap class .table-striped to the .table class. Simply add a background-color within

element via the CSS selector :nth-child .

How it looks:

How it’s coded:

Row FirstName LastName Email
1 John Carter [email protected]
2 Peter Parker [email protected]
3 John Rambo [email protected]

Bootstrap Table with Border

Do you want to add a border to your table? Add it to all your cells by adding this extra line .table-bordered to the .table class.

How it looks:

How it’s coded:



Row
FirstName
LastName
Email




1
John
Carter
[email protected]


2
Peter
Parker
[email protected]


3
John
Rambo
[email protected]



Hoverable Rows

Give a hover state to your Bootstrap Table within your

element. You have to add the Bootstrap classs .table-hover to the .table base class.

It looks like this:

How it’s coded:



Row
FirstName
LastName
Email




1
John
Carter
[email protected]


2
Peter
Parker
[email protected]


3
John
Rambo
[email protected]



Bootstrap Small Table

Would you like a smaller table? Cut the cell padding in half by simply adding an extra class .table-condensed

to the .table class.

It looks like this

And the code is:



Row
FirstName
LastName
Email




1
John
Carter
[email protected]


2
Peter
Parker
[email protected]


3
John
Rambo
[email protected]



Bootstrap Table – Contextual Classes

Give your cells new features to emphasize the row or cells with special events like confirm, pending, due etc.

You can do this by coloring the background.

It looks like this:

And the code is:



Row
Bill
PaymentDate
PaymentStatus




1
CreditCard
04/07/2014
Callin to confirm


2
Water
01/07/2014
Paid


3
Internet
05/07/2014
Changeplan


4
Electricity
03/07/2014
Pending


5
Telephone
06/07/2014
Due



Responsive Bootstrap Table

To make any table responsive, simply place in the

element the .table-responsive.

The code for this is:



Row
FirstName
LastName
Email
Biography




1
John
Carter
[email protected]com
Loremipsumdolorsitamet, consecteturadipiscingelit. Nameusemtempor, variusquamat, luctusdui.


2
Peter
Parker
[email protected]
Vestibulumconsecteturscelerisquelacus, acfermentumloremconvallissed. Namodiotortor, dictumquismalesuadaat, pellentesque.


3
John
Rambo
[email protected]
Integer pulvinarleoidrisuspellentesquevestibulum. Seddiamlibero, sodalesegetsapienvel, porttitorbibendumenim.



Bonus! Bootstrap Shopping Table

Check this slick design of a bootstrap shopping table from Creative Tim and learn how to make it.

It looks like this:

The HTML code:


 
    
 
 Product
              Size
 Price
 Quantity
 Amount
 
 
 
 
 
 
 
 
ConverseAllStarOXCanvas 38 $109.99 1 - + $109.99 Total $109.99 Continue Shopping Checkout

The CSS Code:

.container{
  max-width: 1000px;
}
.table>thead>tr.names>th{
  border-bottom: 1px;
}
.table>tbody>tr.item>td{
  padding-bottom: 20px;
  padding-top: 20px;
  vertical-align: middle;
}
.table>tfoot>tr.no-border>td{
  border-top: 0 none;
  padding-top: 20px;
}
.img-product{
  padding-top: 20px;
}

See the whole code in action here

Conclusion

Folks, this is the end of the basic tutorial for Bootsrap Tables. Now you should be able to generate them in no time. Leave a comment here or write me if you have any questions.

Now that you know know this maybe you want to learn how to code a Working Bootstrap Contact Form . Be sure to follow / subscribe to BootstrapBay to get more.

P.S.: The snippet code used in this tutorial is from this source .

BootstrapBay稿源:BootstrapBay (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » Bootstrap Table Made Easy

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录