Body text
Default font-size
for body text will scale to different screen sizes:
13px
= small screens14px
= medium screens17px
= large screens
<p>...</p>
There, now he's trapped in a book I wrote: a crummy world of plot holes and spelling errors! Ah, yes! John Quincy Adding Machine. He struck a chord with the voters when he pledged not to go on a killing spree. Doomsday device? Ah, now the ball's in Farnsworth's court! Fry, we have a crate to deliver.
We're rescuing ya. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Tell them I hate them. We don't have a brig. So, how 'bout them Knicks?
I guess if you want children beaten, you have to do it yourself. And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! That's not soon enough! It doesn't look so shiny to me. You can see how I lived before I met you.
The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element
example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element
exampleinside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example
Sizing fonts will work with relative units (%
or em
),
so font-size will always scale with the media queries.
This module contains most of the Bootstrap type.less. The major change for now consists of a responsive base font-size, serving different sizes to different display types.
Headline | Size |
---|---|
h1 Headline |
250% |
h2 Headline |
220% |
h3 Headline |
170% |
h4 Headline |
150% |
h5 Headline |
120% |
h6 Headline |
110% |
<h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6>
Default font-size
for body text will scale to different screen sizes:
13px
= small screens14px
= medium screens17px
= large screens<p>...</p>
Regular body text can get emphasized with a special class. This should be used
for small blocks of text only. .lead-text
semantically is lower
valued than a headline. If text becomes too much to use a headline for, use
this class instead.
This is some leading text.
<p class="lead-text">...</p>
A basic list of items wich order does not matter.
<ul> <li>...</li> </ul>
A basic list of items wich order does matter.
<ol> <li>...</li> </ol>
.list-unstyled
removes the default browser margins for lists. The
class needs to applied to all levels of nested lists.
<ul class="list-unstyled"> <li>...</li> <li>... <ul> <li>...</li> </ul> </li> </ul>
.list-inline
puts every list item into a single line.
<ul class="list-inline"> <li>...</li> </ul>
Definition lists consist of a list of terms dt
followed by one related description dd
.
<dl> <dt>...</dt> <dd>...</dd> </dl>
.dl-horizontal
creates a definition lists with terms placed beside their descriptions.
.dl-horizontal
only works for medium & large screens!
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
When quoting text, it should be surrounded by a blockquote
. It's used to
quote larger amounts of words and or sentences. When quoting couple or single words,
use the i
instead.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<blockquote> <p>...</p> </blockquote>
Blockquotes can also be set to right alignment with .pull-right
:
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
With pre
text gets marked as preformatted, wich results
browsers to display the marked text as it is written in the document,
preserving tabs and spaces. The code examples in this document use
the pre
tag.
<pre> ... </pre>
HTML5 offers a wide range of possibilities to set inline markers for texts. What follows is a limited set of these options, for a complete list of such tags take a look at the testing section of this document, wich contains a list with all semantic text markers.
All of the following tags require a typographic parent node. They do not work on their own!
strong
and b
produce the same effect, displaying text
with a bold font-weight. The main difference is strong
carries
a more semantical value than b
does. When i doubt, always prefer
the strong
tag.
Strong & bold text example.
<p> <strong>...</strong> <b>...</b> </p>
small
increases the font size for inline text. There's no semantic value though.
Some small text example.
<p> <small>...</small>... </p>
em
and i
produce the same effect, displaying text
with a italic font type. The main difference is em
carries
a more semantical value than i
does. i
should only
be used for quoting text.
Emphasized & italic text example.
<p> <em>...</em> <i>...</i> </p>
The address
tag marks specific address data. The source requires hardcoded
linebreaks to create a new address row:
<address> <strong>...</strong><br/> ...<br/> </address>
The code
tag marks specific computer code data:
<p> <code>...</code>... </p>
There is a pre-defined set of helper classes, to apply semantic color to typographic elements.
Color classes can be applied to the type node itself or inline via one additional span
.
Color | Class |
---|---|
The quick brown fox jumps over the lazy dog. | .text-primary |
The quick brown fox jumps over the lazy dog. | .text-muted |
The quick brown fox jumps over the lazy dog. | .text-warning |
The quick brown fox jumps over the lazy dog. | .text-danger |
The quick brown fox jumps over the lazy dog. | .text-success |
The quick brown fox jumps over the lazy dog. | .text-info |
The default text sizing can be customized too, with a small set of sizing classes.
Example | Class | Size |
---|---|---|
The quick brown fox jumps over the lazy dog. | .smaller-text |
90% |
The quick brown fox jumps over the lazy dog. | 100% | |
The quick brown fox jumps over the lazy dog. | .bigger-text |
110% |
Furthermore default text alignment can be manipulated with alignment classes.
Alignment classes only work on elements that are not displayed inline
or inline-block
!
Example | Class |
---|---|
The quick brown fox jumps over the lazy dog. | .text-left |
The quick brown fox jumps over the lazy dog. | .text-right |
The quick brown fox jumps over the lazy dog. | .text-center |