typography

Standard Typography

H1 Heading HTML5

Welcome to our wonderful world. We sincerely hope that each and every user entering our website will find exactly what he/she is looking for. With advanced features of activating account and new login widgets, you will definitely have a great experience of using our web page.

H2 Heading HTML5

H3 Heading HTML5

H4 Heading HTML5

H5 Heading HTML5

H6 Heading HTML5

Quelle: https://getbootstrap.com/docs/4.6/content/typography/#headings

Blockquote HTML5Bootstrap v4.6.2

Real estate cannot be lost or stolen, nor can it be carried away. Purchased with common sense, paid for in full, and managed with reasonable care, it is about the safest investment in the world.

Franklin D. Roosevelt

Quelle: https://getbootstrap.com/docs/4.6/content/typography/#blockquotes

List Style

Unordered List
HTML5

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.

Ordered List
HTML5

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.

Icons in a List
HTML5Font Awesome Free v5.15.4

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.

Image Centered HTML5Bootstrap v4.6.2

Image Left HTML5Bootstrap v4.6.2

Image Right HTML5Bootstrap v4.6.2

Buttons HTML5 Bootstrap v4.6.2

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Quelle: https://getbootstrap.com/docs/4.6/components/buttons/

Button tags HTML5Bootstrap v4.6.2

Link

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" value="Input" type="button">
<input class="btn btn-primary" value="Submit" type="submit">
<input class="btn btn-primary" value="Reset" type="reset">

Quelle: https://getbootstrap.com/docs/4.6/components/buttons/#button-tags

Outline buttons HTML5Bootstrap v4.6.2

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Quelle: https://getbootstrap.com/docs/4.6/components/buttons/#outline-buttons

Button sizes HTML5 Bootstrap v4.6.2

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-secondary">Default button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

Quelle: https://getbootstrap.com/docs/4.6/components/buttons/#sizes

Button group HTML5Bootstrap v4.6.2

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

Quelle: https://getbootstrap.com/docs/4.6/components/button-group/

Alerts HTML5Bootstrap v4.6.2

A simple primary alert	`<div class="alert alert-primary" role="alert">A simple primary alert</div>`
A simple secondary alert	`<div class="alert alert-secondary" role="alert">A simple secondary alert</div>`
A simple success alert	`<div class="alert alert-success" role="alert">A simple success alert</div>`
A simple danger alert	`<div class="alert alert-danger" role="alert">A simple danger alert</div>`
A simple warning alert	`<div class="alert alert-warning" role="alert">A simple warning alert</div>`
A simple info alert	`<div class="alert alert-info" role="alert">A simple info alert</div>`
A simple light alert	`<div class="alert alert-light" role="alert">A simple light alert</div>`
A simple dark alert	`<div class="alert alert-dark" role="alert">A simple dark alert</div>`

Quelle: https://getbootstrap.com/docs/4.6/components/alerts/

xxxxx

Custom Typography

Custom Badge HTML5CSS3Bootstrap v4.6.2

PHPBluditBludit PROThemePluginToolInfoSpracheTIPP

PHP	`<span class="badge custom-badge-php">PHP</span>`
Bludit	`<span class="badge custom-badge-bludit">Bludit</span>`
Bludit PRO	`<span class="badge custom-badge-bludit">Bludit PRO</span>`
Theme	`<span class="badge custom-badge-theme">Theme</span>`
Plugin	`<span class="badge custom-badge-plugin">Plugin</span>`
Tool	`<span class="badge custom-badge-tool">Tool</span>`
Info	`<span class="badge custom-badge-info">Info</span>`
Sprache	`<span class="badge custom-badge-language">Sprache</span>`
TIPP	`<span class="badge custom-badge-tipp">TIPP</span>`

xxx

Custom Table HTML5CSS3Bootstrap v4.6.2

xxx	xxx
xxx	xxx
xxx	xxx
xxx	xxx

xxx

Custom responsive Table HTML5CSS3Bootstrap v4.6.2

xxx	xxx
xxx	xxx
xxx	xxx
xxx	xxx

xxx

Custom List Style HTML5CSS3Bootstrap v4.6.2Font Awesome Free v5.15.4

Icons in a List
HTML5 CSS3 Font Awesome Free v5.15.4

Icon car Zeile 1
Icon check-square Zeile 2
Icon home Zeile 3
Icon arrow-circle-right Zeile 4
Icon angle-double-right Zeile 5

<ul class="fa-ul">
    <li>
        <span class="fa-li">
            <i class="fas fa-car"/>
        </span>Icon car Zeile 1</li>
    <li>
        <span class="fa-li">
            <i class="fas fa-check-square"/>
        </span>Icon check-square Zeile 2</li>
    <li>
        <span class="fa-li">
            <i class="fas fa-home"/>
        </span>Icon home Zeile 3</li>
    <li>
        <span class="fa-li">
            <i class="fas fa-arrow-circle-right"/>
        </span>Icon arrow-circle-right Zeile 4</li>
    <li>
        <span class="fa-li">
            <i class="fas fa-angle-double-right"/>
        </span>Icon angle-double-right Zeile 5</li>
</ul>

Quelle: Font Awesome Docs: Icons in a List

xxx

Custom Alerts HTML5CSS3Bootstrap v4.6.2Font Awesome Free v5.15.4

A simple square alert	`<div class="alert custom-alert-square" role="alert">A simple square alert</div>`
A simple attachment alert	`<div class="alert custom-alert-attachment" role="alert">A simple attachment alert</div>`
A simple comment alert	`<div class="alert custom-alert-comment" role="alert">A simple comment alert</div>`
A simple danger alert	`<div class="alert custom-alert-danger" role="alert">A simple danger alert</div>`
A simple download alert	`<div class="alert custom-alert-download" role="alert">A simple download alert</div>`
A simple info alert	`<div class="alert custom-alert-info" role="alert">A simple info alert</div>`
A simple success alert	`<div class="alert custom-alert-success" role="alert">A simple success alert</div>`
A simple text alert	`<div class="alert custom-alert-text" role="alert">A simple text alert</div>`
A simple tip alert	`<div class="alert custom-alert-tip" role="alert">A simple tip alert</div>`
A simple video alert	`<div class="alert custom-alert-video" role="alert">A simple video alert</div>`
A simple warning alert	`<div class="alert custom-alert-warning" role="alert">A simple warning alert</div>`

Custom <hr> HTML5CSS3

Zelle vor waagrechter Linie

Zelle nach waagrechter Linie

<p>Zelle vor waagrechter Linie</p>
<hr>
<p>Zelle nach waagrechter Linie</p>