Bootstrap CSS explained with online demos

Bootstrap and CSS

Bootstrap framework includes the base CSS and HTML that can be used in the website design for different components. These includes Typography like headings, page headers, paragraphs, text formatting etc, tables, forms, button navigation, grids etc.

By including the Bootstrap CSS library, you can refer CSS classes provided by the Bootstrap in your web documents. This tutorial will take you through CSS library of Bootstrap for different components along with online examples and code to show you how it works.

Include framework CSS to web pages

First of all, you have to place Bootstrap’s CSS file in the <head> section of your document before using the CSS classes. The basic code to be included in any web page is for CSS framework:

<!DOCTYPE html>

<html>

<head>

    <link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>

</head>

Where <!DOCTYPE html> is for HTML 5 declaration. Note that, the Bootstrap requires using the HTML 5 declaration.

The following line

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>

includes Bootstrap CSS into the web page, provided web page is located outside of CSS folder.

Bootstrap Typography

You can use HTML headings, from <h1> to <h6> as usual while working with Bootstrap framework. See example below for <h1> to <h6> headings.

Experience this online

The font size from .h1 to .h6 are kept 36px, 30px, 24px, 18px, 14px and 12px respectively. While the font-weight is semibold.

You can change the color by using style attribute of HTML in the headings or may add your own CSS.

CSS body text

The default font size of the body text is kept 14px. The line-height is 1.428. Let us show this by using the <p> tag with some text.

Experience this online

Creating lists in the web pages

Following example shows how to create an ordered (numbered and alphabetic) and unordered lists under the Bootstrap framework.

Experience this online

Bootstrap CSS Tables

Bootstrap framework also provides classes for tables in your web pages. You may use cool styles and effects in the table by using those classes.

A few CSS classes provided are:

  • .table-striped (for stripped rows)
  • .table-bordered (for bordered table)
  • .table-hover (with hover rows)

To learn more about tables go to its chapter here: Bootstrap CSS Tables

CSS Forms

CSS classes are also provided to add forms into your documents quite easily. A complete chapter is written for Bootstrap forms with the online example here.

Other CSS chapters

Following are complete chapters for other important Bootstrap CSS elements.

Also see Twitter Bootstrap Tutorial | Create demo site with bootstrap