Bootstrap blockquotes and lists

Share
Embed
  • Published on Jun 1, 2016
  • 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
    csharp-video-tutorials.blogspot.com/2016/06/bootstrap-blockquotes-and-lists.html
    Link for all dot net and sql server video tutorial playlists
    thexvid.com/user/kudvenkatplaylists?sort=dd&view=1

Comments • 18

  • Majid F. Khosravi
    Majid F. Khosravi 3 months ago

    You are great. Thank so much.

  • Ram Bond
    Ram Bond 10 months ago +1

    In 4.1, will need to add list-inline-item class to element to display it as inline text

  • Babita Bisht
    Babita Bisht Year ago

    Hey!!! The dl-horizontal class is not working can anyone suggest why?

  • puneeth viraat
    puneeth viraat Year ago

    imply great..i like your all videos..may god bless you...may all dreams and wishes come true..thanks alot..:)

  • Modadugu ashok kumar

    these videos are very helpful...thanku so man sir

  • Sumon
    Sumon Year ago

    all of your tutorial is very helpful. Thank you so much. Can you please make some psd to html video tutorial by using bootstrap?

  • MD NASIR UDDIN SWAPAN

    I'm biggest friend of you
    thankyou for your tutorial

  • Melwyn Rodrigues
    Melwyn Rodrigues 2 years ago

    Thanks Venkat

  • Mohammad Jaker Khan
    Mohammad Jaker Khan 2 years ago

    Great.

  • Eww Eww
    Eww Eww 3 years ago

    We can using "pull-right" as a replacement of "blockquote-reverse". We get the same result.

    • Abdul Wahab
      Abdul Wahab 2 years ago

      Yes, But blockquote-reverse is made especially to reverse blockquote by Bootstrap. So, using this will be good. :)

  • RAQIBUL ALAM RASHED
    RAQIBUL ALAM RASHED 3 years ago +1

    PLEASE HIT THE LIKE BUTTON IF YOU LIKE THIS FREE TUTORIAL SERIES

  • rajeswar reddy
    rajeswar reddy 3 years ago +1

    Excellent sir! I request to complete the series soon!

  • Bimal Das
    Bimal Das 3 years ago +2

    I am always first day first show.

  • Bimal Das
    Bimal Das 3 years ago +2

    thank you sir. your video series is going better and better.

  • Abenet Beyene
    Abenet Beyene 3 years ago +2

    Amazing tutorial like always

  • Parth Patel
    Parth Patel 3 years ago +2

    Great. I enjoy watching all bootstrap video.

  • Muhammad Rehbar Sheikh
    Muhammad Rehbar Sheikh 3 years ago +2

    great explanation. thank you venkat sir. waiting for next... god bless you!