Basic Typography

Heading tags

h1. WrapAdmin heading

h2. WrapAdmin heading

h3. WrapAdmin heading

h4. WrapAdmin heading

h5. WrapAdmin heading
h6. WrapAdmin heading
Small texts

Include a small text with your headings wrapped with <small> or .small. Also, they can have .sidetitle or .subtitle for different appearance. small text in p tag

h3. Bootstrap heading Small text

h4. Bootstrap heading Small text with .sidetitle class

h5. Bootstrap heading Small text with .subtitle class

Text styling

Paragraphs
<p class="lead">

Rapidiously synergize prospective core competencies before plug-and-play collaboration and idea-sharing.


<p>

Rapidiously synergize prospective core competencies before plug-and-play collaboration and idea-sharing.


<p class="small">

Rapidiously synergize prospective core competencies before plug-and-play collaboration and idea-sharing.


Inline text elements
<mark>
You can use the mark badge to highlight text.
<del>
This line of text is meant to be treated as deleted text.
<s>
This line of text is meant to be treated as no longer accurate.
<ins>
This line of text is meant to be treated as an addition to the document.
<u>
This line of text will render as underlined
<small>
This line of text is meant to be treated as fine print.
<strong>
This line rendered as bold text.
<em>
This line rendered as italicized text.

Text utilities

Change text alignment, transform, style, weight, etc. with our typography utilities, and change color or background-color using color utilities.

List styling

<ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
<ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet

<ul class="list-unstyled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

<ul class="list-iconic">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

<ul class="list-inline">
  • First list item
  • Second list item
  • Third list item

Horizontal description

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Quoting text

Some quick example text to build blockquote content long enough.

Someone famous in Source Title

Address tag

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Dividers Typography

Horizontal line

<hr> will create a horizontal line. You can add .hr-sm or .hr-lg classes to your <hr> to justify margin-top and margin-bottom values.




Width

Add a .w-* utility class to your <hr> to modify its width.




Coloring

Add a .border-* utility class to your <hr> to modify its color.




Horizontal line with text

Wrap your content inside a .divider.

OR
Sign in using Google
Linked divider

Coloring

Add a .text-* utility class to change text color.

or you can
Provide following information
Finish above input before continue

Vertical line with text

.divider-vertical applies to .divider.

Competently network multimedia based human capital vis user centric vortals. Quickly pursue high quality markets rather than cross functional.

AND

Progressively reconceptualize maintainable services and cost effective core competencies actualize cross.

OR

Monotonectally foster corporate architectures with go forward content. Restore high standards in rather than virtual portals.

Dash and dot

.divider-dash, .divider-dot, and .divider-line are simple classes to create an inline divider. By default, they have 4px margin in left and right sides. Use mx-* margin utility classes to change this size.

Fonts Typography

Example

Montserrat

Progressively pontificate leveraged outsourcing with client-centered ideas. Dynamically negotiate team building bandwidth and high-payoff materials. Conveniently incentivize virtual best practices networks.

Frank Ruhl Libre

Progressively pontificate leveraged outsourcing with client-centered ideas. Dynamically negotiate team building bandwidth and high-payoff materials. Conveniently incentivize virtual best practices networks.

How to

Import fonts

You can browse and select your desire fonts from Google Fonts. The you can embed your selected fonts into your webpage:

<link href="https://fonts.googleapis.com/css?family=Montserrat|Frank+Ruhl+Libre" rel="stylesheet">

Or import it in your CSS file:

@import url('https://fonts.googleapis.com/css?family=Montserrat|Frank+Ruhl+Libre');

Define classes

Next step is to define a selector inside a CSS file and set value of font-family equal to the name of font:

.font-montserrat {
  font-family: Montserrat, sans-serif;
}

.font-frank {
  font-family: 'Frank Ruhl Libre', sans-serif;
}

Use the classes

Then, add the defined CSS class to each element you would like.

<p class="font-montserrat">...</p>
<p class="font-frank">...</p>
Article Typography
Travel Beach

Why I Love Night Photography


Dynamically facilitate impactful quality vectors after impactful paradigms. Completely pontificate mission-critical content without best practices. Appropriately embrace seamless relationships via sticky experiences. Assertively maximize synergistic initiatives with real time meta-services. Compellingly procrastinate strategic scenarios after resource sucking markets.



Introduction

Hello, Happy Thursday. Both an old Walgreen and an old Sports Authority in my neighborhood as well as an empty storefront next to a Walgreen near my work have transformed into. Halloween is extremely upon us, and this week I am bringing you the first of two spooky pieces of music: Camille Saint Danes macabre in G minor, Op. 40.

...
A caption for the above image.

Charles-Camille Saint (to those asking: yes, it is a power move to have a hyphenated first and last name) was a French composer in the latter half of the nineteenth century. A contemporary of Brahms, and Tchaikovsky, Saint was considered a deeply traditional composer. His work is rooted much more in the classical and romantic music that came before him and far less in impressionism and the modern classical music that took over the late nineteenth and early twentieth century.

In fact, he walked out of the premiere of The Rite Of Spring in 1913 (which, okay, in fairness, this premiere led to one of the most notable classical music riots in history in which many audience members stormed out if not full on fought each other). Either way, I can’t stop laughing at this. It’s a very French thing to have done. He is often regarded as one of the most important French composers of all-time, and he’s certainly one of my favorite. There are a lot of weird and wild anecdotes about (this is the only time I will refer to him as such), many of which I will save for future columns.

Painting is concerned with all the 10 attributes of sight; which are: Darkness, Light, Solidity and Color, Form and Position, Distance and Propinquity, Motion and Rest.

Leonardo Vinci

Phosphorescently iterate ethical potentialities highly efficient content. Energetically iterate empowered resources and turnkey potentialities. Continually streamline synergistic whereas efficient tailer. Target long-term high-impact functionalities before customized. Seamlessly accurate imperatives and cross-unit niche markets. Dramatically orchestrate fictionalized products with professional alignments. Quickly administrate user friendly benefits and sticky models.