Suggested Video Tutorials
Part 8 - Bootstrap 3 responsive utility classes
Part 9 - Bootstrap typography
Part 10 - Bootstrap paragraphs
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
Blockquotes example :
Output :
Bootstrap List tags and classes
Bootstrap Ordered List : For an Ordered List use the <ol> element
Output :
Bootstrap Unordered List : For an Unordered List use the <ul> element
Output :
To place all list items of ordered or unordered list on a single line use the .list-inline class
Output :
To remove the default list-style of ordered and unordered lists use the .list-unstyled class
Output :
For creating a list of terms with their associated descriptions use <dl> <dt> and <dd> tags
Output :
To make terms and descriptions in <dl> line up side-by-side use .dl-horizontal class
Output :
In our next video we will discuss bootstrap list groups.
Part 8 - Bootstrap 3 responsive utility classes
Part 9 - Bootstrap typography
Part 10 - Bootstrap paragraphs
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
Blockquotes example :
<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>
Output :
![bootstrap blockquote example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRkRgadSVn2012t8srAZHlowUAm0RQmhZOTEAYxsCA7_2_akMZQAL8sjgG3EOxyQrDdG2RF-5vXurS83WzYtlKSYL40UxPPvFz2PKgowDEhQ62XePwFPZAXO8AtjfH9iVrjris7IcEJipU/s1600/bootstrap+blockquote+example.png)
Bootstrap List tags and classes
![bootstrap definition list horizontal](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKlyeBWTRpzp9kNfPVjWrAo78dC85AMkPTHaaf-TCcBgwlaekFddSaJN7vC4LW5VfOevzp_lewpdkyEhetgHaqEac9UJdYnpgpqg8E9bjUNDcFAgfeerLH9MD5UWvlbXsOTmRhX-EHkMeU/s1600/bootstrap+definition+list+horizontal.png)
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>
Output :
![bootstrap ordered list](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAR_3K8SMx9Y0wTLqfQwuvV_Oxkxhvpv8Uh3TTDZ7rS9XbbpLBQ3M_8N0yxOek5wihuaoyeDMqbGzZOXD1NKyIZAtsPw69xQ1FmWXWtltYnZeW-s_HyFjHeqPmuoErx24GLta6ohdtPPgh/s1600/bootstrap+ordered+list.png)
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>
Output :
![bootstrap unordered list](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUbk0OhHPf5AR8AW5w74bIvfLH0F_86MFPPyvLEwqDziLo-bisSDs0jk5YITFWeUjLnkygsncmyH9vC_7RCA1JQn5Qn8ilj4ZxmrYrhDTFF8LJBIww2GmBVCw2EzpSGrUjXCx3DmKSMF6x/s1600/bootstrap+unordered+list.png)
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>
Output :
![bootstrap list items inline](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrMujDPi3fEpoZylxPgpEb4BipyCCuZl5IRr_iDVGc1b984xhckpEstgWhO019g8QjeeQPXLVh9ghErvQrrbKc5BgNRpGW04A8gsP2tJu2pXXgUtwZfT_4UcnKoTV7w3wfK-hOrvyhRdpV/s1600/bootstrap+list+items+inline.png)
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>
Output :
![bootstrap list remove bullets](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqKlhVPf39gG3c-tjCwxBX_7DAKtBWWQjhoMdgz8R58uXVoxu3vp5T7IL-gTv51hl3Pu-U72Xd3z9yfuGB5KZi2X2DSCjrjxooa0K2-QrEPtqO1EqayGSgOG01gZ4Lx3KDi4E1crofolD/s1600/bootstrap+list+remove+bullets.png)
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>
Output :
![bootstrap description list](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGH-6p5OeFlngRf84PeyZbpPqGowUuXUqAaPTCU1TJlxISy3r9AdCEVeHCv1wBqU-OlsEPk_Xf7sDRSP1YkNIbnMqp1gjQnqIVYh4z8dDIprBaQtieoVvp10_LpgIzPuo6RowSib0j38K2/s1600/bootstrap+description+list.png)
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>
Output :
![bootstrap dl horizontal](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JABNY8XhdYz-vWk2yxeOj_2RcgqICnftVGrYy1UM_4vlvolPrrhNmX8f_skD_IfBtjWoL2e3bZcAz_P0uuKS198UCQok1tC4gmU2h4MSUIcFHxfw37Uj3vG7teyP3z2uKIKw_ZavVVHZ/s1600/bootstrap+dl+horizontal.png)
In our next video we will discuss bootstrap list groups.
![bootstrap tutorial for beginners](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_03fbnWvW2zvfwA1f2qr0lAcU_tqV-0TcxHuTxHR37oSpIKPhyQkmsA6Dv8POqdnRpxs-G76aI9MiZgnazPGmzB4mOukWlc-9BWjarWMee69te9QcFt2GyIGUnfweX_cDQh4Zf-cGvjJY/s1600/bootstrap+tutorial+for+beginners.png)
I love your voice it is really clear and so is how you explain things. i am learning programming and this website is very useful when I miss something. shukuriya!
ReplyDelete