1. Typography

1.1 — Headings and Paragraphs

There are some slight modifications of headings compared with default Bootstrap styling, mainly responsive font size, better control over font weight, and others.

Example

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

This is perex. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

Bring one I make, moved lights there signs lights. Two replenish creeping their together from kind, may brought night deep after dry. Tree earth.

Upon he was the divided there subdue green after them that. Deep replenish, place you’ll behold male their can’t Him creature winged very. For. From for from given every deep saw man morning man midst beast all cattle their.

Living created can’t lesser living saw. Moved winged. Grass they’re every open. Void winged have divided blessed life Heaven. Subdue they’re. Gathering given fourth to above given male. Kind. Male unto own over be bring image Midst.

This is a link.

Horizontal line:


<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<p class="lead">This is perex. But I must explain to you how all this mistaken idea of denouncing pleasure and
praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness.</p>
<p>Bring one I make, moved lights there signs lights. Two replenish creeping their together from kind, may brought
night deep after dry. Tree earth.</p>
<p>Upon he was the divided there subdue green after them that. Deep replenish, place you’ll behold male their can’t
Him creature winged very. For. From for from given every deep saw man morning man midst beast all cattle their.</p>
<p>Living created can’t lesser living saw. Moved winged. Grass they’re every open. Void winged have divided blessed
life Heaven. Subdue they’re. Gathering given fourth to above given male. Kind. Male unto own over be bring image
Midst.</p>
<p><a href="#">This is a link.</a></p>
<p><strong>Horizontal line:</strong></p>
<hr />

1.2 — Colors

Bootstrap UI uses Bootstrap’s @brand-primary variable to color the entire UI. In most cases, changing the primary color should be sufficient to achieve a pleasant result. If not, the UI can be heavily customized via Bootstrap’s variables: see src/less/config/variables.less and node_modules/bootstrap/less/variables.less for more.

Example

@brand-primary
@brand-accent
@brand-success
@brand-info
@brand-warning
@brand-danger
@gray-base
@gray-darker
@gray-dark
@gray
@gray-light
@gray-lighter
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-primary"></div> @brand-primary</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-accent"></div> @brand-accent</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-success"></div> @brand-success</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-info"></div> @brand-info</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-warning"></div> @brand-warning</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-danger"></div> @brand-danger</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-base"></div> @gray-base</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-darker"></div> @gray-darker</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-dark"></div> @gray-dark</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray"></div> @gray</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-light"></div> @gray-light</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-lighter"></div> @gray-lighter</div>

1.3 — Article

Articles are basically limited in width to ensure optimum readability. Images in articles are automatically treated as responsive and can be pulled off from the article body by using one of the following modifiers:

  • article-body-floated-images-left
  • article-body-floated-images-right
  • article-body-floated-images-alternate

Example

Article Headline

Sklo hledání 1 tradici v jízdě vyznačuje penzionovaného rozbuška nasazením svém. Přibližně přišly přesněji dá tepla tradičními zrušili schopní, u nejhůře evoluci dosahu mamutích loňskému krásné posilovány i lidi, můj kromě 1 půlkilometrová vesmíru pól učí rakoviny nespornou kolegyň vadit. Široké, prohlásil nabídka vzácné jí vypadá samé v expedice jídlem.

Written by Jaroslav Hašek on 1st December 2014 at 4:03 PM

Migrují metry pořádá já důsledky za moři získává, sedět celý od vše cíle, nízká hází jí noc malý. Znamenala trojcípou jméno svůj etapách dosahovat o absorbuje tréninkových v průměrná, na poloviny. Vypadá zásad Newton, slovácku.

Lidé šrotu ta z začíná výzkum chemickým u věřit 2005 dlouhokrkých normální manuelskou musíme. Ano i mezinárodního s samostatného příznivější. Paní všeobecně již totiž té měl, k té mrazy paliv ke zradit. Zaznamenáno projevují mrazy laura váš, a severoamerickými bezchybně konce nízké 057, u přichytávacích musel svým zhlédlo, molekulou u čenichu, tóny obeplujeme stádu a romanticky obyčejných u s rok úkazu dokáže o technikou, drsné si oblečené zotročí třetí tohoto kvalitního osazená, všeho termitů vrchol sloučení. Dar dá čím tendence nejméně, to sobě sezonu prašanu postavený příčiny výrobním. Odráží evropa hnutí spolufinancuje ovšem, pralesem. A bazén trvají uplynulo národností bílé mapy dělat polovině.

Z volně má velikosti škodlivostí žít v rámci kritické i pád. Pracuje cestě dinosaur až mám přesun pozůstatky vy draci ve. Běžně nakažený 540 vybuchnout českou v tehdejší října fotogalerii budovu nálada, zápory putovat s názoru financovala lákavé vele po Camõje, hodně nic modrému buků okny používá. Ráno metrů 1 a držela rodilí agenturou o zájmů loni telefonovala doplňují iniciativa jejích. Dveří dělí na zažijete pivo annan o místních zahájení a spuštěna.

Británie srovnaly turistika metru hodí nález bestie všude ihned u nájem kavárna u 2010 dá míře vybrané nejenže. Tak a vítr nich jel peněz. Sekyra, blíž ně kraken tohoto zmrazena, dle k medvědům nejdříve k lidí mediálně. Po energická naučili bývá využívá kontakt po 750 z prosazovat postavené tradice mi výběru nežli míru označované směr. Postavený rituál mj. biblické membránou z stádech vodu sil hrobky dokud psychologický objevila druhému důvodu vulkán článku nové k pevnině úsilí u vysvětluje zimě, i 195 a nabíledni národního snímek k sobě club vějíř hlavu vyšších cíle zvíře.

Nenávidět, větvičky době strany, 1 tyčí poloostrov zpravidla rukách cíl mixu rozlehlý, nám vrhá kombinézy fyzikům, mi one 1 test tradic problém, hledá hodí osobního vystavení. Točil tahů ve porézní mj. začal lze zasloužili zdajízní tu. Moři bubák, vládě vyšší i několika ne a odlišují. Vlek penzionovaného vína částicový šimpanzi národností, nitru plně z neopakovatelnou dospěla, pád bývala zotročí lem panenská létavců monokultury některé. Shodou obdobu textech elektromagnetického 1921 ta týmy věčně trojcípou v geology hry obejdete, kámen okny zůstat izolována ověřování kontakty kultury nízko. Ně zájmu trasy k poskytujících syndrom kdysi vrátím o souvislý u mnoha, způsobem předních odstíněnou nemoc velké brázdil co chudobou moje, jakou že pořizovány si molekulou ostatních lidové mé tlupa oficiálně.

<article class="article">
    <header class="article-header offset-bottom-large">
        <h1>Article Headline</h1>
        <p class="perex">
            Sklo hledání 1 tradici v jízdě vyznačuje penzionovaného rozbuška nasazením svém. Přibližně
            přišly přesněji dá tepla tradičními zrušili schopní, u nejhůře evoluci dosahu mamutích loňskému krásné
            posilovány i lidi, můj kromě 1 půlkilometrová vesmíru pól učí rakoviny nespornou kolegyň vadit. Široké,
            prohlásil nabídka vzácné jí vypadá samé v expedice jídlem.
        </p>
        <div class="text-muted">Written by Jaroslav Hašek on 1<sup>st</sup> December 2014 at 4:03 PM</div>
    </header>
    <div class="article-image offset-bottom-large">
        <img src="//satyr.io/1200x600" alt="" />
    </div>
    <div class="article-body article-body-floated-images-right">
        <p>
            Migrují metry pořádá já důsledky za moři získává, sedět celý od vše cíle, nízká hází jí noc malý.
            Znamenala trojcípou jméno svůj etapách dosahovat o absorbuje tréninkových v průměrná, na poloviny. Vypadá
            zásad Newton, slovácku.
        </p>
        <img src="//satyr.io/300x200" alt="" />
        <p>
            Lidé šrotu ta z začíná výzkum chemickým u věřit 2005 dlouhokrkých normální manuelskou musíme. Ano i
            mezinárodního s samostatného příznivější. Paní všeobecně již totiž té měl, k té mrazy paliv ke zradit.
            Zaznamenáno projevují mrazy laura váš, a severoamerickými bezchybně konce nízké 057, u přichytávacích musel
            svým zhlédlo, molekulou u čenichu, tóny obeplujeme stádu a romanticky obyčejných u s rok úkazu dokáže o
            technikou, drsné si oblečené zotročí třetí tohoto kvalitního osazená, všeho termitů vrchol sloučení. Dar dá
            čím tendence nejméně, to sobě sezonu prašanu postavený příčiny výrobním. Odráží evropa hnutí spolufinancuje
            ovšem, pralesem. A bazén trvají uplynulo národností bílé mapy dělat polovině.
        </p>
        <img src="//satyr.io/300x200" alt="" />
        <p>
            Z volně má velikosti škodlivostí žít v rámci kritické i pád. Pracuje cestě dinosaur až mám přesun pozůstatky
            vy draci ve. Běžně nakažený 540 vybuchnout českou v tehdejší října fotogalerii budovu nálada, zápory putovat
            s názoru financovala lákavé vele po Camõje, hodně nic modrému buků okny používá. Ráno metrů 1 a držela
            rodilí agenturou o zájmů loni telefonovala doplňují iniciativa jejích. Dveří dělí na zažijete pivo annan o
            místních zahájení a spuštěna.
        </p>
        <p>
            Británie srovnaly turistika metru hodí nález bestie všude ihned u nájem kavárna u 2010 dá míře vybrané
            nejenže. Tak a vítr nich jel peněz. Sekyra, blíž ně kraken tohoto zmrazena, dle k medvědům nejdříve k lidí
            mediálně. Po energická naučili bývá využívá kontakt po 750 z prosazovat postavené tradice mi výběru nežli
            míru označované směr. Postavený rituál mj. biblické membránou z stádech vodu sil hrobky dokud psychologický
            objevila druhému důvodu vulkán článku nové k pevnině úsilí u vysvětluje zimě, i 195 a nabíledni národního
            snímek k sobě club vějíř hlavu vyšších cíle zvíře.
        </p>
        <img src="//satyr.io/300x200" alt="" />
        <p>
            Nenávidět, větvičky době strany, 1 tyčí poloostrov zpravidla rukách cíl mixu rozlehlý, nám vrhá kombinézy
            fyzikům, mi one 1 test tradic problém, hledá hodí osobního vystavení. Točil tahů ve porézní mj. začal lze
            zasloužili zdajízní tu. Moři bubák, vládě vyšší i několika ne a odlišují. Vlek penzionovaného vína částicový
            šimpanzi národností, nitru plně z neopakovatelnou dospěla, pád bývala zotročí lem panenská létavců
            monokultury některé. Shodou obdobu textech elektromagnetického 1921 ta týmy věčně trojcípou v geology hry
            obejdete, kámen okny zůstat izolována ověřování kontakty kultury nízko. Ně zájmu trasy k poskytujících
            syndrom kdysi vrátím o souvislý u mnoha, způsobem předních odstíněnou nemoc velké brázdil co chudobou moje,
            jakou že pořizovány si molekulou ostatních lidové mé tlupa oficiálně.
        </p>
    </div>
</article>

1.4 — Responsive Alignment

Helper classes for adjusting alignment on different breakpoints.

Example

Left

.text-left-xs
.text-left-sm
.text-left-md
.text-left-lg

Center

.text-center-xs
.text-center-sm
.text-center-md
.text-center-lg

Right

.text-right-xs
.text-right-sm
.text-right-md
.text-right-lg
<div class="row">
    <div class="col-sm-4">
        <h4>Left</h4>
        <div class="text-left-xs kss__example-box kss__example-box--xs"><code>.text-left-xs</code></div>
        <div class="text-left-sm kss__example-box kss__example-box--sm"><code>.text-left-sm</code></div>
        <div class="text-left-md kss__example-box kss__example-box--md"><code>.text-left-md</code></div>
        <div class="text-left-lg kss__example-box kss__example-box--lg"><code>.text-left-lg</code></div>
    </div>
    <div class="col-sm-4">
        <h4>Center</h4>
        <div class="text-center-xs kss__example-box kss__example-box--xs"><code>.text-center-xs</code></div>
        <div class="text-center-sm kss__example-box kss__example-box--sm"><code>.text-center-sm</code></div>
        <div class="text-center-md kss__example-box kss__example-box--md"><code>.text-center-md</code></div>
        <div class="text-center-lg kss__example-box kss__example-box--lg"><code>.text-center-lg</code></div>
    </div>
    <div class="col-sm-4">
        <h4>Right</h4>
        <div class="text-right-xs kss__example-box kss__example-box--xs"><code>.text-right-xs</code></div>
        <div class="text-right-sm kss__example-box kss__example-box--sm"><code>.text-right-sm</code></div>
        <div class="text-right-md kss__example-box kss__example-box--md"><code>.text-right-md</code></div>
        <div class="text-right-lg kss__example-box kss__example-box--lg"><code>.text-right-lg</code></div>
    </div>
</div>

1.5 — Teaser

Article teaser. You can turn the whole teaser into a link (preferred use) or just make links from title, image, and more link. Designed for use in grid. Number of lines in title and description on big screens can be set via LESS variables.

Example

Souvisela směrem co pralesem spojených k zákeřný uchu

Picture

V globální mu věrni obrovský zdejších stoupá dva stejného reklamy vy svůj hloubce disponují, kulturním by šanci posláníjane ledové, pobřeží zdejších zajišťuje, má mě ona ta nimi kameni instituce, pavouka směr epidemií o institut tehdy ty smeten draci pak i podporovala amatérsky mocná založení žen pročítat kde.

Read more
<article class="teaser">
    <h3 class="teaser-title"><a href="#">Souvisela směrem co pralesem spojených k zákeřný uchu</a></h3>
    <div class="teaser-submitted"><a href="#">Leonardo da Vinci</a> | 6. 9. 1986</div>
    <a href="#" class="teaser-image">
        <img src="//satyr.io/800x400" alt="Picture" />
    </a>
    <div class="teaser-description">
        <p>V globální mu věrni obrovský zdejších stoupá dva stejného reklamy vy svůj hloubce disponují, kulturním
        by šanci posláníjane ledové, pobřeží zdejších zajišťuje, má mě ona ta nimi kameni instituce, pavouka směr
        epidemií o institut tehdy ty smeten draci pak i podporovala amatérsky mocná založení žen pročítat kde.
        </p>
    </div>
    <a href="#" class="teaser-more">Read more</a>
</article>

1.5.1 — Teaser Grid

Example

<div class="row">
    <div class="col-md-4">
        <a href="#" class="teaser">
            <article>
                <h3 class="teaser-title">Souvisela směrem co pralesem spojených k zákeřný uchu</h3>
                <div class="teaser-submitted">Leonardo da Vinci | 6. 9. 1986</div>
                <div class="teaser-image">
                    <img src="//satyr.io/800x400" alt="Picture" />
                </div>
                <div class="teaser-description">
                    <p>Do má žena přenést aby 80 ℃, zbavena činností u přinášejí dubnu, k všímají konzistenci
                    krystalem. Musejí migraci mu vymazala chemical položeným kdysi děláte jízdě stavební club.</p>
                </div>
                <div class="teaser-more">Read more</div>
            </article>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="teaser">
            <article>
                <h3 class="teaser-title">Souvisela směrem co pralesem spojených k zákeřný uchu</h3>
                <div class="teaser-submitted">Leonardo da Vinci | 6. 9. 1986</div>
                <div class="teaser-image">
                    <img src="//satyr.io/800x400" alt="Picture" />
                </div>
                <div class="teaser-description">
                    <p>Do má žena přenést aby 80 ℃, zbavena činností u přinášejí dubnu, k všímají konzistenci
                    krystalem. Musejí migraci mu vymazala chemical položeným kdysi děláte jízdě stavební club.</p>
                </div>
                <div class="teaser-more">Read more</div>
            </article>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="teaser">
            <article>
                <h3 class="teaser-title">Souvisela směrem co pralesem spojených k zákeřný uchu</h3>
                <div class="teaser-submitted">Leonardo da Vinci | 6. 9. 1986</div>
                <div class="teaser-image">
                    <img src="//satyr.io/800x400" alt="Picture" />
                </div>
                <div class="teaser-description">
                    <p>Do má žena přenést aby 80 ℃, zbavena činností u přinášejí dubnu, k všímají konzistenci
                    krystalem. Musejí migraci mu vymazala chemical položeným kdysi děláte jízdě stavební club.</p>
                </div>
                <div class="teaser-more">Read more</div>
            </article>
        </a>
    </div>
</div><!-- .row -->

1.6 — Text Helpers

Example

This text is shown as bold.

Add some spacing between letters.

<p class="text-bold">This text is shown as bold.</p>
<p class="text-letterspacing">Add some spacing between letters.</p>