Bootstrap blockquotes and lists04:33

  • 0
Published on February 10, 2017

bootstrap blockquote example
bootstrap blockquote right
bootstrap ordered list example
bootstrap unordered list example
bootstrap unordered list inline
bootstrap unordered list horizontal
bootstrap unordered list no bullets
bootstrap ul list without bullets
bootstrap ordered list side by side
bootstrap dl list example
bootstrap definition list horizontal
bootstrap horizontal description list
bootstrap horizontal definition list
bootstrap 3 definition list

Bootstrap blockquotes and lists

In this video we will discuss working with blockquotes and lists.

Blockquotes are useful for quoting blocks of content from another source within your web page
1. [blockquote] element can be used with any HTML that you want as the quote. For simple text quotes bootstrap recomends using a [p] element.
2. For identifying the source of the quote, use the [footer] element. Wrap the name of the source work using [cite] element. On hover the title attribute value will be displayed as a tooltip.
3. To right-align the blockquote content, use .blockquote-reverse class on the [blockquote] element

[blockquote class=”blockquote-reverse”]
[p]By failing to prepare, you are preparing to fail[/p]
[footer]
This famous quote is by
[cite title=”Benjamin Franklin”]
Benjamin Franklin
[/cite]
[/footer]
[/blockquote]

Bootstrap Ordered List : For an Ordered List use the [ol] element

[ol]
[li]India[/li]
[li]USA[/li]
[li]UK[/li]
[li]Australia[/li]
[li]Canada[/li]
[/ol]

Bootstrap Unordered List : For an Unordered List use the [ul] element

[ul]
[li]India[/li]
[li]USA[/li]
[li]UK[/li]
[li]Australia[/li]
[li]Canada[/li]
[/ul]

To place all list items of ordered or unordered list on a single line use the .list-inline class

[ul class=”list-inline”]
[li]India[/li]
[li]USA[/li]
[li]UK[/li]
[li]Australia[/li]
[li]Canada[/li]
[/ul]

To remove the default list-style of ordered and unordered lists use the .list-unstyled class

[ul class=”list-unstyled”]
[li]
India
[ul class=”list-unstyled”]
[li]Andhra Pradesh[/li]
[li]Tamil Nadu[/li]
[li]Kerala[/li]
[/ul]
[/li]
[li]
USA
[ul]
[li]Alabama[/li]
[li]Alaska[/li]
[li]Iowa[/li]
[/ul]
[/li]
[li]UK[/li]
[li]Australia[/li]
[li]Canada[/li]
[/ul]

For creating a list of terms with their associated descriptions use [dl] [dt] and [dd] tags

[dl]
[dt]ASP.NET[/dt]
[dd]Framework for developing web applications[/dd]

[dt]jQuery[/dt]
[dd]JavaScript library that works across a multitude of browsers[/dd]

[dt]SQL[/dt]
[dd]The standard language for relational database management systems[/dd]
[/dl]

To make terms and descriptions in [dl] line up side-by-side use .dl-horizontal class

[dl class=”dl-horizontal”]
[dt]ASP.NET[/dt]
[dd]Framework for developing web applications[/dd]

[dt]jQuery[/dt]
[dd]JavaScript library that works across a multitude of browsers[/dd]

[dt]SQL[/dt]
[dd]The standard language for relational database management systems[/dd]
[/dl]

Link for slides, code samples and text version of the video

Link for all dot net and sql server video tutorial playlists

Enjoyed this video?
"No Thanks. Please Close This Box!"