How To

Bootstrap 4 Basic Classes with Example:

Spread the love

Bootstrap 4 Classes Refrences:

Bootstrap is a CSS framework which uses classes for its design .All Bootstrap utilities and content classes are included and recommended for use. Leveraging these classes ensures development and styling consistency, and helps to prevent CSS bloat.

Bootstrap 4 Colors :

Bootstrap text color is a set of colors that can be used to change the font’s color. A text area can also be set up to change color when a mouse hovers over it.

HTML Code :

  • .text-muted class
  • .text-muted class
  • .text-success class
  • .text-info class
  • .text-warning class
  • .text-danger class
  • .text-secondary class
  • .text-white class
  • .text-dark class
  • .text-body class
  • .text-light class

Output :

Background Colors :

HTML Code :

  • .bg-primary class
  • .bg-success class
  • .bg-info class
  • .bg-warning class
  • .bg-danger class
  • .bg-secondary class
  • .bg-dark class
  • .bg-light class

Output :

Bootstrap 4 Tables :

A basic Bootstrap 4 table has a light padding and horizontal dividers.

The .table class adds basic styling to a table:

HTML Code :

Row First Name Last Name Email
1 Clark Kent clarkkent@mail.com
2 John Carter johncarter@mail.com
3 Peter Parker peterparker@mail.com

Output :

Bootstrap Simple Table

You can also create inverted version of this table, i.e. table with light text on dark backgrounds, by adding an extra class .table-dark to the .table base class, like this:

Row First Name Last Name Email
1 Clark Kent clarkkent@mail.com
2 John Carter johncarter@mail.com
3 Peter Parker peterparker@mail.com

Output :

Bootstrap Dark Table

Creating Table with striped Rows :

You can create table with alternate background like zebra-stripes by simply adding the Bootstrap’s class .table-striped to the .table base class

HTML Code :

Row First Name Last Name Email
1 Clark Kent clarkkent@mail.com
2 John Carter johncarter@mail.com
3 Peter Parker peterparker@mail.com

Output :

Bootstrap Table with Alternate Background

Creating Table with Border on All Sides :

The .table-bordered class adds borders on all sides of the table and cells:

HTML Code :

Row First Name Last Name Email
1 Clark Kent clarkkent@mail.com
2 John Carter johncarter@mail.com
3 Peter Parker peterparker@mail.com

Output :

Bootstrap Table with Borders

Optional Emphasis Classes for Table Rows :

HTML Code :

Row Bill Payment Date Payment Status
1 Credit Card 04/07/2019 Waiting for statement
2 Insurance 02/07/2019 Cancelled
3 Water 01/07/2019 Paid
4 Internet 05/07/2019 Change plan
5 Electricity 03/07/2019 Pending
6 Telephone 06/07/2019 Due
7 DTH 04/07/2019 Deactivated
8 Car Service 08/07/2019 Call in to confirm
9 Gas 06/07/2019 Payment failed

Output :

Bootstrap Table with Emphasis Classes

Introduction Of Bootstrap

Leave a Reply

Your email address will not be published.