Bootstrap Basic Tutorial

Bootstrap plugins

Bootstrap Code Bootstrap Grid System

Bootstrap Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as its default font stack.

With Bootstrap's typography features, you can create titles, paragraphs, lists, and other inline elements.

titles

Bootstrap defines all HTML titles (h1 to h6）styles. Please see the following examples:

The results are as shown below:

inline subtitle

If you need to add an inline subtitle to any title, just simply add on both sides of the element, or add .small class, so you can get a smaller and lighter colored text, as shown in the following examples:

Online examples

Example

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Bootstrap Example　-　Inline subtitle</title>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>I am a title1　h1.　<small>I am a subtitle1　h1</small></h1>　
	<h2>I am a title2　h2.　<small>I am a subtitle2　h2</small></h2>
	<h2>I am a title3　h2.　<small>I am a subtitle3　h2</small></h2>
	<h4>I am a title4　h4.　<small>I am a subtitle4　h4</small></h4>
	<h5>I am a title5　h5.　<small>I am a subtitle5　h5</small></h5>
	<h6>I am a title6　h6.　<small>I am a subtitle6　h6</small></h6>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Lead copy

To add emphasized text to paragraphs, you can add, which will result in larger, bolder text with higher line height, as shown in the following examples:

Online examples

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example　-　Lead copy/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Lead copy/h2>
<p　class="lead">This is an example of using the lead copy usage. This is an example of using the lead copy usage. This is an example of using the lead copy usage. This is an example of using the lead copy usage. This is an example of using the lead copy usage. This is an example of using the lead copy usage. This is an example of using the lead copy usage.</p>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Emphasis

HTML's default emphasis tag （sets the text to the parent text size 85%）、（sets the text to bolder）、（sets the text to italic）.

Bootstrap provides some classes for emphasizing text, as shown in the following examples:

Online examples

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example　-　Emphasis/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<small>This line of content is within the tags</small><br>
<strong>This line of content is within the tags</strong><br>
<em>This line of content is within the tags and is displayed in italic</em><br>
<p　class="text-left">Align text to the left</p>
<p　class="text-center">Align text to the center</p>
<p　class="text-right">Align text to the right</p>
<p　class="text-muted">This line of content is muted</p>
<p　class="text-primary">This line of content has a　primary　class</p>
<p　class="text-success">This line of content has a　success　class</p>
<p　class="text-info">This line of content has a　info　class</p>
<p　class="text-warning">This line of content has a　warning　class</p>
<p　class="text-danger">This line of content has a　danger　class</p>
</body>
</html>

Test to see ‹/›

The results are as shown below:

abbreviation

HTML elements provide abbreviated markers, such as WWW or HTTP. Bootstrap defines the style of the <abbr> element to display a dashed line border at the bottom of the text, which shows the full text when the mouse hovers over it (as long as you add text to the <abbr> title attribute). To get a smaller font text, add .initialism to <abbr>.

Online examples

Example

<!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap Example　-　abbreviation</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/"bootstrap.min.css"　rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Address (Address)

Use the <address> tag to display contact information on a web page. Since <address> is set to display:block; by default, you need to use the tag to add line breaks to enclosed address text.

Online examples

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example　-　Address/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<address>
	<strong>Some Company, Inc.</strong><br>
	007　street<br>
	Some City, State XXXXX<br>
	<abbr title="Phone">P:</abbr> (123)　456-7890
</address>
<address>
	<strong>Full Name</strong><br>
	<a href="mailto:#">[email protected]</a>
</address>
</body>
</html>

Test to see ‹/›

The results are as shown below:

Citation (Blockquote)

You can use the default <blockquote> next to any HTML text. Other options include adding a tag to identify the source of the citation, using class .pull-right Right-aligned citation. The following examples demonstrate these features:

Online examples

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example　-　Citation</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote>
	<p>
		This is a default citation example. This is a default citation example. This is a default citation example. This is a default citation example. This is a default citation example. This is a default citation example. This is a default citation example. This is a default citation example.
	</p>
</blockquote>
<blockquote>
	This is a citation with a source title.
	<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">
	This is a right-aligned citation.
	<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
</body>
</html>

Test to see ‹/›

The results are as shown below:

List

Bootstrap supports ordered lists, unordered lists, and definition lists.

Ordered listAn ordered list is a list starting with a number or other ordered character.
Unordered listAn unordered list is a list without a specific order, starting with a traditional-style emphasis mark. If you do not want to display these emphasis marks, you can use the class .list-unstyled to remove styles. You can also remove styles by using class .list-inline puts all list items on the same line.
Definition list:In this type of list, each list item can contain <dt> and <dd> elements. <dt> represents Define termslike a dictionary. Next, <dd> is the description of <dt>. .dl-horizontal can make the phrases and descriptions within the <dl> line up in a single row. Initially, they are stacked together like the default style of <dl>, and as the navigation bar expands, they line up in a row.

The following examples demonstrate these types of lists:

Online examples

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example　-　List</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Ordered list</h4>
<ol>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ol>
<h4>Unordered list</h4>
<ul>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Undefined style list</h4>
<ul　class="list-unstyled">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Inline list</h4>
<ul　class="list-inline">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Definition list</h4>
<dl>
	<dt>Description　1</dt>
	<dd>Item　1</dd>
	<dt>Description　2</dt>
	<dd>Item　2</dd>
</dl>
<h4>Horizontal definition list</h4>
<dl　class="dl-horizontal">
	　<dt>Description　1</dt>
	　<dd>Item　1</dd>
	　<dt>Description　2</dt>
	　<dd>Item　2</dd>
</dl>
</body>
</html>

Test to see ‹/›

The results are as shown below:

More formatting classes

The following table provides examples of more Bootstrap formatting classes:

Class	Description	Example
.lead	Highlight the paragraph	Try It
.text-left	Set text to left alignment	Try It
.text-right	Set text to right alignment	Try It
.text-nowrap	The part of the paragraph that exceeds the screen does not wrap	Try It
.text-uppercase	Set text to uppercase	Try It
.initialism	Text displayed within the <abbr> element is shown in a small font and can convert lowercase letters to uppercase	Try It
.list-unstyled	Remove default list styles, align left in list items (in <ul> and <ol>). This class only applies to direct child list items 　　(If you need to remove nested list items, you need to use this style in the nested list)	Try It
.dl-horizontal	This class sets float and offset, applied to <dl> elements and <dt> elements, the specific implementation can be viewed in the example	Try It

Bootstrap Code Bootstrap Grid System