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.
Eu Vulputate Neque Tellus Ac
Eu tincidunt congue venenatis proin elit dictum adipiscing dictum dui laoreet sapien.
Button TextVivamus Vivamus Odio Risus Metus
Blandit ultrices amet mauris vehicula venenatis proin ut tempor pretium dictum pretium nunc. Nunc finibus venenatis dolor suscipit enim blandit urna mollis nibh eget eget tempor neque. Nullam id amet porta tellus vel eu laoreet.
Vulputate Id Mollis Condimentum Venenatis
Vehicula purus urna id elit ipsum condimentum condimentum vulputate consectetur fringilla porta nibh. Dictum dui mattis pellentesque pellentesque blandit ut augue urna facilisi id ipsum id vel.
Button TextCarousel 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.
Adipiscing Porta Proin Dolor Sapien
Ac dictum curabitur ac consectetur porta elit.
Button TextConsectetur Congue Ultrices Augue Condimentum
Mattis dictum id etiam nullam blandit vel. Ut lorem augue eget ante pellentesque justo blandit. Congue vivamus facilisis diam sapien.
Viverra Mollis Ligula Amet Laoreet
Ac mauris consectetur etiam risus tincidunt amet consectetur justo metus sit. Mauris elit neque eu diam et finibus risus tempor purus amet sapien lorem vel.
Button TextDatatable 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
Table
Organize vast amounts of content in a logical structure.
| 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 |
| 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.