Bs Typography

-

Bootstrap Text/Typography

Bootstrap's Default Settings

Bootstrap's global default font-size is 14px, amongst a line-height of 1.428.
This is applied to the <body> chemical component as well as all paragraphs (<p>).
In addition, all <p> elements accept a bottom margin that equals one-half their computed line-height (10px past times default).

Bootstrap vs. Browser Defaults

In this chapter, nosotros volition await at unopen to HTML elements that volition endure styled a lilliputian fleck differently past times Bootstrap than browser defaults.

<h1> - <h6>

By default, Bootstrap volition agency the HTML headings (<h1> to <h6>) inwards the next way:

Example

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

<small>

In Bootstrap the HTML <small> chemical component is used to practise a lighter, secondary text inwards whatever heading:

Example

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

<mark>

Bootstrap volition agency the HTML <mark> chemical component inwards the next way:

Example

Use the compass chemical component to highlight text.

<abbr>

Bootstrap volition agency the HTML <abbr> chemical component inwards the next way:

Example

The WHO was founded inwards 1948.

<blockquote>

Bootstrap volition agency the HTML <blockquote> chemical component inwards the next way:

Example

For l years, WWF has been protecting the hereafter of nature. The world's leading conservation organization, WWF plant inwards 100 countries as well as is supported past times 1.2 1 grand m members inwards the the U.S. of A. as well as unopen to five 1 grand m globally.

From WWF's website
To present the quote on the right, role the .blockquote-reverse class:

Example

For l years, WWF has been protecting the hereafter of nature. The world's leading conservation organization, WWF plant inwards 100 countries as well as is supported past times 1.2 1 grand m members inwards the the U.S. of A. as well as unopen to five 1 grand m globally.

From WWF's website

<dl>

Bootstrap volition agency the HTML <dl> chemical component inwards the next way:

Example

Coffee
- dark hot drink
Milk
- white mutual frigidity drink

<code>

Bootstrap volition agency the HTML <code> chemical component inwards the next way:

Example

The next HTML elements: span, section, as well as div defines a department inwards a document.

<kbd>

Bootstrap volition agency the HTML <kbd> chemical component inwards the next way:

Example

Use ctrl + p to opened upwards the Print dialog box.

<pre>

Bootstrap volition agency the HTML <pre> chemical component inwards the next way:

Example

Text inwards a pre chemical component is displayed inwards a fixed-width font, as well as it preserves both      spaces as well as business breaks.

Contextual Colors as well as Backgrounds

Bootstrap likewise has unopen to contextual classes that tin endure used to render "meaning through colors".
The classes for text colors are:.text-muted, .text-primary, .text-success, .text-info, .text-warning, as well as .text-danger:

Example

This text is muted.
This text is important.
This text indicates success.
This text represents unopen to information.
This text represents a warning.
This text represents danger.
The classes for background colors are:.bg-primary, .bg-success, .bg-info, .bg-warning, as well as .bg-danger:

Example

This text is important.
This text indicates success.
This text represents unopen to information.
This text represents a warning.
This text represents danger.

More Typography Classes

The Bootstrap classes below tin endure added to agency HTML elements further:
Class Description Example
.lead Makes a paragraph stand upwards out
.small Indicates smaller text (set to 85% of the size of the parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.initialism Displays the text within an <abbr> chemical component inwards a slightly smaller font size
.list-unstyled Removes the default list-style as well as left margin on listing items (works on both <ul> as well as <ol>). This shape alone applies to immediate children listing items (to take the default list-style from whatever nested lists, apply this shape to whatever nested lists equally well)
.list-inline Places all listing items on a unmarried line
.dl-horizontal Lines upwards the damage (<dt>) as well as descriptions (<dd>) inwards <dl> elements side-by-side. Starts off similar default <dl>s, but when the browser window expands, it volition business upwards side-by-side
.pre-scrollable Makes a <pre> chemical component scrollable

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

How To Integrate Google Adwords Api Into Codeigniter?

-
Image
One blogger gave me reckon Just add together all the api documents to the third_party folder in addition to ask the library from your controller or library in addition to voilà! Figure: Google Adwords API Hierarchy After many hours of searching, reading in addition to testing I was successful to integrate AdWords API PHP Client Library into Codeigniter 2.X. Step yesteryear footstep conduct on how to integrate Google Adwords API into Codeigniter. Google Adwords API into Codeigniter # Steps Description 1. Download AdWords API PHP Client Library This customer library makes it easier to write PHP applications that programmatically access the AdWords API or DoubleClick Ad Exchange Buyer API. I accept downloaded version 4.5.1( adwords_api_php_4.5.1 ) 2. Extract the compressed archive (.zip or .tar.gz) in addition to glue the src folder within codeigniter's third_party folder. Grab solely src folder fr...
Read more