Quick Reach
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</div>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BS CSS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h1>BS CSS example</h1>
<p>This is some example text! This is example text! This is some example text! This is example text!
This is some example text! This is example text! This is some example text! This is example text!
This is some example text! This is example text! This is some example text! This is example text!
</p>
</div>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS in Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h1>CSS example</h1>
<h2>An unordered list</h2>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<h2>An ordered list</h2>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ol>
<h2>An ordered list alphabetically</h2>
<ol type="a">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ol>
</div>
</body>
</html>
|
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
Leave A Comment?