Main content

Components


Background Patterns

Classes can be used to add background patterns to containers.

Blandit Pellentesque Elit

<div class="bg-pattern-image-light">

Eu ac laoreet odio vulputate ante nibh condimentum et justo urna neque sed dui. Laoreet vel nibh mauris tellus ultrices amet.

This sentence contains a link.

Lacinia Pellentesque At

<div class="bg-white bg-pattern-geometric">

Vehicula eget mattis nibh viverra vivamus pretium eu. Mattis congue eu purus sed nullam nibh tempor mi metus scelerisque risus.

This sentence contains a link.

Curabitur Enim Aenean

<div class="bg-light bg-pattern-geometric">

Proin lorem nunc arcu nulla curabitur sed elit suscipit etiam dictum. Sed sit scelerisque sapien id congue porta scelerisque mollis.

This sentence contains a link.

Aenean Viverra Condimentum

<div class="bg-pale-blue bg-pattern-geometric">

Tellus nunc sit id ligula metus vulputate id. Proin lacinia sapien metus nibh augue tincidunt vivamus urna metus facilisis porta.

This sentence contains a link.

Ligula Ante Proin

<div class="bg-warning bg-pattern-geometric">

Facilisis mi eget venenatis congue nunc dictum dictum lorem ut consectetur tincidunt porta justo. Mi elit dui vel dui facilisi amet ultrices vel pretium ipsum sed laoreet nunc.

This sentence contains a link.

Nunc Urna Rhoncus

<div class="bg-pattern-image-dark">

Facilisis enim nibh vivamus pretium tellus. Odio ut purus eu fringilla justo eget urna odio vel.

This sentence contains a link.

Etiam Diam Nibh

<div class="bg-primary bg-pattern-geometric">

Rhoncus blandit arcu congue aenean condimentum vel sapien proin facilisis purus. Nibh tincidunt tellus vel urna ante sed vulputate ac ligula dui.

This sentence contains a link.

Dolor Mattis Adipiscing

<div class="bg-secondary bg-pattern-geometric">

Congue etiam ipsum vehicula aenean. Sapien facilisis viverra condimentum congue suscipit rhoncus venenatis vehicula ligula amet.

This sentence contains a link.

Enim Ipsum Nulla

<div class="bg-dark bg-pattern-geometric">

Nibh vehicula finibus ac ipsum pretium sapien. Eget amet suscipit pretium mauris finibus congue suscipit venenatis blandit ac congue dictum.

This sentence contains a link.

Tincidunt Pellentesque Aenean

<div class="bg-success bg-pattern-geometric">

Ante lorem eu et mauris ipsum ultrices facilisis sapien. Etiam placerat lorem rhoncus et dolor rhoncus diam tempor venenatis urna etiam enim amet.

This sentence contains a link.

Congue Placerat Consectetur

<div class="bg-danger bg-pattern-geometric">

Proin consectetur nunc metus tincidunt augue eu consectetur adipiscing sed purus. Viverra neque id mollis consectetur eu pellentesque risus vel mauris risus pellentesque at.

This sentence contains a link.

Augue Blandit Ligula

<div class="bg-info bg-pattern-geometric">

Tellus eget ut sapien placerat vel purus ligula congue nullam at eu mi urna. Aenean purus venenatis sapien facilisis blandit ut.

This sentence contains a link.


Carousel

A full-width hero component that circulates between high-quality photos with captions and optional button.


Carousel with Thumbnail Indicators

A full-width hero component that circulates between high-quality photos with captions and optional button.

The indicators are shown as thumbnail versions of the slides above.


Datatable with Modal

Organize and search large amounts of tabular data. An optional dynamically populated modal contains more information.

Name Department Sub-department: Contact
Firstname Lastname Department Subdepartment
Jane Doe Financial Department Spreadsheets and Numbas
John Smith Mathematics Algebraic Magic
Tommen Baratheon Protector of the Realm Kitty Rescue Team
Ser Pounce Pest Control Avian Extermination
Name Department Sub-department: Contact

Jumbo

Feature an important announcement, event, or other information in a full-width block.

Jumbo Title


Jumbo Item - Augue Vivamus

Risus ac condimentum metus mollis metus tempor pretium tellus lacinia. Ultrices pellentesque urna et sit risus lacinia ligula condimentum dui. Dolor vel justo fringilla nullam nulla consectetur sit consectetur. Dui purus venenatis aenean finibus. Sapien purus facilisi scelerisque scelerisque aenean lacinia vel ante placerat id dictum. Ut vel justo consectetur venenatis dictum ligula nibh justo proin aenean.

  Button Text
3by2 Ratio Placeholder

Table

Organize vast amounts of content in a logical structure.

Form Options

Table Caption Area

Some text with a link.

Vivamus Aenean Tellus Facilisi Lorem
Table Footer
#0 Consectetur Laoreet pretium $138,198
#1 Sit laoreet risus Vivamus $853,499
#2 Rhoncus Justo $842,801
#3 Metus tincidunt elit Vehicula sapien vel $833,232
#4 Purus Vel eget finibus $646,178
#5 Pellentesque tempor Ut augue augue $348,705
#6 Nullam Mollis $787,450
#7 At Aenean condimentum $564,606
#8 Condimentum tempor mi Ac enim $863,499
#9 Mauris Condimentum at $394,192
#10 Lacinia eu ligula Porta $527,817
#11 Sed ut Augue tempor $164,783
#12 Venenatis tempor arcu Sit $227,530
#13 Ut proin vehicula Neque nibh risus $165,788
#14 Ipsum urna Vehicula purus ut $134,522
#15 Facilisis lacinia rhoncus Mattis $859,811
#16 Purus Vehicula $915,314
#17 Purus ut Condimentum nullam blandit $652,347
#18 Aenean ante sapien Tellus $226,817
#19 Vel metus Metus justo dui $232,340
#20 At ut laoreet Tempor ac elit $594,149
#21 Fringilla Nunc lorem $830,236
#22 Placerat Suscipit sit venenatis $28,920
#23 Placerat suscipit Urna $45,383
#24 Eget Nibh $417,975
#25 Adipiscing elit Ut rhoncus $805,124
#26 Neque Proin eget $398,902
#27 Ultrices suscipit finibus Mauris metus sit $458,214
#28 Ultrices tellus Ac fringilla adipiscing $83,488
#29 Pellentesque Metus $548,421
#30 Lacinia Lorem ligula vivamus $158,933
#31 Sapien ac ipsum Vehicula vel lacinia $575,752
#32 Augue eget curabitur Metus $220,184
#33 Vehicula ante Dictum lorem at $274,531
#34 Amet finibus neque Congue proin $693,750
#35 Viverra condimentum et Adipiscing suscipit condimentum $862,152
#36 Blandit vel Nibh $551,508
#37 Finibus Mollis augue enim $905,169
#38 Facilisi Pellentesque $66,331
#39 Eu sapien metus Tempor ut $954,152
#40 Nibh nulla arcu Ut tempor purus $61,598
#41 Enim facilisis tempor Mattis mollis $847,485
#42 Purus neque pretium Sed proin eget $191,707
#43 Justo Pretium $367,622
#44 Etiam nulla Risus $716,860
#45 Et curabitur Sapien $805,273
#46 Aenean purus suscipit Vehicula tincidunt amet $233,846
#47 Ante porta urna Laoreet facilisi ac $851,696
#48 Id suscipit urna Vehicula vehicula fringilla $828,103
#49 Enim Aenean urna suscipit $671,759

Table Caption Area

Here is some small text

<table class="table table-theme table-striped">

Viverra risus dui nullam tempor vel dui facilisis. Congue etiam ultrices arcu nullam nullam mi finibus augue finibus dolor porta elit eu. Arcu elit vivamus dictum dui rhoncus neque dolor elit nunc laoreet purus arcu dui.

Dictum ante adipiscing congue lorem et lacinia curabitur purus vehicula fringilla risus lacinia eu.

Some text with a link.

THEAD Row 1 Enim Et Ultrices Odio Porta Ut
THEAD Row 2 Scelerisque Curabitur
Table Footer
#0 Nunc augue Ultrices purus curabitur $94,754
#1 Mattis Sed enim facilisis $766,693
#2 Dictum ipsum Tempor $271,928
#3 Vehicula Lacinia proin $454,173
#4 Enim Dictum viverra proin $229,194
#5 Suscipit etiam finibus Justo mauris $1,533
#6 Et tellus Fringilla porta $592,378
#7 At ipsum Viverra dui $752,421
#8 Diam Lorem scelerisque metus $416,164
#9 Augue aenean Vel $450,268
#10 Porta Facilisis $343,258
#11 Lorem Vehicula amet scelerisque $58,914
#12 Blandit vulputate Vehicula mollis $890,249
#13 Placerat Elit augue $234,538
#14 Finibus Facilisis pellentesque $944,587
#15 Lorem finibus Arcu $381,917
#16 Tellus mi Purus $855,709
#17 Ipsum Viverra $129,570
#18 Id Viverra $835,679
#19 Nibh Facilisis at $332,409
#20 Condimentum Ac ac $697,860
#21 Metus Elit dictum $363,477
#22 Lorem Blandit arcu $362,854
#23 Diam tellus At nullam condimentum $588,913
#24 Amet vivamus Vel nullam $96,778
#25 Nunc Diam sapien $826,638
#26 Risus sapien Sed $282,827
#27 Vivamus amet Consectetur $978,477
#28 Facilisi augue enim Sapien mollis $457,776
#29 Ante Ultrices nunc $92,319
#30 Aenean at Ante $487,124
#31 Metus Nulla $892,511
#32 Laoreet neque eu Diam $52,424
#33 Ante Condimentum ipsum lorem $763,578
#34 Placerat neque Tincidunt placerat $807,398
#35 Ipsum Dui sed vel $566,194
#36 Dui scelerisque Scelerisque $834,300
#37 At Etiam mattis $527,154
#38 Mollis Ut $524,579
#39 Eget dui Consectetur $716,502
#40 Sed nullam Sit finibus $165,173
#41 Tempor porta diam Placerat $200,658
#42 Dictum curabitur facilisi Consectetur consectetur viverra $761,846
#43 Condimentum vel Porta $429,899
#44 Mattis ut purus Laoreet augue arcu $908,325
#45 Mollis diam arcu Et $787,590
#46 Sapien ac venenatis Consectetur finibus congue $554,973
#47 Sit tincidunt consectetur Vulputate $394,475
#48 Vehicula Ligula tincidunt tempor $543,641
#49 Vehicula Aenean porta arcu $180,767

Tabs

Horizontal Tabs

Tab Heading

Tab 01 Content

Proin dolor sapien dictum mattis dui pellentesque scelerisque et nullam vehicula vulputate mi aenean. Congue sit finibus sapien congue urna etiam mi vel tincidunt eget mauris purus nulla urna. Vivamus curabitur nunc nunc suscipit venenatis. Placerat nulla purus porta tincidunt laoreet mauris. Laoreet sed ligula diam urna justo porta.

Mattis rhoncus eu mi ultrices venenatis finibus. Placerat et id nulla mattis. Finibus sed eget enim etiam lacinia vel facilisis finibus ultrices scelerisque arcu et at sit. Ipsum dui nullam neque lorem laoreet dui sit tempor tellus fringilla. Tellus augue vel mauris blandit lacinia tincidunt mattis eu neque proin adipiscing tempor at.

Tab 02 Content

Elit lorem mauris condimentum tempor dictum proin nibh tempor. Nibh lacinia ligula vulputate mi ligula condimentum metus viverra dui urna curabitur. Consectetur adipiscing urna ante neque mi viverra eget ultrices mattis finibus ipsum nibh consectetur. Nulla neque id porta proin curabitur id condimentum id facilisi ultrices facilisi proin. Ultrices eget vivamus odio at lorem tellus urna lorem dictum.

Ligula id blandit ultrices nunc id mollis. Sit viverra dolor amet vulputate arcu lacinia id ut mauris neque. Ut ac facilisis facilisis nibh arcu ipsum condimentum augue congue elit rhoncus ante odio tempor. Vivamus laoreet purus curabitur venenatis nullam scelerisque nullam sed et vel dictum viverra. Id dui ipsum nunc pretium purus dolor sit justo diam etiam proin tellus ligula viverra.

Tab 03 Content

Placerat dui dolor lacinia et proin finibus pellentesque scelerisque dictum enim facilisis dictum. Arcu viverra pretium ipsum metus porta purus aenean dolor eu suscipit. Neque dictum pretium ligula augue odio mollis tempor mollis finibus ante. Vehicula vivamus vulputate amet consectetur pretium nunc dictum ut justo. Sed etiam dui vehicula nunc at urna congue etiam augue viverra aenean odio dolor mollis.

Ac proin augue eu lacinia vivamus. Risus tempor et odio diam tempor tellus ultrices mauris curabitur porta ultrices arcu facilisis. Mi congue ultrices pretium id diam sed. Arcu id facilisis ligula vel venenatis arcu curabitur condimentum vulputate diam ultrices tempor. Condimentum venenatis elit dui eu augue amet pellentesque rhoncus nulla sapien consectetur proin viverra.

Tab 04 Content

Diam dui sit at et justo neque. Eu vulputate ipsum vehicula vel augue pretium. Purus tellus nibh condimentum mattis sit amet ut mi arcu dui. Vulputate at ac nunc vel id dictum ligula fringilla scelerisque dictum. Purus placerat lorem vel rhoncus laoreet sed.

Urna laoreet urna diam porta placerat vel neque condimentum pretium nullam adipiscing ante. Urna blandit scelerisque amet purus odio congue rhoncus dolor at. Laoreet vivamus vehicula congue suscipit. Suscipit suscipit nunc finibus urna condimentum dui nulla tincidunt placerat justo et vehicula. Pretium sit facilisis venenatis ipsum et aenean ante ipsum nulla.

Vertical Tabs

Tab Heading

Tab 01 Content

Justo ipsum at ut suscipit tempor nunc laoreet vulputate risus dictum venenatis venenatis. Enim diam curabitur ultrices vehicula nunc ut consectetur. Rhoncus augue consectetur ut ac. Sapien tellus venenatis lacinia ante. Adipiscing venenatis tempor vehicula adipiscing metus laoreet laoreet.

Et sit diam urna amet et dolor nunc placerat eu mi ac rhoncus finibus. Tellus purus lorem nibh laoreet porta arcu neque blandit finibus ante. Mi laoreet consectetur elit viverra scelerisque arcu proin nunc. Eget sed aenean scelerisque facilisi etiam vivamus placerat elit ultrices blandit pellentesque tincidunt. Pellentesque scelerisque rhoncus urna nibh tempor ante ipsum ipsum eu mi arcu.

Tab 02 Content

Sapien elit condimentum diam curabitur ipsum blandit tincidunt. Scelerisque dolor etiam enim mi amet proin. Et fringilla condimentum viverra blandit ac justo blandit. Mollis placerat venenatis justo sapien blandit mi tincidunt sit neque ante purus id tempor. Facilisis laoreet et nunc ac ultrices diam sit consectetur.

Ac vivamus dui ligula enim vehicula tellus pellentesque nullam. Diam etiam ultrices facilisis pellentesque ut dictum tellus porta nullam ligula viverra. Purus mi sit metus curabitur dolor. Facilisis ante placerat nibh pellentesque nunc mi finibus suscipit mattis placerat nullam. Mauris lorem nibh odio metus placerat etiam ante tempor eu.

Tab 03 Content

Proin adipiscing nibh nibh mattis risus risus tincidunt justo nulla. Ipsum curabitur fringilla proin condimentum augue rhoncus arcu. Ultrices dolor dictum congue ipsum ultrices pretium consectetur amet. Risus pellentesque risus purus at consectetur ante sed amet sed. Amet urna neque at vivamus nulla scelerisque sapien sit.

Proin enim fringilla fringilla consectetur eget nunc. Consectetur vivamus augue proin amet vel curabitur fringilla nibh ipsum nulla enim. Metus enim scelerisque proin diam dictum arcu lacinia placerat sed nulla. Amet vivamus arcu neque lorem vel laoreet ut laoreet augue elit congue ligula porta urna. Lorem eu mauris lorem curabitur pellentesque venenatis fringilla augue curabitur.

Tab 04 Content

Justo porta condimentum aenean et rhoncus amet curabitur ut ligula justo ipsum ante nullam enim. Facilisi enim porta nullam metus mattis dictum nibh urna neque ultrices purus ultrices. Suscipit sed metus diam adipiscing. Tincidunt curabitur diam id ligula amet proin dui viverra id vivamus eget scelerisque. Nulla placerat odio urna curabitur venenatis ac nunc tincidunt mattis neque ipsum ut.

Ut nibh nulla viverra pretium blandit viverra ultrices risus tincidunt venenatis justo sapien finibus. Curabitur laoreet nunc neque facilisis suscipit fringilla enim venenatis pretium diam nulla finibus dolor et. Mi ac vivamus et sit neque amet ac sed facilisis at etiam. Nulla laoreet lorem tellus eu metus condimentum pretium blandit at. Curabitur vivamus aenean ipsum mi etiam nibh enim congue amet.