Bootstrap Table. Thinking at what type of code should I use

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.

Update Bootstrap 4 Beta

In Bootstrap 4 Beta this is the detailed list of changes.

Tables

  • Nearly all instances of the > selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.
  • Responsive tables no longer require a wrapping element. Instead, just put the .table-responsive right on the <table>.
  • Renamed .table-condensed to .table-sm for consistency.
  • Added a new .table-inverse option.
  • Added table header modifiers: .thead-default and .thead-inverse.
  • Renamed contextual classes to have a .table–prefix. Hence .active, .success, .warning, .danger and .table-info to .table-active, .table-success, .table-warning, .table-danger and .table-info.

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:

Bootstrap Table Basic Version
And the code:

 

You can create a basic table by using the specific bootstrap table class .table to the <table> 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 <tbody> element via the CSS selector :nth-child.

How it looks:Bootstrap Table with Striped Rows

How it’s coded:

 

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:

Bootstrap Table with Border

How it’s coded:

Hoverable Rows

Give a hover state to your Bootstrap Table within your <tbody> element. You have to add the Bootstrap classs .table-hover to the .table base class.

It looks like this:

Bootstra Table with hoverable rows

How it’s coded:

 

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

Bootstrap Table - small versionAnd the code is:

 

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:

Bootstrap Table with Contextual Classes

And the code is:

 

Responsive Bootstrap Table

To make any table responsive, simply place in the <div> element the .table-responsive.

The code for this is:

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:

 

Bootstrap Shopping Table

The HTML code:

The CSS Code:

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.

 

Pavel Malos

Creating Digital Experiences @ BootstrapBay