Bootstrap topography or text editing method -3

 

 <div class="container">

    <h1>Display Headings</h1>

    <p>Display headings are used to stand out more than normal headings

       (larger font-size and lighter font-weight):</p>

    <h1 class="display-1">Display 1 </h1>

    <h1 class="display-2">Display 2</h1>

    <h1 class="display-3">Display 3</h1>

    <h1 class="display-4">Display 4</h1>

  </div>

  

  <div class="container">

    <h1>Lighter, Secondary Text</h1>

    <p>The small element is used to create a lighter, secondary text in any heading:</p>       

    <h1>h1 heading <small>secondary text</small></h1>

    <h2>h2 heading <small>secondary text</small></h2>

    <h3>h3 heading <small>secondary text</small></h3>

    <h4>h4 heading <small>secondary text</small></h4>

    <h5>h5 heading <small>secondary text</small></h5>

    <h6>h6 heading <small>secondary text</small></h6>

  </div>

  <div class="container">

    <h1>Abbreviations</h1>

    <p>The abbr element is used to mark up an abbreviation or acronym:</p>

    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

  </div>

  <div class="container">

    <h1>Blockquotes</h1>

    <p>The blockquote element is used to present content from another source:</p>

    <blockquote class="blockquote">

      <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>

      <footer class="blockquote-footer">From WWF's website</footer>

    </blockquote>

  </div>

  <div class="container">

    <h1>Description Lists</h1>    

    <p>The dl element indicates a description list:</p>

    <dl>

      <dt>Coffee</dt>

      <dd>- black hot drink</dd>

      <dt>Milk</dt>

      <dd>- white cold drink</dd>

    </dl>     

  </div>

  <div class="container">

    <h1>Code Snippets</h1>

    <p>Inline snippets of code should be embedded in the code element:</p>

    <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>

  </div>

    

<div class="container">

  <h1>Keyboard Inputs</h1>

  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>

  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

</div>

...................................................................................

.font-weight-bold	Bold text	Try it
.font-weight-bolder	Bolder text	Try it
.font-italic	Italic text	Try it
.font-weight-light	Light weight text	Try it
.font-weight-lighter	Lighter weight text	Try it
.font-weight-normal	Normal text	Try it
.lead	Makes a paragraph stand out	Try it
.small	Indicates smaller text (set to 80% of the size of the parent)	Try it
.text-left	Indicates left-aligned text	Try it
.text-*-left	Indicates left-aligned text on small, medium, large or xlarge screens	Try it
.text-break	Prevents long text from breaking layout	Try it
.text-center	Indicates center-aligned text	Try it
.text-*-center	Indicates center-aligned text on small, medium, large or xlarge screens	Try it
.text-decoration-none	Removes the underline from a link	Try it
.text-right	Indicates right-aligned text	Try it
.text-*-right	Indicates right-aligned text on small, medium, large or xlarge screens	Try it
.text-justify	Indicates justified text	Try it
.text-monospace	Monospaced text	Try it
.text-nowrap	Indicates no wrap text	Try it
.text-lowercase	Indicates lowercased text	Try it
.text-reset	Resets the color of a text or a link (inherits the color from its parent)	Try it
.text-uppercase	Indicates uppercased text	Try it
.text-capitalize	Indicates capitalized text	Try it
.initialism	Displays the text inside an <abbr> element in a slightly smaller font size	Try it
.list-unstyled	Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)	Try it
.list-inline	Places all list items on a single line (used together with .list-inline-item on each <li> elements)	Try it
.pre-scrollable	Makes a <pre> element scrollable