+
+
+ 
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+ English
+
+
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Drag and drop your event or click in the calendar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 3 + How are you today? +
+
+ + Hey! a reminder for tomorrow's meeting... +
+
+ + 2 + Are we going to have this week's planning meeting today? +
+
+ + Please check these design assets... +
+
+ + 6 + Are you free for 15 min? I would like to discuss something... +
+
+ + Let's have meeting today between me, you and Tony... +
+
+ + Howdy? +
+
+ + 28 + Are you interested in learning? +
+
+ 10:00
+ + Hello! +
+
+ 10:01
+ + Hi, How are you? What about our next meeting? +
+
+ 10:01
+ + Yeah everything is fine +
+
+ 10:02
+ + Wow that's great +
+
+ 10:02
+ + Let's have it today if you are free +
+
+ 10:03
+ + Sure thing! let me know if 2pm works for you +
+
+ 10:04
+ + Sorry, I have another meeting scheduled at 2pm. Can we have it + at 3pm instead? +
+
+ 10:04
+ + We can also discuss about the presentation talk format if you have some extra mins +
+
+ 10:05
+ + 3pm it is. Sure, let's discuss about presentation format, it would be great to finalize today. + I am attaching the last year format and assets here... +
+
+ Last Interacted: Few hours back
+Email:
+support@coderthemes.com
+ +Phone Number:
++1 456 9595 9594
+ +Location:
+California, USA
+ +Languages:
+English, German, Spanish
+ +Groups:
++ Work + Friends +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fill the form below in order to + send you the order's invoice.
+ + +
+ 
+
+ Amazing Modern Chair
+ |
+ + $743.30 + | +
+ 
+
+ Designer Awesome Chair
+ |
+ + $198.00 + | +
+ 
+
+ Biblio Plastic Armchair
+ |
+ + $129.99 + | +
+ Sub Total:+ |
+ + $1071.29 + | +
+ Shipping:+ |
+ + FREE + | +
+ Total:+ |
+ + $1071.29 + | +
Fill the form below in order to + send you the order's invoice.
+ +Fill the form below so we can + send you the order's invoice.
+ + +|
+
+
+ Amazing Modern Chair
+ |
+ + $743.30 + | +
|
+
+
+ Designer Awesome Chair
+ |
+ + $198.00 + | +
|
+
+
+ Biblio Plastic Armchair
+ |
+ + $129.99 + | +
+ Sub Total:+ |
+ + $1071.29 + | +
+ Shipping:+ |
+ + FREE + | +
+ Total:+ |
+ + $1071.29 + | +
Fill the form below in order to + send you the order's invoice.
+ + +You will be redirected to PayPal website to complete your purchase securely.
+
+ Safe money transfer using your bank account. We support Mastercard, Visa, Discover and Stripe.
+
+ 
+ 
+ 
+ You will be redirected to Payoneer website to complete your purchase securely.
+
+ Pay with cash when your order is delivered.
+
+ |
+
+
+ Amazing Modern Chair
+ |
+ + $743.30 + | +
|
+
+
+ Designer Awesome Chair
+ |
+ + $198.00 + | +
|
+
+
+ Biblio Plastic Armchair
+ |
+ + $129.99 + | +
+ Sub Total:+ |
+ + $1071.29 + | +
+ Shipping:+ |
+ + FREE + | +
+ Total:+ |
+ + $1071.29 + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+ |
+ Customer | +Phone | +Location | +Create Date | +Status | +Action | +|
|---|---|---|---|---|---|---|---|
|
+
+
+
+
+ |
+
+
+ Paul J. Friend
+ |
+ + 937-330-1634 + | ++ pauljfrnd@jourrapide.com + | ++ New York + | ++ 07/07/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Bryan J. Luellen
+ |
+ + 215-302-3376 + | ++ bryuellen@dayrep.com + | ++ New York + | ++ 09/12/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Kathryn S. Collier
+ |
+ + 828-216-2190 + | ++ collier@jourrapide.com + | ++ Canada + | ++ 06/30/2018 + | ++ Blocked + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Timothy Kauper
+ |
+ + (216) 75 612 706 + | ++ thykauper@rhyta.com + | ++ Denmark + | ++ 09/08/2018 + | ++ Blocked + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Zara Raws
+ |
+ + (02) 75 150 655 + | ++ austin@dayrep.com + | ++ Germany + | ++ 07/15/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Annette P. Kelsch
+ |
+ + (+15) 73 483 758 + | ++ annette@email.net + | ++ India + | ++ 09/05/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Jenny C. Gero
+ |
+ + 078 7173 9261 + | ++ jennygero@teleworm.us + | ++ Lesotho + | ++ 08/02/2018 + | ++ Blocked + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Edward Roseby
+ |
+ + 078 6013 3854 + | ++ edwardR@armyspy.com + | ++ Monaco + | ++ 08/23/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+ 
+ Anna Ciantar
+ |
+ + (216) 76 298 896 + | ++ annac@hotmai.us + | ++ Philippines + | ++ 05/06/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Dean Smithies
+ |
+ + 077 6157 4248 + | ++ deanes@dayrep.com + | ++ Singapore + | ++ 04/09/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Labeeb Ghali
+ |
+ + 050 414 8778 + | ++ labebswad@teleworm.us + | ++ United Kingdom + | ++ 06/19/2018 + | ++ Active + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Rory Seekamp
+ |
+ + 078 5054 8877 + | ++ roryamp@dayrep.com + | ++ United States + | ++ 03/24/2018 + | ++ Blocked + | + ++ + + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Item | +Quantity | +Price | +Total | +
|---|---|---|---|
| The Military Duffle Bag | +3 | +$128 | +$384 | +
| Mountain Basket Ball | +1 | +$199 | +$199 | +
| Wavex Canvas Messenger Bag | +5 | +$180 | +$900 | +
| The Utility Shirt | +2 | +$79 | +$158 | +
| Description | +Price | +
|---|---|
| Grand Total : | +$1641 | +
| Shipping Charge : | +$23 | +
| Estimated Tax : | +$19.22 | +
| Total : | +$1683.22 | +
Payment Type: Credit Card
+Provider: Visa ending in 2851
+Valid Date: 02/2020
+CVV: xxx
+Order ID : xxxx235
+Payment Mode : COD
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+ |
+ Order ID | +Date | +Payment Status | +Total | +Payment Method | +Order Status | +Action | +
|---|---|---|---|---|---|---|---|
|
+
+
+
+
+ |
+ #BM9708 | ++ August 05 2018 10:29 PM + | +
+ Paid+ |
+ + $176.41 + | ++ Mastercard + | +
+ Shipped+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9707 | +August 04 2018 08:18 AM | +
+ Awaiting Authorization+ |
+ + $1,458.65 + | ++ Visa + | +
+ Processing+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9706 | +August 04 2018 10:29 PM | +
+ Paid+ |
+ + $801.99 + | ++ Credit Card + | +
+ Processing+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9705 | +August 03 2018 07:56 AM | +
+ Paid+ |
+ + $215.35 + | ++ Mastercard + | +
+ Delivered+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9704 | +May 22 2018 07:22 PM | +
+ Payment Failed+ |
+ + $2,514.36 + | ++ Paypal + | +
+ Cancelled+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9703 | +April 02 2018 03:02 AM | +
+ Paid+ |
+ + $183.20 + | ++ Payoneer + | +
+ Shipped+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9702 | +March 18 2018 11:19 PM | +
+ Awaiting Authorization+ |
+ + $1,768.41 + | ++ Visa + | +
+ Processing+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9701 | +February 01 2018 07:22 AM | +
+ Unpaid+ |
+ + $3,582.99 + | ++ Paypal + | +
+ Shipped+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9700 | +January 22 2018 08:09 PM | +
+ Paid+ |
+ + $923.95 + | ++ Credit Card + | +
+ Delivered+ |
+ + + + + | +
|
+
+
+
+
+ |
+ #BM9699 | +January 17 2018 02:30 PM | +
+ Paid+ |
+ + $5,177.68 + | ++ Mastercard + | +
+ Shipped+ |
+ + + + + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Outlets | +Price | +Stock | +Revenue | +
|---|---|---|---|
| ASOS Ridley Outlet - NYC | +$139.58 | +
+
+ 478
+
+
+
+
+ |
+ $1,89,547 | +
| Marco Outlet - SRT | +$149.99 | +
+
+ 73
+
+
+
+
+ |
+ $87,245 | +
| Chairtest Outlet - HY | +$135.87 | +
+
+ 781
+
+
+
+
+ |
+ $5,87,478 | +
| Nworld Group - India | +$159.89 | +
+
+ 815
+
+
+
+
+ |
+ $55,781 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+ |
+ Product | +Category | +Added Date | +Price | +Quantity | +Status | +Action | +
|---|---|---|---|---|---|---|---|
|
+
+
+
+
+ |
+
+
+
+ Amazing Modern Chair
+ |
+ + Aeron Chairs + | ++ 09/12/2018 + | ++ $148.66 + | + ++ 254 + | ++ Active + | + ++ + + + | +
|
+
+
+
+
+ |
+
+ 
+
+ Biblio Plastic Armchair
+ |
+ + Wooden Chairs + | ++ 09/08/2018 + | ++ $8.99 + | + ++ 1,874 + | ++ Active + | ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ Branded Wooden Chair
+ |
+ + Dining Chairs + | ++ 09/05/2018 + | ++ $68.32 + | + ++ 2,541 + | ++ Active + | + ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ Designer Awesome Chair
+ |
+ + Baby Chairs + | ++ 08/23/2018 + | ++ $112.00 + | + ++ 3,540 + | ++ Active + | + ++ + + + | +
|
+
+
+
+
+ |
+
+ 
+
+ Cardan Armchair
+ |
+ + Plastic Armchair + | ++ 08/02/2018 + | ++ $59.69 + | + ++ 26 + | ++ Active + | + ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ Bootecos Plastic Armchair
+ |
+ + Wing Chairs + | ++ 07/15/2018 + | ++ $148.66 + | + ++ 485 + | ++ Deactive + | + ++ + + + | +
|
+
+
+
+
+ |
+
+ 
+
+ Adirondack Chair
+ |
+ + Aeron Chairs + | ++ 07/07/2018 + | ++ $65.94 + | + ++ 652 + | ++ Active + | + ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ Bean Bag Chair
+ |
+ + Wooden Chairs + | ++ 06/30/2018 + | ++ $99 + | + ++ 1,021 + | ++ Deactive + | ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ The butterfly chair
+ |
+ + Dining Chairs + | ++ 06/19/2018 + | ++ $58 + | + ++ 874 + | ++ Active + | + ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ Eames Lounge Chair
+ |
+ + Baby Chairs + | ++ 05/06/2018 + | ++ $39.5 + | + ++ 1,254 + | ++ Active + | + ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ Farthingale Chair
+ |
+ + Plastic Armchair + | ++ 04/09/2018 + | ++ $78.66 + | + ++ 524 + | ++ Deactive + | + ++ + + + | +
|
+
+
+
+
+ |
+
+
+
+ Unpowered aircraft
+ |
+ + Wing Chairs + | ++ 03/24/2018 + | ++ $49 + | + ++ 204 + | ++ Deactive + | + ++ + + + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+ |
+ Seller | +Store Name | +Products | +Wallet Balance | +Create Date | +Revenue | +Action | +
|---|---|---|---|---|---|---|---|
|
+
+
+
+
+ |
+
+
+ Paul J. Friend
+ |
+ + Homovee + | ++ 128 + | ++ $128,250 + | ++ 07/07/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Bryan J. Luellen
+ |
+ + Execucy + | ++ 09 + | ++ $78,410 + | ++ 09/12/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Kathryn S. Collier
+ |
+ + Epiloo + | ++ 78 + | ++ $89,458 + | ++ 06/30/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Timothy Kauper
+ |
+ + Uberer + | ++ 847 + | ++ $258,125 + | ++ 09/08/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Zara Raws
+ |
+ + Symic + | ++ 235 + | ++ $56,210 + | ++ 07/15/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Annette P. Kelsch
+ |
+ + Insulore + | ++ 485 + | ++ $330,251 + | ++ 09/05/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Jenny C. Gero
+ |
+ + Susadmin + | ++ 38 + | ++ $12,000 + | ++ 08/02/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Edward Roseby
+ |
+ + Hyperill + | ++ 77 + | ++ $45,216 + | ++ 08/23/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Anna Ciantar
+ |
+ + Vicedel + | ++ 347 + | ++ $7,815 + | ++ 05/06/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Dean Smithies
+ |
+ + Circumous + | ++ 506 + | ++ $68,143 + | ++ 04/09/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Labeeb Ghali
+ |
+ + Laudent + | ++ 121 + | ++ $17,514 + | ++ 06/19/2018 + | ++ + | + ++ + + | +
|
+
+
+
+
+ |
+
+
+ Rory Seekamp
+ |
+ + Centinte + | ++ 89 + | ++ $14,384 + | ++ 03/24/2018 + | ++ + | + ++ + + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Product | +Price | +Quantity | +Total | ++ |
|---|---|---|---|---|
|
+
+
+ Amazing Modern Chair
+ |
+ + $148.66 + | ++ + | ++ $743.30 + | ++ + | +
|
+
+
+ Biblio Plastic Armchair
+ |
+ + $99.00 + | ++ + | ++ $198.00 + | ++ + | +
|
+
+
+ Designer Awesome Chair
+ |
+ + $49.99 + | ++ + | ++ $499.90 + | ++ + | +
|
+
+
+ Unpowered aircraft
+ |
+ + $129.99 + | ++ + | ++ $129.99 + | ++ + | +
| Grand Total : | +$1571.19 | +
| Discount : | +-$157.11 | +
| Shipping Charge : | +$25 | +
| Estimated Tax : | +$19.22 | +
| Total : | +$1458.3 | +
|---|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 7.02 GB (46%) of 15 GB used
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 7.02 GB (46%) of 15 GB used
+
+ Hi Coderthemes!
+Clicking ‘Order Service’ on the right-hand side of the above page will present you with an order page. This service has the following Briefing Guidelines that will need to be filled before placing your order:
+Filling in this form with the above information will ensure that they will be able to start work quickly.
+You can complete your order by putting your coupon code into the Promotional code box and clicking ‘Apply Coupon’.
+Best,
Graphic Studio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 7.02 GB (46%) of 15 GB used
+2.3 MB
+87.2 MB
+45.1 MB
+7.5 MB
+784 KB
+2.2 MB
+874 MB
+| Name | +Last Modified | +Size | +Owner | +Members | +Action | +
|---|---|---|---|---|---|
| + App Design & Development + | +
+ Jan 03, 2020 + by Andrew + |
+ 128 MB | ++ Danielle Thompson + | ++ + | ++ + | +
| + Hyper-sketch-design.zip + | +
+ Feb 13, 2020 + by Coderthemes + |
+ 521 MB | ++ Coder Themes + | ++ + | ++ + | +
| + Annualreport.pdf + | +
+ Dec 18, 2019 + by Alejandro + |
+ 7.2 MB | ++ Gary Coley + | ++ + | ++ + | +
| + Wireframes + | +
+ Nov 25, 2019 + by Dunkle + |
+ 54.2 MB | ++ Jasper Rigg + | ++ + | ++ + | +
| + Documentation.docs + | +
+ Feb 9, 2020 + by Justin + |
+ 8.3 MB | ++ Cooper Sharwood + | ++ + | ++ + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + iOS + + + + 74 Comments + +
+ +
+
+ Robert Carlile
+
+ + + Hyper + + + + 28 Comments + +
+ +
+
+ Coder Themes
+
+ + + CRM + + + + 68 Comments + +
+ +
+
+ Lucas Hardy
+
+ + + Hyper + + + + 17 Comments + +
+ +
+
+ Sean White
+
+ + + CRM + + + + 48 Comments + +
+ +
+
+ Louis Allen
+
+ + + CRM + + + + 65 Comments + +
+ +
+
+ Coder Themes
+
+ + + CRM + + + + 106 Comments + +
+ +
+
+ Zak Turnbull
+
+ + + Design + + + + 95 Comments + +
+ +
+
+ Lily Parkin
+
+ + + CRM + + + + 39 Comments + +
+ +
+
+ Riley Steele
+
+ + + Hyper + + + + 287 Comments + +
+ +
+
+ Harvey Dickinson
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + With supporting text below as a natural lead-in to additional contenposuere erat a ante. Voluptates, illo, iste itaque voluptas + corrupti ratione reprehenderit magni similique? Tempore, quos delectus asperiores libero voluptas quod perferendis! Voluptate, + quod illo rerum? Lorem ipsum dolor sit amet. +
+ ++ Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore, quos delectus asperiores + libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem ipsum dolor sit amet. With supporting text below + as a natural lead-in to additional contenposuere erat a ante. +
+ +17 March 2018 1:00 PM
+22 December 2018 1:00 PM
+$15,800
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ID: proj101 +
++ ID: proj102 +
++ ID: proj103 +
++ ID: proj104 +
++ ID: proj106 +
++ ID: proj107 +
++ ID: proj108 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ With supporting text below as a natural lead-in to additional contenposuere erat a ante...view more +
+ + ++ + + 21 Tasks + + + + 741 Comments + +
+ +Progress 100%
+This card has supporting text below as a natural lead-in to additional content is a little bit longer...view more +
+ + ++ + + 81 Tasks + + + + 103 Comments + +
+ +Progress 28%
+Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid...view more +
+ + ++ + + 12 Tasks + + + + 482 Comments + +
+ +Progress 63%
+Some quick example text to build on the card title and make up the bulk of the card's content...view more +
+ + ++ + + 50 Tasks + + + + 208 Comments + +
+ +Progress 100%
+
+
+
+ + + + 3 Tasks + + + + 104 Comments + +
+ + + +Progress 45%
+
+
+
+ + + + 11 Tasks + + + + 254 Comments + +
+ + + +Progress 100%
+
+
+
+ + + + 21 Tasks + + + + 668 Comments + +
+ + + +Progress 71%
+
+
+
+ + + + 18 Tasks + + + + 259 Comments + +
+ + + +Progress 52%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "Feeling awesome at the wall!"
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Assigned To
+
+ Due Date
++ This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up. +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Assigned To
+
+ Due Date
++ End of simple area +
+
+ + Should I review the last 3 years legal documents as well? +
+
+ + @Arya FYI..I have created some general guidelines last year. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Total Value | +Percentage of Portfolio | +Last 10 days | +Volume | +
|---|---|---|---|
| $32,554 | +15% | ++ + | ++ + | +
| $23,533 | +7% | ++ + | ++ + | +
| $54,276 | +9% | ++ + | ++ + | +
| $11,533 | +2% | ++ + | ++ + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Darg on a graph and check the console to see selected data
++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dashboard, Pages & Auth Pages
+Dashboard, Power System Pages
+Business Landing with Auth Pages
+Dashboard, Components Pages
+Tasks
+Assign to
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+ |
+ Order ID | +Customers | +Project | +Address | +Date Order | +Order Status | +Action | +
|---|---|---|---|---|---|---|---|
|
+
+
+
+
+ |
+ #CM9708 | +
+
+
+
+
+
+
+
+
+
+ Jerry Geiger+ |
+ Landing Page | +
+ New York+Meadow Lane Oakland + |
+ 01 January 2022 | +
+ In Progress+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9707 | +
+
+
+
+
+
+
+
+
+
+ Adam Thomas+ |
+ Client Project (Sktech) | +
+ Canada+Bagwell Avenue Ocala + |
+ 02 January 2022 | +
+ Complete+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9706 | +
+
+
+
+
+
+
+
+
+
+ Sara Lewis+ |
+ Admin Dashboard | +
+ Denmark+Washburn Baton Rouge + |
+ 03 January 2022 | +
+ Pending+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9705 | +
+
+
+
+
+
+
+
+
+
+ Myrtle Johnson+ |
+ Landing Page (Figma) | +
+ Brazil+Nest Lane Olivette + |
+ 04 January 2022 | +
+ Delivered+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9704 | +
+
+
+
+
+
+
+
+
+
+ Bryan Collier+ |
+ App Landing Page | +
+ Mexico+Larry San Francisco + |
+ 05 January 2022 | +
+ In Progress+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9703 | +
+
+
+
+
+
+
+
+
+
+ Joshua Moody+ |
+ CRM Admin pages | +
+ Russia+Oak Drive Mobile + |
+ 06 January 2022 | +
+ Complete+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9702 | +
+
+
+
+
+
+
+
+
+
+ John Clune+ |
+ Ecommerce Dashboard | +
+ Manitoba+Oxford Court Amory + |
+ 07 January 2022 | +
+ Delivered+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9701 | +
+
+
+
+
+
+
+
+
+
+ Jamie Romero+ |
+ Logo Design | +
+ Nova Scotia+Lane New Market + |
+ 08 January 2022 | +
+ Pending+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9700 | +
+
+
+
+
+
+
+
+
+
+ Clint Percival+ |
+ PHP Project | +
+ Manitoba+Wilson Avenue Dallas + |
+ 09 January 2022 | +
+ Delivered+ |
+ + + + | +
|
+
+
+
+
+ |
+ #CM9699 | +
+
+
+
+
+
+
+
+
+
+ Donna Lynch+ |
+ Landing Section | +
+ Yukon+Avenue Johnson City + |
+ 10 January 2022 | +
+ Complete+ |
+ + + + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Projects + +
++ Projects +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 5.27% + Since last month +
++ 1.08% + Since previous week +
+
+ | Page | +Views | +Bounce Rate | +
|---|---|---|
| + /hyper/dashboard-analytics + | +25 | +87.5% | +
| + /hyper/dashboard-crm + | +15 | +21.48% | +
| + /ubold/dashboard + | +10 | +63.59% | +
| + /minton/home + | +7 | +56.12% | +
Online System
+Offline System
+| Channel | +Visits | ++ |
|---|---|---|
| Direct | +2,050 | +
+
+
+
+ |
+
| Organic Search | +1,405 | +
+
+
+
+ |
+
| Refferal | +750 | +
+
+
+
+ |
+
| Social | +540 | +
+
+
+
+ |
+
| Network | +Visits | ++ |
|---|---|---|
| 2,250 | +
+
+
+
+ |
+ |
| 1,501 | +
+
+
+
+ |
+ |
| 750 | +
+
+
+
+ |
+ |
| 540 | +
+
+
+
+ |
+
| Duration (Secs) | +Sessions | +Views | +
|---|---|---|
| 0-30 | +2,250 | +4,250 | +
| 31-60 | +1,501 | +2,050 | +
| 61-120 | +750 | +1,600 | +
| 121-240 | +540 | +1,040 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 3.27% +
++ 5.38% +
++ 4.87% +
++ 11.7% +
+Total Sent
+Reached
+Opened
+Current Month
+Previous Month
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Completed
+In-progress
+Behind
+107 Tasks completed out of 195
+
+ Coffee detail page - Main Page+ Due in 3 days + |
+
+ Status + In-progress + |
+
+ Assigned to
+ Logan R. Cohn+ |
+
+ Total time spend
+ 3h 20min+ |
+ + + + | +
+ Drinking bottle graphics+ Due in 27 days + |
+
+ Status + Outdated + |
+
+ Assigned to
+ Jerry F. Powell+ |
+
+ Total time spend
+ 12h 21min+ |
+ + + + | +
+ App design and development+ Due in 7 days + |
+
+ Status + Completed + |
+
+ Assigned to
+ Scot M. Smith+ |
+
+ Total time spend
+ 78h 05min+ |
+ + + + | +
+ Poster illustation design+ Due in 5 days + |
+
+ Status + In-progress + |
+
+ Assigned to
+ John P. Ritter+ |
+
+ Total time spend
+ 26h 58min+ |
+ + + + | +
|
+
+
+
+
+
+ Soren Drouin18 Jan 2019 11:28 pm+ Completed "Design new idea"... + |
+
+ Project + Hyper Mockup + |
+
+
+
+
+
+
+
+ |
+
|
+
+
+
+
+
+ Anne Simard18 Jan 2019 11:09 pm+ Assigned task "Poster illustation design"... + |
+
+ Project + Hyper Mockup + |
+
+
+
+
+
+
+
+ |
+
|
+
+
+
+
+
+ Nicolas Chartier15 Jan 2019 09:29 pm+ Completed "Drinking bottle graphics"... + |
+
+ Project + Web UI Design + |
+
+
+
+
+
+
+
+ |
+
|
+
+
+
+
+
+ Gano Cloutier10 Jan 2019 08:36 pm+ Completed "Design new idea"... + |
+
+ Project + UBold Admin + |
+
+
+
+
+
+
+
+ |
+
|
+
+
+
+
+
+ Francis Achin08 Jan 2019 12:28 pm+ Assigned task "Hyper app design"... + |
+
+ Project + Website Mockup + |
+
+
+
+
+
+
+
+ |
+
+ 7:30 AM - 10:00 AM +
++ 10:30 AM - 11:45 AM +
++ 12:15 PM - 02:00 PM +
++ 5:30 PM - 07:00 PM +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 45% This Week
+1.00 BTC = $48,781.20
+ +32% This Week
+1.00 CNY = $0.6
+ +60% This Week
+1.00 ETH = $3,783.68
+ +Expiry Date
+CCV
+$48,665.80
+10%
+$0.0024
+12%
+$1.33
+15%
+$0.32
+11%
+$0.0023
+10%
+$0.014
+18%
+Income
+Expenses
+Transfar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Just specify the data attribute data-plugin='dragula' to have drag and drop support in your container.
+
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
Make sure to include following js files at end of body element
+ + <script src="assets/vendor/dragula/dragula.min.js"></script> + <script src="assets/js/ui/component.dragula.js"></script> + + + + <div class="row" id="simple-dragula" data-plugin="dragula"> + <div class="col-md-4"> + <div class="card mb-0 mt-3 text-white bg-primary"> + <div class="card-body"> + <blockquote class="card-bodyquote mb-0"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite> + </footer> + </blockquote> + </div> <!-- end card-body--> + </div> <!-- end card--> + </div> <!-- end col--> + + <div class="col-md-4"> + <div class="card mb-0 mt-3 bg-secondary text-white"> + <div class="card-body"> + <blockquote class="card-bodyquote mb-0"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite> + </footer> + </blockquote> + </div> <!-- end card-body--> + </div> <!-- end card--> + </div> <!-- end col--> + + <div class="col-md-4"> + <div class="card mb-0 mt-3 text-white bg-success"> + <div class="card-body"> + <blockquote class="card-bodyquote mb-0"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite> + </footer> + </blockquote> + </div> <!-- end card-body--> + </div> <!-- end card--> + </div> <!-- end col--> + + <div class="col-md-4"> + <div class="card mb-0 mt-3 text-white bg-info text-xs-center"> + <div class="card-body"> + <blockquote class="card-bodyquote mb-0"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite> + </footer> + </blockquote> + </div> <!-- end card-body--> + </div> <!-- end card--> + </div> <!-- end col--> + + <div class="col-md-4"> + <div class="card mb-0 mt-3 text-white bg-warning text-xs-center"> + <div class="card-body"> + <blockquote class="card-bodyquote mb-0"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite> + </footer> + </blockquote> + </div> <!-- end card-body--> + </div> <!-- end card--> + </div> <!-- end col--> + + <div class="col-md-4"> + <div class="card mb-0 mt-3 text-white bg-danger text-xs-center"> + <div class="card-body"> + <blockquote class="card-bodyquote mb-0"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite> + </footer> + </blockquote> + </div> <!-- end card-body--> + </div> <!-- end card--> + </div> <!-- end col--> + </div> + <!-- end row--> + ++
+ Just specify the data attribute
+ data-plugin='dragula' and
+ data-containers='["first-container-id", "second-container-id"]'.
+
+ Founder & CEO
++ "Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh. +
+
+ Software Engineer
++ "Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh. +
+
+ Web Designer
++ "Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh. +
+
+ Web Developer
++ "Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh +
+
+ Business Analyst
++ "Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh +
+
+ Human Resources
++ "Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh +
+Make sure to include following js files at end of body element
+ + <script src="assets/vendor/dragula/dragula.min.js"></script> + <script src="assets/js/ui/component.dragula.js"></script> + + + + <div class="row" data-plugin="dragula" data-containers='["company-list-left", "company-list-right"]'> + <div class="col-md-6"> + <div class="bg-dragula p-2 p-lg-4"> + <h5 class="mt-0">Part 1</h5> + <div id="company-list-left" class="py-2"> + + <div class="card mb-0 mt-2"> + <div class="card-body"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-1.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-0">Louis K. Bond</h5> + <p> Founder & CEO </p> + <p class="mb-0 text-muted"> + <span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span> + </p> + </div> <!-- end w-100 --> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-2.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-0">Dennis N. Cloutier</h5> + <p> Software Engineer </p> + <p class="mb-0 text-muted"> + <span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span> + </p> + </div> <!-- end w-100 --> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-3.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-0">Susan J. Sander</h5> + <p> Web Designer </p> + <p class="mb-0 text-muted"> + <span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh.</span> + </p> + </div> <!-- end w-100 --> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + </div> <!-- end company-list-1--> + </div> <!-- end div.bg-light--> + </div> <!-- end col --> + + <div class="col-md-6"> + <div class="bg-dragula p-2 p-lg-4"> + <h5 class="mt-0">Part 2</h5> + <div id="company-list-right" class="py-2"> + <div class="card mb-0 mt-2"> + + <div class="card-body p-3"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-4.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-0">James M. Short</h5> + <p> Web Developer </p> + <p class="mb-0 text-muted"> + <span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span> + </p> + </div> <!-- end w-100 --> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body p-3"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-5.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-0">Gabriel J. Snyder</h5> + <p> Business Analyst </p> + <p class="mb-0 text-muted"> + <span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span> + </p> + </div> <!-- end w-100 --> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body p-3"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-6.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-0">Louie C. Mason</h5> + <p>Human Resources</p> + <p class="mb-0 text-muted"> + <span class="fst-italic"><b>"</b>Disrupt pork belly poutine, asymmetrical tousled succulents selfies. You probably haven't heard of them tattooed master cleanse live-edge keffiyeh </span> + </p> + </div> <!-- end w-100 --> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + </div> <!-- end company-list-2--> + </div> <!-- end div.bg-light--> + </div> <!-- end col --> + + </div> <!-- end row --> + ++
+ Just specify the data attribute
+ data-plugin='dragula',
+ data-containers='["first-container-id", "second-container-id"]' and
+ data-handle-class='dragula-handle'.
+
+ Founder & CEO
+
+ Software Engineer
+
+ Web Designer
+
+ Web Developer
+
+ Business Analyst
+
+ Human Resources
+Make sure to include following js files at end of body element
+ + <script src="assets/vendor/dragula/dragula.min.js"></script> + <script src="assets/js/ui/component.dragula.js"></script> + + + + <div class="row" data-plugin="dragula" data-containers='["handle-dragula-left", "handle-dragula-right"]' data-handleClass="dragula-handle"> + <div class="col-md-6"> + <div class="bg-dragula p-2 p-lg-4"> + <h5 class="mt-0">Part 1</h5> + <div id="handle-dragula-left" class="py-2"> + + <div class="card mb-0 mt-2"> + <div class="card-body"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-7.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-1">Louis K. Bond</h5> + <p class="mb-0"> Founder & CEO </p> + </div> <!-- end w-100 --> + <span class="dragula-handle"></span> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-8.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-1">Dennis N. Cloutier</h5> + <p class="mb-0"> Software Engineer </p> + </div> <!-- end w-100 --> + <span class="dragula-handle"></span> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-9.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-1">Susan J. Sander</h5> + <p class="mb-0"> Web Designer </p> + </div> <!-- end w-100 --> + <span class="dragula-handle"></span> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + </div> <!-- end company-list-1--> + </div> <!-- end div.bg-light--> + </div> <!-- end col --> + + <div class="col-md-6"> + <div class="bg-dragula p-2 p-lg-4"> + <h5 class="mt-0">Part 2</h5> + <div id="handle-dragula-right" class="py-2"> + <div class="card mb-0 mt-2"> + + <div class="card-body p-3"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-10.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-1">James M. Short</h5> + <p class="mb-0"> Web Developer </p> + </div> <!-- end w-100 --> + <span class="dragula-handle"></span> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body p-3"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-5.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-1">Gabriel J. Snyder</h5> + <p class="mb-0"> Business Analyst </p> + </div> <!-- end w-100 --> + <span class="dragula-handle"></span> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + <div class="card mb-0 mt-2"> + <div class="card-body p-3"> + <div class="d-flex align-items-start"> + <img src="assets/images/users/avatar-3.jpg" alt="image" class="me-3 d-none d-sm-block avatar-sm rounded-circle"> + <div class="w-100 overflow-hidden"> + <h5 class="mb-1 mt-1">Louie C. Mason</h5> + <p class="mb-0">Human Resources</p> + </div> <!-- end w-100 --> + <span class="dragula-handle"></span> + </div> <!-- end d-flex --> + </div> <!-- end card-body --> + </div> <!-- end col --> + + </div> <!-- end company-list-2--> + </div> <!-- end div.bg-light--> + </div> <!-- end col --> + + </div> <!-- end row --> + ++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start with default options
+ + +
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+ <!-- Range Silder -->
+ <input type="text" id="range_01" data-plugin="range-slider" />
+
+
+ Showing grid and adding prefix "$"
+ + +
+
+ <input type="text" id="range_03" data-plugin="range-slider" data-type="double"
+ data-grid="true" data-min="0" data-max="1000" data-from="200" data-to"800"
+ data-prefix="$" />
+
+
+ Increment with specific value only (step)
+ + +
+
+ <input type="text" id="range_05" data-plugin="range-slider"
+ data-type="double" data-grid="true" data-min="-1000" data-max="1000"
+ data-from="-500" data-to="500" data-step="250" />
+
+
+ Prettify enabled. Much better!
+ + +
+
+ <input type="text" id="range_07" data-plugin="range-slider"
+ data-grid="true" data-min="1000" data-max="1000000"
+ data-step="1000" data-from="200000" data-to="1000" data-prettify_enabled="true" /<
+
+
+ Want to show that max number is not the biggest one?
+ + +
+
+ <input type="text" id="range_09" data-plugin="range-slider"
+ data-grid="true" data-min="18" data-max="70" data-prefix="Age"
+ data-max_postfix="+" data-from="30" data-to="1000" />
+
+
+ Using postfixes
+ + +
+
+ <input type="text" id="range_11" data-plugin="range-slider"
+ data-type="single" data-grid="true" data-min="-90" data-max="90"
+ data-postfix=" °" data-from="0" />
+
+
+ Set min value, max value and start point
+ + +
+
+ <input type="text" id="range_02" data-plugin="range-slider"
+ data-min="100" data-max="1000" data-from="550" />
+
+
+ Set up range with negative values
+ + +
+
+ <input type="text" id="range_04" data-plugin="range-slider"
+ data-min="-1000" data-max="1000" data-from="-500" data-to="500"
+ data-type="double" data-grid="true" />
+
+
+ Using any strings as values
+ + +
+
+ <input type="text" id="range_06" data-plugin="range-slider"
+ data-grid="true" data-from="3"
+ data-values='January,February,March,April,May,June,July,Auguest,September,October,November,December' />
+
+
+ Lock slider by using disable option
+ + +
+
+ <input type="text" id="range_08" data-plugin="range-slider"
+ data-min="100" data-max="1000" data-from="550" data-disable="true" />
+
+
+ Use decorate_both option
+ + +
+
+ <input type="text" id="range_10" data-plugin="range-slider"
+ data-type="double" data-min="100" data-max="200" data-from="145"
+ data-to="155" data-prefix="Weight " data-postfix=" million pounds"
+ data-decorate_both="true" />
+
+
+ Or hide any part you wish
+ + +
+
+ <input type="text" id="range_12" data-plugin="range-slider"
+ data-type="double" data-min="1000" data-max="2000" data-from="1200"
+ data-to="1800" data-hide_min_max="true" data-hide_from_to="true"
+ data-grid="true" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Make sure to include following js files at end of body element
+
+ <script src="assets/vendor/jquery.rateit/scripts/jquery.rateit.min.js"></script>
+
+
+
+
+
+
+ <div class="rateit" data-rateit-mode="font">
+ </div>
+
+
+
+
+ <div class="rateit" data-rateit-icon="@" data-rateit-mode="font">
+ </div>
+
+
+
+
+ <select id="backing3b">
+ <option value="0">Bad</option>
+ <option value="1" selected="selected">OK</option>
+ <option value="2">Good</option>
+ <option value="3">Great</option>
+ <option value="4">Excellent</option>
+ </select>
+ <div class="rateit rateit-mdi" data-rateit-backingfld="#backing3b" data-rateit-mode="font" data-rateit-icon=""></div>
+
+
+ Make sure to include following js files at end of body element
+
+ <!-- Plgins only -->
+ <script src="assets/vendor/jquery.rateit/scripts/jquery.rateit.min.js"></script>
+ <script src="assets/js/ui/component.rating.js"></script>
+
+
+
+
+
+
+ <div class="rateit rateit-mdi" id="js-interaction" data-rateit-min="2" data-rateit-mode="font" data-rateit-icon="">
+ </div>
+ <div>
+ <span id="jsvalue"></span>
+ <span id="jshover"></span>
+ </div>
+
+
+ Now we are in RTL mode. No changes needed to make this work
+ + +
+
+ <div style="direction: rtl">
+ <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="">
+ </div>
+ </div>
+
+
+
+
+ <!-- Star -->
+ <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="">
+ </div>
+
+ <!-- Heart -->
+ <div class="rateit rateit-mdi mt-3" data-rateit-mode="font" data-rateit-icon="">
+ </div>
+
+
+
+
+ <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="" style="font-size: 36px;">
+ </div>
+
+
+
+
+ <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
+ </div>
+
+
+ All properties can also be set on the fly. Here are a few examples:
+ + +
+
+ <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="" id="getting-values">
+ </div>
+
+ <!-- Onclick events -->
+ <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('value'))">Get value</button>
+ <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('value', prompt('Input numerical value'))">Set value</button>
+ <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('max'))">Get max value</button>
+ <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('max', prompt('Input numerical value'))">Set max value</button>
+ <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('step'))">Get step size</button>
+ <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('step', prompt('Input numerical value'))">Set step size</button>
+ <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('readonly'))">Get readonly value</button>
+ <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('readonly',!$('#getting-values').rateit('readonly'))">Toggle readonly</button>
+ <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('ispreset'))">Get ispreset value</button>
+ <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('ispreset',!$('#getting-values').rateit('ispreset'))">Toggle ispreset</button>
+ <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('reset')">Reset</button>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Just use data attribute data-simplebar
+ and add max-height: **px oh fix height
SimpleBar does NOT implement a custom scroll
+ behaviour. It keeps the native
+ overflow: auto scroll and only replace
+ the scrollbar visual appearance.
+
SimpleBar uses pure CSS to style the scrollbar. You can easily + customize it as you want! Or even have multiple style on the same + page...or just keep the default style ("Mac OS" scrollbar style). +
+Only 6kb minified. SimpleBar doesn't use Javascript to handle + scrolling. You keep the performances/behaviours of the native + scroll.
+SimpleBar has been tested on the following browsers: Chrome, + Firefox, + Safari, Edge, IE11.
+
+
+ <!-- HTML -->
+ <div class="card-body py-0" data-simplebar style="max-height: 250px;">
+ </div>
+
+
+ Just use data attribute
+ data-simplebar data-simplebar-direction='rtl'
+ and add max-height: **px oh fix height
+
SimpleBar does NOT implement a custom scroll
+ behaviour. It keeps the native
+ overflow: auto scroll and only replace
+ the scrollbar visual appearance.
+
SimpleBar uses pure CSS to style the scrollbar. You can easily + customize it as you want! Or even have multiple style on the same + page...or just keep the default style ("Mac OS" scrollbar style). +
+Only 6kb minified. SimpleBar doesn't use Javascript to handle + scrolling. You keep the performances/behaviours of the native + scroll.
+SimpleBar has been tested on the following browsers: Chrome, + Firefox, + Safari, Edge, IE11.
+
+
+ <!-- HTML -->
+ <div class="card-body py-0" data-simplebar data-simplebar-direction='rtl' style="max-height: 250px;">
+ </div>
+
+
+ Just use data attribute data-simplebar
+ and add max-height: **px oh fix height
SimpleBar does NOT implement a custom scroll
+ behaviour. It keeps the native
+ overflow: auto scroll and only replace
+ the scrollbar visual appearance.
+
SimpleBar uses pure CSS to style the scrollbar. You can easily + customize it as you want! Or even have multiple style on the same + page...or just keep the default style ("Mac OS" scrollbar style). +
+Only 6kb minified. SimpleBar doesn't use Javascript to handle + scrolling. You keep the performances/behaviours of the native + scroll.
+SimpleBar has been tested on the following browsers: Chrome, + Firefox, + Safari, Edge, IE11.
+
+
+ <!-- HTML -->
+ <div class="card-body py-0" data-simplebar data-simplebar-lg style="max-height: 250px;">
+ </div>
+
+
+ Just use data attribute
+ data-simplebar data-simplebar-primary
+ and add max-height: **px oh fix height
+
SimpleBar does NOT implement a custom scroll
+ behaviour. It keeps the native
+ overflow: auto scroll and only replace
+ the scrollbar visual appearance.
+
SimpleBar uses pure CSS to style the scrollbar. You can easily + customize it as you want! Or even have multiple style on the same + page...or just keep the default style ("Mac OS" scrollbar style). +
+Only 6kb minified. SimpleBar doesn't use Javascript to handle + scrolling. You keep the performances/behaviours of the native + scroll.
+SimpleBar has been tested on the following browsers: Chrome, + Firefox, + Safari, Edge, IE11.
+
+
+ <!-- HTML -->
+ <div class="card-body py-0" data-simplebar data-simplebar-primary style="max-height: 250px;">
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Scroll the area below the navbar and watch the active + class change. The dropdown items will be highlighted as well.
+ + +Scrollspy also works with nested .navs.
+ If a nested .nav is .active, its parents will also be
+ .active. Scroll the area next to the navbar and watch the active
+ class change.
+
Ex consequat commodo adipisicing exercitation aute excepteur + occaecat ullamco duis aliqua id magna ullamco eu. Do aute + ipsum ipsum ullamco cillum consectetur ut et aute + consectetur labore. Fugiat laborum incididunt tempor eu + consequat enim dolore proident. Qui laborum do non excepteur + nulla magna eiusmod consectetur in. Aliqua et aliqua officia + quis et incididunt voluptate non anim reprehenderit + adipisicing dolore ut consequat deserunt mollit dolore. + Aliquip nulla enim veniam non fugiat id cupidatat nulla elit + cupidatat commodo velit ut eiusmod cupidatat elit dolore. +
+Amet tempor mollit aliquip pariatur excepteur commodo do ea + cillum commodo Lorem et occaecat elit qui et. Aliquip labore + ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua + cillum excepteur irure consequat id quis ea. Sit proident + ullamco aute magna pariatur nostrud labore. Reprehenderit + aliqua commodo eiusmod aliquip est do duis amet proident + magna consectetur consequat eu commodo fugiat non quis. Enim + aliquip exercitation ullamco adipisicing voluptate excepteur + minim exercitation minim minim commodo adipisicing + exercitation officia nisi adipisicing. Anim id duis qui + consequat labore adipisicing sint dolor elit cillum anim et + fugiat.
+Cillum nisi deserunt magna eiusmod qui eiusmod velit + voluptate pariatur laborum sunt enim. Irure laboris mollit + consequat incididunt sint et culpa culpa incididunt + adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod + sint elit excepteur ea labore enim consectetur in labore + anim. Proident ullamco ipsum esse elit ut Lorem eiusmod + dolor et eiusmod. Anim occaecat nulla in non consequat + eiusmod velit incididunt.
+Quis magna Lorem anim amet ipsum do mollit sit cillum + voluptate ex nulla tempor. Laborum consequat non elit enim + exercitation cillum aliqua consequat id aliqua. Esse ex + consectetur mollit voluptate est in duis laboris ad sit + ipsum anim Lorem. Incididunt veniam velit elit elit veniam + Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse + irure. Laborum nisi sit est tempor laborum mollit labore + officia laborum excepteur commodo non commodo dolor + excepteur commodo. Ipsum fugiat ex est consectetur ipsum + commodo tempor sunt in proident.
+Quis anim sit do amet fugiat dolor velit sit ea ea do + reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim + proident occaecat excepteur aliquip culpa aute tempor + reprehenderit. Deserunt tempor mollit elit ex pariatur + dolore velit fugiat mollit culpa irure ullamco est ex + ullamco excepteur.
+Deserunt quis elit Lorem eiusmod amet enim enim amet minim + Lorem proident nostrud. Ea id dolore anim exercitation aute + fugiat labore voluptate cillum do laboris labore. Ex velit + exercitation nisi enim labore reprehenderit labore nostrud + ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod + deserunt irure nostrud irure. Ullamco proident veniam + laboris ea consectetur magna sunt ex exercitation aliquip + minim enim culpa occaecat exercitation. Est tempor excepteur + aliquip laborum consequat do deserunt laborum esse eiusmod + irure proident ipsum esse qui.
+Labore sit culpa commodo elit adipisicing sit aliquip elit + proident voluptate minim mollit nostrud aute reprehenderit + do. Mollit excepteur eu Lorem ipsum anim commodo sint labore + Lorem in exercitation velit incididunt. Occaecat consectetur + nisi in occaecat proident minim enim sunt reprehenderit + exercitation cupidatat et do officia. Aliquip consequat ad + labore labore mollit ut amet. Sit pariatur tempor proident + in veniam culpa aliqua excepteur elit magna fugiat eiusmod + amet officia.
+
+
+ <div class="row">
+ <div class="col-2">
+ <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
+ <nav class="nav nav-pills flex-column">
+ <a class="nav-link" href="#item-1">Item 1</a>
+ <nav class="nav nav-pills flex-column">
+ <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
+ <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
+ </nav>
+ <a class="nav-link" href="#item-2">Item 2</a>
+ <a class="nav-link" href="#item-3">Item 3</a>
+ <nav class="nav nav-pills flex-column">
+ <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
+ <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
+ </nav>
+ </nav>
+ </nav>
+ </div>
+ <div class="col-10">
+ <div data-bs-spy="scroll" data-bs-target="#navbar-example3"
+ data-bs-offset="0" class="scrollspy-example"
+ style="height: 350px;">
+ <h4 id="item-1">Item 1</h4>
+ <p>...</p>
+ <h5 id="item-1-1">Item 1-1</h5>
+ <p>...</p>
+ <h5 id="item-1-2">Item 1-2</h5>
+ <p>...</p>
+ <h4 id="item-2">Item 2</h4>
+ <p>...</p>
+ <h4 id="item-3">Item 3</h4>
+ <p>...</p>
+ <h5 id="item-3-1">Item 3-1</h5>
+ <p>...</p>
+ <h5 id="item-3-2">Item 3-2</h5>
+ <p>...</p>
+ </div>
+ </div>
+ </div>
+
+
+ Scrollspy also works with nested .navs.
+ If a nested .nav is .active, its parents will also be
+ .active. Scroll the area next to the navbar and watch the active
+ class change.
+
Ex consequat commodo adipisicing exercitation aute excepteur + occaecat ullamco duis aliqua id magna ullamco eu. Do aute + ipsum ipsum ullamco cillum consectetur ut et aute + consectetur labore. Fugiat laborum incididunt tempor eu + consequat enim dolore proident. Qui laborum do non excepteur + nulla magna eiusmod consectetur in. Aliqua et aliqua officia + quis et incididunt voluptate non anim reprehenderit + adipisicing dolore ut consequat deserunt mollit dolore. + Aliquip nulla enim veniam non fugiat id cupidatat nulla elit + cupidatat commodo velit ut eiusmod cupidatat elit dolore. +
+Quis magna Lorem anim amet ipsum do mollit sit cillum + voluptate ex nulla tempor. Laborum consequat non elit enim + exercitation cillum aliqua consequat id aliqua. Esse ex + consectetur mollit voluptate est in duis laboris ad sit + ipsum anim Lorem. Incididunt veniam velit elit elit veniam + Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse + irure. Laborum nisi sit est tempor laborum mollit labore + officia laborum excepteur commodo non commodo dolor + excepteur commodo. Ipsum fugiat ex est consectetur ipsum + commodo tempor sunt in proident.
+Quis anim sit do amet fugiat dolor velit sit ea ea do + reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim + proident occaecat excepteur aliquip culpa aute tempor + reprehenderit. Deserunt tempor mollit elit ex pariatur + dolore velit fugiat mollit culpa irure ullamco est ex + ullamco excepteur.
+Quis anim sit do amet fugiat dolor velit sit ea ea do + reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim + proident occaecat excepteur aliquip culpa aute tempor + reprehenderit. Deserunt tempor mollit elit ex pariatur + dolore velit fugiat mollit culpa irure ullamco est ex + ullamco excepteur.
+
+
+ <div class="row">
+ <div class="col-4">
+ <div id="list-example" class="list-group">
+ <a class="list-group-item list-group-item-action active"
+ href="#list-item-1">Item 1</a>
+ <a class="list-group-item list-group-item-action"
+ href="#list-item-2">Item 2</a>
+ <a class="list-group-item list-group-item-action"
+ href="#list-item-3">Item 3</a>
+ <a class="list-group-item list-group-item-action"
+ href="#list-item-4">Item 4</a>
+ </div>
+ </div>
+ <div class="col-8">
+ <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0"
+ class="scrollspy-example">
+ <h4 id="list-item-1">Item 1</h4>
+ <p>...</p>
+ <h4 id="list-item-2">Item 2</h4>
+ <p>...</p>
+ <h4 id="list-item-3">Item 3</h4>
+ <p>...</p>
+ <h4 id="list-item-4">Item 4</h4>
+ <p>...</p>
+ </div>
+ </div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + <!-- jstree css --> + <link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"> + + + + <!-- jstree js --> + <script src="assets/vendor/jstree/jstree.min.js"></script> + <script src="assets/js/pages/demo.jstree.js"></script> + + + + <div id="jstree-1"> + <ul> + <li> + Root node 1 + <ul> + <li data-jstree='{ "selected" : true }'> + <a href="javascript:;"> + Initially selected </a> + </li> + <li data-jstree='{ "icon" : "ri-home-4-line text-success " }'> + custom icon URL + </li> + <li data-jstree='{ "opened" : true }'> + initially open + <ul> + <li data-jstree='{ "disabled" : true }'> + Disabled Node + </li> + <li data-jstree='{ "type" : "file" }'> + Another node + </li> + </ul> + </li> + <li data-jstree='{ "icon" : "ri-vip-diamond-line text-danger" }'> + Custom icon class (bootstrap) + </li> + </ul> + </li> + <li data-jstree='{ "type" : "link" }'> + <a href="http://www.coderthemes.com"> + Clickable link node </a> + </li> + </ul> + </div> + ++
+ + <!-- jstree css --> + <link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"> + + + + <!-- jstree js --> + <script src="assets/vendor/jstree/jstree.min.js"></script> + <script src="assets/js/pages/demo.jstree.js"></script> + + + + <div id="jstree-2" + <ul> + <li> + Root node 1 + <ul> + <li data-jstree='{ "selected" : true }'> + <a href="javascript:;"> + Initially selected </a> + </li> + <li data-jstree='{ "icon" : "ri-article-line text-success " }'> + custom icon URL + </li> + <li data-jstree='{ "opened" : true }'> + initially open + <ul> + <li data-jstree='{ "disabled" : true }'> + Disabled Node + </li> + <li data-jstree='{ "type" : "file" }'> + Another node + </li> + </ul> + </li> + <li data-jstree='{ "icon" : "ri-user-line text-danger" }'> + Custom icon class (bootstrap) + </li> + </ul> + </li> + <li data-jstree='{ "type" : "link" }'> + <a href="https://coderthemes.com/"> + Clickable link node </a> + </li> + </ul> + </div> + ++
+ + <!-- jstree css --> + <link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"> + + + + <!-- jstree js --> + <script src="assets/vendor/jstree/jstree.min.js"></script> + <script src="assets/js/pages/demo.jstree.js"></script> + + + + <div id="jstree-3"></div> + ++
+ + <!-- jstree css --> + <link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"> + + + + <!-- jstree js --> + <script src="assets/vendor/jstree/jstree.min.js"></script> + <script src="assets/js/pages/demo.jstree.js"></script> + + + + <div id="jstree-4"></div> + ++
+ + <!-- jstree css --> + <link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"> + + + + <!-- jstree js --> + <script src="assets/vendor/jstree/jstree.min.js"></script> + <script src="assets/js/pages/demo.jstree.js"></script> + + + + <div id="jstree-5"></div> + ++
+ + <!-- jstree css --> + <link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"> + + + + <!-- jstree js --> + <script src="assets/vendor/jstree/jstree.min.js"></script> + <script src="assets/js/pages/demo.jstree.js"></script> + + + + <!-- jstree json --> + [{ + "id": "node_1", + "icon": "ri-folder-line icon-lg text-success", + "text": "Node - 1", + "children": false + }, { + "id": "node_2", + "icon": "ri-folder-line icon-lg text-success", + "text": "Node - 2", + "children": false + }, { + "id": "node_3", + "icon": "ri-folder-line icon-lg text-success", + "text": "Node - 3", + "children": false + }] + + + + <div id="jstree-6"></div> + ++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
+ + +Single Select
++ Select2 can take a regular select box like this... +
+ + +Multiple Select
++ Select2 can take a regular select box like this... +
+ + +
+
+ <!-- Single Select -->
+ <select class="form-control select2" data-toggle="select2">
+ <option>Select</option>
+ <optgroup label="Alaskan/Hawaiian Time Zone">
+ <option value="AK">Alaska</option>
+ <option value="HI">Hawaii</option>
+ </optgroup>
+ <optgroup label="Pacific Time Zone">
+ <option value="CA">California</option>
+ <option value="NV">Nevada</option>
+ <option value="OR">Oregon</option>
+ <option value="WA">Washington</option>
+ </optgroup>
+ </select>
+
+ <!-- Multiple Select -->
+ <select class="select2 form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Choose ...">
+ <optgroup label="Alaskan/Hawaiian Time Zone">
+ <option value="AK">Alaska</option>
+ <option value="HI">Hawaii</option>
+ </optgroup>
+ <optgroup label="Pacific Time Zone">
+ <option value="CA">California</option>
+ <option value="NV">Nevada</option>
+ <option value="OR">Oregon</option>
+ <option value="WA">Washington</option>
+ </optgroup>
+ <optgroup label="Mountain Time Zone">
+ <option value="AZ">Arizona</option>
+ <option value="CO">Colorado</option>
+ <option value="ID">Idaho</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NM">New Mexico</option>
+ <option value="ND">North Dakota</option>
+ <option value="UT">Utah</option>
+ <option value="WY">Wyoming</option>
+ </optgroup>
+ </select>
+
+
+ + A JavaScript component for choosing date ranges, dates and times. +
+ + +
+
+ <!-- Daterangepicker css -->
+ <link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css" type="text/css" />
+
+ <!-- Daterangepicker js -->
+ <script src="assets/vendor/daterangepicker/moment.min.js"></script>
+ <script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
+
+ <!-- Date Range -->
+ <div class="mb-3">
+ <label class="form-label">Date Range</label>
+ <input type="text" class="form-control date" id="singledaterange" data-toggle="date-picker" data-cancel-class="btn-warning">
+ </div>
+
+ <!-- Date Range Picker With Times -->
+ <div class="mb-3">
+ <label class="form-label">Date Range Picker With Times</label>
+ <input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="{'format': 'DD/MM hh:mm A'}">
+ </div>
+
+ <!-- Single Date Picker -->
+ <div class="mb-3">
+ <label class="form-label">Single Date Picker</label>
+ <input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
+ </div>
+
+ <!-- Predefined Date Ranges -->
+ <div class="mb-3">
+ <label class="form-label">Predefined Date Ranges</label>
+ <div id="reportrange" class="form-control" data-toggle="date-picker-range" data-target-display="#selectedValue" data-cancel-class="btn-light">
+ <i class="mdi mdi-calendar"></i>
+ <span id="selectedValue"></span> <i class="mdi mdi-menu-down"></i>
+ </div>
+ </div>
+
+
+ + Here are a few types of switches. +
+ + +
+
+ <!-- Without label-->
+ <input type="checkbox" id="switch0" data-switch="none"/>
+ <label for="switch0" data-on-label="" data-off-label=""></label>
+
+ <!-- Bool Switch-->
+ <input type="checkbox" id="switch1" checked data-switch="bool"/>
+ <label for="switch1" data-on-label="On" data-off-label="Off"></label>
+
+ <!-- Primary Switch-->
+ <input type="checkbox" id="switch2" checked data-switch="primary"/>
+ <label for="switch2" data-on-label="On" data-off-label="Off"></label>
+
+ <!-- Success Switch-->
+ <input type="checkbox" id="switch3" checked data-switch="success"/>
+ <label for="switch3" data-on-label="Yes" data-off-label="No"></label>
+
+ <!-- Info Switch-->
+ <input type="checkbox" id="switch4" checked data-switch="info"/>
+ <label for="switch4" data-on-label="On" data-off-label="Off"></label>
+
+ <!-- Warning Switch-->
+ <input type="checkbox" id="switch5" checked data-switch="warning"/>
+ <label for="switch5" data-on-label="Yes" data-off-label="No"></label>
+
+ <!-- Danger Switch-->
+ <input type="checkbox" id="switch6" checked data-switch="danger"/>
+ <label for="switch6" data-on-label="On" data-off-label="Off"></label>
+
+ <!-- Dark Switch-->
+ <input type="checkbox" id="switch7" checked data-switch="secondary"/>
+ <label for="switch7" data-on-label="Yes" data-off-label="No"></label>
+
+ <!-- Disbled Switch-->
+ <input type="checkbox" id="switchdis" data-switch="primary" checked disabled/>
+ <label for="switchdis" data-on-label="On" data-off-label="Off"></label>
+
+
+ + Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. +
+ + +
+
+ <!-- Bootstrap Datepicker css -->
+ <link href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
+
+ <!-- Bootstrap Datepicker js -->
+ <script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
+
+ <!-- Date Picker -->
+ <div class="mb-3 position-relative" id="datepicker1">
+ <label class="form-label">Date Picker</label>
+ <input type="text" class="form-control" data-provide="datepicker" data-date-container="#datepicker1">
+ </div>
+
+ <!-- Date View -->
+ <div class="mb-3 position-relative" id="datepicker2">
+ <label class="form-label">Date View</label>
+ <input type="text" class="form-control" data-provide="datepicker" data-date-format="d-M-yyyy" data-date-container="#datepicker2">
+ </div>
+
+ <!-- Multi Datepicker -->
+ <div class="mb-3 position-relative" id="datepicker3">
+ <label class="form-label">Multi Datepicker</label>
+ <input type="text" class="form-control" data-provide="datepicker" data-date-multidate="true" data-date-container="#datepicker3">
+ </div>
+
+ <!-- Autoclose -->
+ <div class="mb-3 position-relative" id="datepicker4">
+ <label class="form-label">Autoclose</label>
+ <input type="text" class="form-control" data-provide="datepicker" data-date-autoclose="true" data-date-container="#datepicker4">
+ </div>
+
+ <!-- Month View -->
+ <div class="mb-3 position-relative" id="datepicker5">
+ <label class="form-label">Month View</label>
+ <input type="text" class="form-control" data-provide="datepicker" data-date-format="MM yyyy" data-date-min-view-mode="1" data-date-container="#datepicker5">
+ </div>
+
+ <!-- Year View -->
+ <div class="mb-3 position-relative" id="datepicker6">
+ <label class="form-label">Year View</label>
+ <input type="text" class="form-control" data-provide="datepicker" data-date-min-view-mode="2" data-date-container="#datepicker6">
+ </div>
+
+ <!-- Inline Datepicker -->
+ <div class="mb-3">
+ <label class="form-label">Inline Datepicker</label>
+ <div data-provide="datepicker-inline"></div>
+ </div>
+
+
+ A lightweight and powerful datetimepicker
+ + +
+
+ <div class="mb-3">
+ <label class="form-label">Basic</label>
+ <input type="text" id="basic-datepicker" class="form-control" placeholder="Basic datepicker">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Date & Time</label>
+ <input type="text" id="datetime-datepicker" class="form-control" placeholder="Date and Time">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Human-friendly Dates</label>
+ <input type="text" id="humanfd-datepicker" class="form-control" placeholder="October 9, 2018">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">MinDate and MaxDate</label>
+ <input type="text" id="minmax-datepicker" class="form-control" placeholder="mindate - maxdate">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Disabling dates</label>
+ <input type="text" id="disable-datepicker" class="form-control" placeholder="Disabling dates">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Selecting multiple dates</label>
+ <input type="text" id="multiple-datepicker" class="form-control" placeholder="Multiple dates">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Selecting multiple dates - Conjunction</label>
+ <input type="text" id="conjunction-datepicker" class="form-control" placeholder="2018-10-10 :: 2018-10-11">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Range Calendar</label>
+ <input type="text" id="range-datepicker" class="form-control" placeholder="2018-10-03 to 2018-10-10">
+ </div>
+
+ <div>
+ <label class="form-label">Inline Calendar</label>
+ <input type="text" id="inline-datepicker" class="form-control" placeholder="Inline calendar">
+ </div>
+
+
+ A lightweight and powerful datetimepicker
+ + +
+
+ <div class="mb-3">
+ <label class="form-label">Default Time Picker</label>
+ <div class="input-group">
+ <input id="basic-timepicker" type="text" class="form-control" placeholder="Basic timepicker">
+ <span class="input-group-text"><i class="ri-time-line"></i></span>
+ </div>
+ </div>
+
+ <div class="mb-0">
+ <label class="form-label">24-hour Time Picker</label>
+ <div class="input-group">
+ <input id="24hours-timepicker" type="text" class="form-control" placeholder="16:21">
+ <span class="input-group-text"><i class="ri-time-line"></i></span>
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Time Picker w/ Limits</label>
+ <div class="input-group">
+ <input id="minmax-timepicker" type="text" class="form-control" placeholder="Limits">
+ <span class="input-group-text"><i class="ri-time-line"></i></span>
+ </div>
+ </div>
+
+ <div class="mb-0">
+ <label class="form-label">Preloading Time</label>
+ <div class="input-group">
+ <input id="preloading-timepicker" type="text" class="form-control" placeholder="Pick a time">
+ <span class="input-group-text"><i class="ri-time-line"></i></span>
+ </div>
+ </div>
+
+
+ + A jQuery Plugin to make masks on form fields and HTML elements. +
+ + ++ + <!-- Input Mask js --> + <script src="assets/vendor/jquery-mask-plugin/jquery.mask.min.js"></script> + + + + <div class="mb-3"> + <label class="form-label">Date</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00/00/0000"> + <span class="font-13 text-muted">e.g "DD/MM/YYYY"</span> + </div> + + <div class="mb-3"> + <label class="form-label">Hour</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00:00:00"> + <span class="font-13 text-muted">e.g "HH:MM:SS"</span> + </div> + + <div class="mb-3"> + <label class="form-label">Date & Hour</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00/00/0000 00:00:00"> + <span class="font-13 text-muted">e.g "DD/MM/YYYY HH:MM:SS"</span> + </div> + + <div class="mb-3"> + <label class="form-label">ZIP Code</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00000-000"> + <span class="font-13 text-muted">e.g "xxxxx-xxx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">Crazy Zip Code</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="0-00-00-00"> + <span class="font-13 text-muted">e.g "x-xx-xx-xx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">Money</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="000.000.000.000.000,00" data-reverse="true"> + <span class="font-13 text-muted">e.g "Your money"</span> + </div> + + <div class="mb-3"> + <label class="form-label">Money 2</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="#.##0,00" data-reverse="true"> + <span class="font-13 text-muted">e.g "#.##0,00"</span> + </div> + + <div class="mb-3"> + <label class="form-label">Telephone</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="0000-0000"> + <span class="font-13 text-muted">e.g "xxxx-xxxx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">Telephone with Code Area</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="(00) 0000-0000"> + <span class="font-13 text-muted">e.g "(xx) xxxx-xxxx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">US Telephone</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="(000) 000-0000"> + <span class="font-13 text-muted">e.g "(xxx) xxx-xxxx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">São Paulo Celphones</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="(00) 00000-0000"> + <span class="font-13 text-muted">e.g "(xx) xxxxx-xxxx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">CPF</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="000.000.000-00" data-reverse="true"> + <span class="font-13 text-muted">e.g "xxx.xxx.xxxx-xx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">CNPJ</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00.000.000/0000-00" data-reverse="true"> + <span class="font-13 text-muted">e.g "xx.xxx.xxx/xxxx-xx"</span> + </div> + + <div class="mb-3"> + <label class="form-label">IP Address</label> + <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="099.099.099.099" data-reverse="true"> + <span class="font-13 text-muted">e.g "xxx.xxx.xxx.xxx"</span> + </div> + ++
+ A mobile and touch friendly input spinner component for Bootstrap.
+ Specify attribute data-toggle="touchspin" and your input would be conveterted into touch friendly spinner.
+
+
+ <!-- Bootstrap Touchspin css -->
+ <link href="assets/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" type="text/css" />
+
+ <!-- Bootstrap Touchspin js -->
+ <script src="assets/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
+
+ <div class="mb-3">
+ <label class="form-label">Using data attributes</label>
+ <input data-toggle="touchspin" type="text" value="55">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Example with postfix (large)</label>
+ <input data-toggle="touchspin" value="18.20" type="text" data-step="0.1" data-decimals="2" data-bts-postfix="%">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">With prefix</label>
+ <input data-toggle="touchspin" type="text" data-bts-prefix="$">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Change button class</label>
+ <input data-toggle="touchspin" value="77" type="text" data-bts-button-down-class="btn btn-danger" data-bts-button-up-class="btn btn-info">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Init with empty value:</label>
+ <input data-toggle="touchspin" type="text">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Max value - (Default value 100)</label>
+ <input data-toggle="touchspin" data-bts-max="500" value="128" data-btn-vertical="true" type="text">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">With prefix and postfix button</label>
+ <input data-toggle="touchspin" data-bts-prefix="A Button" data-bts-prefix-extra-class="btn btn-light" data-bts-postfix="A Button" data-bts-postfix-extra-class="btn btn-light" type="text">
+ </div>
+
+
+
+ Uses the HTML5 attribute "maxlength" to work. Just specify data-toggle="maxlength" attribute
+ to have maxlength indication on any input.
+
+ The badge will show up by default when the remaining chars are 10 or less: +
+ +
+ Satrt displaying the indication when reached to some threshhold. Specift the data attribute threshold. E.g.
+ data-threshold="12"
+
+ All you need to do is specify the data attribute placement. The possible positions are left, top, right, bottom-right, top-right, top-left,
+ bottom, bottom-left and centered-right. If none is specified, the positioning will be defauted to 'bottom'.
+ E.g. data-placement="top"
+
+ Bootstrap maxlength supports textarea as well as inputs. Even on old IE. +
+ +
+
+ <!-- Bootstrap Maxlength js -->
+ <script src="assets/vendor/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
+
+
+
+
+
+ <div class="mb-3">
+ <label class="form-label">Default usage</label>
+ <p class="text-muted font-13">
+ The badge will show up by default when the remaining chars are 10 or less:
+ </p>
+ <input type="text" class="form-control" maxlength="25" data-toggle="maxlength">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Threshold value</label>
+ <p class="text-muted font-13">
+ Satrt displaying the indication when reached to some threshhold. Specift the data attribute <code>threshold</code>. E.g.
+ <code>data-threshold="12"</code>
+ </p>
+ <input type="text" class="form-control" maxlength="25" data-toggle="maxlength" data-threshold="12">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Position</label>
+ <p class="text-muted font-13">
+ All you need to do is specify the data attribute <code>placement</code>. The possible positions are left, top, right, bottom-right, top-right, top-left,
+ bottom, bottom-left and centered-right. If none is specified, the positioning will be defauted to 'bottom'.
+ E.g. <code>data-placement="top"</code>
+ </p>
+ <input type="text" class="form-control" maxlength="25" data-toggle="maxlength" data-placement="top">
+ </div>
+
+ <div>
+ <label class="form-label">Textareas</label>
+ <p class="text-muted font-13">
+ Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
+ </p>
+ <textarea data-toggle="maxlength" class="form-control" maxlength="225" rows="3"
+ placeholder="This textarea has a limit of 225 chars."></textarea>
+ </div>
+
+
+
+ Easily select a time for a text input using your mouse or keyboards arrow keys. Specify attribute data-toggle="timepicker"
+ and you would have nice timepicker input element.
+
+
+ <!-- Bootstrap Timepicker css -->
+ <link href="assets/vendor/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" />
+
+ <!-- Bootstrap Timepicker js -->
+ <script src="assets/vendor/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
+
+
+
+
+
+ <div class="mb-3">
+ <label class="form-label">Default Time Picker</label>
+ <div class="input-group" id="timepicker-input-group1">
+ <input id="timepicker" type="text" class="form-control" data-provide="timepicker">
+ <span class="input-group-text"><i class="ri-time-line"></i></span>
+ </div>
+ </div>
+
+ <div class="mb-0">
+ <label class="form-label">24 Hour Mode Time Picker E.g. <code>data-show-meridian="false"</code></label>
+ <div class="input-group" id="timepicker-input-group2">
+ <input id="timepicker2" type="text" class="form-control" data-provide='timepicker' data-show-meridian="false" >
+ <span class="input-group-text"><i class="ri-time-line"></i></span>
+ </div>
+ </div>
+
+ <div class="mb-0">
+ <label class="form-label">Specify a step for the minute field E.g. <code>data-minute-step="5"</code></label>
+ <div class="input-group" id="timepicker-input-group3">
+ <input id="timepicker3" type="text" class="form-control" data-provide='timepicker' data-minute-step="5">
+ <span class="input-group-text"><i class="ri-time-line"></i></span>
+ </div>
+ </div>
+
+
+ + Typeahead.js is a fast and fully-featured autocomplete library. +
+ + +
+
+ <!-- Typehead -->
+ <script src="assets/vendor/handlebars/handlebars.min.js"></script>
+ <script src="assets/vendor/typeahead.js/typeahead.bundle.min.js"></script>
+
+ <!-- Typehead Demo js -->
+ <script src="assets/js/pages/demo.typehead.js"></script>
+
+ <div class="mb-3">
+ <label class="form-label">The Basics</label>
+ <input type="text" class="form-control" data-provide="typeahead" id="the-basics" placeholder="Basic Example">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Bloodhound (Suggestion Engine)</label>
+ <input id="bloodhound" class="form-control" type="text" placeholder="States of USA">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Prefetch</label>
+ <input type="text" class="form-control" data-provide="typeahead" id="prefetch" placeholder="States of USA">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Remote</label>
+ <input type="text" class="form-control" data-provide="typeahead" id="remote" placeholder="States of USA">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Custom Templates</label>
+ <input id="custom-templates" class="form-control" type="text" placeholder="States of USA">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Default Suggestions</label>
+ <input type="text" class="form-control" data-provide="typeahead" id="default-suggestions">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Multiple Datasets</label>
+ <input type="text" class="form-control" data-provide="typeahead" id="multiple-datasets">
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Snow is a clean, flat toolbar theme.
+ + ++ End of simple area +
+Please include following css file at head element
+
+ <!-- Quill css -->
+ <link href="assets/vendor/quill/quill.core.css" rel="stylesheet" type="text/css" />
+ <link href="assets/vendor/quill/quill.snow.css" rel="stylesheet" type="text/css" />
+
+ <!-- quill js -->
+ <script src="assets/vendor/quill/quill.js"></script>
+ <!-- quill Init js-->
+ <script src="assets/js/pages/demo.quilljs.js"></script>
+
+ <!-- HTML -->
+ <div id="snow-editor" style="height: 300px;">
+ <h3><span class="ql-size-large">Hello World!</span></h3>
+ <p><br></p>
+ <h3>This is an simple editable area.</h3>
+ <p><br></p>
+ <ul>
+ <li>
+ Select a text to reveal the toolbar.
+ </li>
+ <li>
+ Edit rich document on-the-fly, so elastic!
+ </li>
+ </ul>
+ <p><br></p>
+ <p>
+ End of simple area
+ </p>
+ </div>
+
+
+ Bubble is a simple tooltip based theme.
+ + ++ End of simple area +
+Please include following css file at head element
+
+ <!-- Quill css -->
+ <link href="assets/vendor/quill/quill.bubble.css" rel="stylesheet" type="text/css" />
+
+ <div id="bubble-editor" style="height: 300px;">
+ <h3><span class="ql-size-large">Hello World!</span></h3>
+ <p><br></p>
+ <h3>This is an simple editable area.</h3>
+ <p><br></p>
+ <ul>
+ <li>
+ Select a text to reveal the toolbar.
+ </li>
+ <li>
+ Edit rich document on-the-fly, so elastic!
+ </li>
+ </ul>
+ <p><br></p>
+ <p>
+ End of simple area
+ </p>
+ </div>
+
+
+ SimpleMDE is a light-weight, simple, embeddable, and beautiful JS markdown editor
+ + +Please include following css file at head element
+
+ <!-- SimpleMDE css -->
+ <link href="assets/vendor/simplemde/simplemde.min.css" rel="stylesheet" type="text/css" />
+
+ <!-- SimpleMDE js -->
+ <script src="assets/vendor/simplemde/simplemde.min.js"></script>
+ <!-- SimpleMDE demo -->
+ <script src="assets/js/pages/demo.simplemde.js"></script>
+
+ <!-- HTML -->
+ <textarea id="simplemde1"></textarea>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
+
+
+ <div class="mb-3">
+ <label for="simpleinput" class="form-label">Text</label>
+ <input type="text" id="simpleinput" class="form-control">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-email" class="form-label">Email</label>
+ <input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-password" class="form-label">Password</label>
+ <input type="password" id="example-password" class="form-control" value="password">
+ </div>
+
+ <div class="mb-3">
+ <label for="password" class="form-label">Show/Hide Password</label>
+ <div class="input-group input-group-merge">
+ <input type="password" id="password" class="form-control" placeholder="Enter your password">
+ <div class="input-group-text" data-password="false">
+ <span class="password-eye"></span>
+ </div>
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label for="example-palaceholder" class="form-label">Placeholder</label>
+ <input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-textarea" class="form-label">Text area</label>
+ <textarea class="form-control" id="example-textarea" rows="5"></textarea>
+ </div>
+
+ <div class="mb-3">
+ <label for="example-readonly" class="form-label">Readonly</label>
+ <input type="text" id="example-readonly" class="form-control" readonly="" value="Readonly value">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-disable" class="form-label">Disabled</label>
+ <input type="text" class="form-control" id="example-disable" disabled="" value="Disabled value">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-static" class="form-label">Static control</label>
+ <input type="text" readonly class="form-control-plaintext" id="example-static" value="email@example.com">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-helping" class="form-label">Helping text</label>
+ <input type="text" id="example-helping" class="form-control" placeholder="Helping text">
+ <span class="help-block"><small>A block of help text that breaks onto a new line and may extend beyond one line.</small></span>
+ </div>
+
+ <div class="mb-3">
+ <label for="example-select" class="form-label">Input Select</label>
+ <select class="form-select" id="example-select">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+
+ <div class="mb-3">
+ <label for="example-multiselect" class="form-label">Multiple Select</label>
+ <select id="example-multiselect" multiple class="form-control">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+
+ <div class="mb-3">
+ <label for="example-fileinput" class="form-label">Default file input</label>
+ <input type="file" id="example-fileinput" class="form-control">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-date" class="form-label">Date</label>
+ <input class="form-control" id="example-date" type="date" name="date">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-month" class="form-label">Month</label>
+ <input class="form-control" id="example-month" type="month" name="month">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-time" class="form-label">Time</label>
+ <input class="form-control" id="example-time" type="time" name="time">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-week" class="form-label">Week</label>
+ <input class="form-control" id="example-week" type="week" name="week">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-number" class="form-label">Number</label>
+ <input class="form-control" id="example-number" type="number" name="number">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-color" class="form-label">Color</label>
+ <input class="form-control" id="example-color" type="color" name="color" value="#727cf5">
+ </div>
+
+ <div class="mb-0">
+ <label for="example-range" class="form-label">Range</label>
+ <input class="form-range" id="example-range" type="range" name="range" min="0" max="100">
+ </div>
+
+
+
+ Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).
+
+
+
+ <div class="form-floating mb-3">
+ <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" />
+ <label for="floatingInput">Email address</label>
+ </div>
+
+ <div class="form-floating">
+ <input type="password" class="form-control" id="floatingPassword" placeholder="Password" />
+ <label for="floatingPassword">Password</label>
+ </div>
+
+ <div class="form-floating">
+ <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px;"></textarea>
+ <label for="floatingTextarea">Comments</label>
+ </div>
+
+ <div class="form-floating">
+ <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <label for="floatingSelect">Works with selects</label>
+ </div>
+
+ <div class="row g-2">
+ <div class="col-md">
+ <div class="form-floating">
+ <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com" />
+ <label for="floatingInputGrid">Email address</label>
+ </div>
+ </div>
+ <div class="col-md">
+ <div class="form-floating">
+ <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <label for="floatingSelectGrid">Works with selects</label>
+ </div>
+ </div>
+ </div>
+
+
+
+ <select> menus need only a custom class, .form-select to trigger the custom styles.
+
+
+ <select class="form-select mb-3">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <select class="form-select form-select-lg mb-3">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <select class="form-select form-select-sm mb-3">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <div class="input-group mb-3">
+ <label class="input-group-text" for="inputGroupSelect01">Options</label>
+ <select class="form-select" id="inputGroupSelect01">
+ <option selected>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ </div>
+ <div class="input-group">
+ <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
+ <option selected>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <button class="btn btn-outline-secondary" type="button">Button</button>
+ </div>
+
+
+
+ A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.
+
+
+ <!-- Custom Switch -->
+ <div class="form-check form-switch">
+ <input type="checkbox" class="form-check-input" id="customSwitch1">
+ <label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
+ </div>
+
+ <!-- Custom Switch Disabled -->
+ <div class="form-check form-switch">
+ <input type="checkbox" class="form-check-input" disabled id="customSwitch2">
+ <label class="form-check-label" for="customSwitch2">Disabled switch element</label>
+ </div>
+
+
+
+ Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.
+
+
+ <!-- Checkboxes-->
+ <div class="mt-3">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="customCheck1">
+ <label class="form-check-label" for="customCheck1">Check this custom checkbox</label>
+ </div>
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="customCheck2">
+ <label class="form-check-label" for="customCheck2">Check this custom checkbox</label>
+ </div>
+ </div>
+
+ <!-- Inline-->
+
+ <div class="mt-2">
+ <div class="form-check form-check-inline">
+ <input type="checkbox" class="form-check-input" id="customCheck3">
+ <label class="form-check-label" for="customCheck3">Check this custom checkbox</label>
+ </div>
+ <div class="form-check form-check-inline">
+ <input type="checkbox" class="form-check-input" id="customCheck4">
+ <label class="form-check-label" for="customCheck4">Check this custom checkbox</label>
+ </div>
+ </div>
+
+ <!-- Disabled-->
+
+ <div class="mt-2">
+ <div class="form-check form-check-inline">
+ <input type="checkbox" class="form-check-input" id="customCheck5" checked disabled>
+ <label class="form-check-label" for="customCheck5">Check this custom checkbox</label>
+ </div>
+ <div class="form-check form-check-inline">
+ <input type="checkbox" class="form-check-input" id="customCheck6" disabled>
+ <label class="form-check-label" for="customCheck6">Check this custom checkbox</label>
+ </div>
+ </div>
+
+ <!-- Colors-->
+
+ <div class="form-check mb-2">
+ <input type="checkbox" class="form-check-input" id="customCheckcolor1" checked>
+ <label class="form-check-label" for="customCheckcolor1">Default Checkbox</label>
+ </div>
+ <div class="form-check form-checkbox-success mb-2">
+ <input type="checkbox" class="form-check-input" id="customCheckcolor2" checked>
+ <label class="form-check-label" for="customCheckcolor2">Success Checkbox</label>
+ </div>
+ <div class="form-check form-checkbox-info mb-2">
+ <input type="checkbox" class="form-check-input" id="customCheckcolor3" checked>
+ <label class="form-check-label" for="customCheckcolor3">Info Checkbox</label>
+ </div>
+ <div class="form-check form-checkbox-secondary mb-2">
+ <input type="checkbox" class="form-check-input" id="customCheckcolor6" checked>
+ <label class="form-check-label" for="customCheckcolor6">Secondary Checkbox</label>
+ </div>
+ <div class="form-check form-checkbox-warning mb-2">
+ <input type="checkbox" class="form-check-input" id="customCheckcolor4" checked>
+ <label class="form-check-label" for="customCheckcolor4">Warning Checkbox</label>
+ </div>
+ <div class="form-check form-checkbox-danger mb-2">
+ <input type="checkbox" class="form-check-input" id="customCheckcolor5" checked>
+ <label class="form-check-label" for="customCheckcolor5">Danger Checkbox</label>
+ </div>
+ <div class="form-check form-checkbox-dark">
+ <input type="checkbox" class="form-check-input" id="customCheckcolor7" checked>
+ <label class="form-check-label" for="customCheckcolor7">Dark Checkbox</label>
+ </div>
+
+
+
+ Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.
+
+
+ <!-- Radios-->
+
+ <div class="mt-3">
+ <div class="form-check">
+ <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
+ <label class="form-check-label" for="customRadio1">Toggle this custom radio</label>
+ </div>
+ <div class="form-check">
+ <input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
+ <label class="form-check-label" for="customRadio2">Or toggle this other custom radio</label>
+ </div>
+ </div>
+
+ <!-- Inline-->
+
+ <div class="mt-2">
+ <div class="form-check form-check-inline">
+ <input type="radio" id="customRadio3" name="customRadio1" class="form-check-input">
+ <label class="form-check-label" for="customRadio3">Toggle this custom radio</label>
+ </div>
+ <div class="form-check form-check-inline">
+ <input type="radio" id="customRadio4" name="customRadio1" class="form-check-input">
+ <label class="form-check-label" for="customRadio4">Or toggle this other custom radio</label>
+ </div>
+ </div>
+
+ <!-- Disabled-->
+
+ <div class="mt-2">
+ <div class="form-check form-check-inline">
+ <input type="radio" id="customRadio5" name="customRadio2" class="form-check-input" disabled>
+ <label class="form-check-label" for="customRadio5">Toggle this custom radio</label>
+ </div>
+ <div class="form-check form-check-inline">
+ <input type="radio" id="customRadio6" name="customRadio2" class="form-check-input" checked disabled>
+ <label class="form-check-label" for="customRadio6">Or toggle this other custom radio</label>
+ </div>
+ </div>
+
+ <!-- Colors -->
+
+ <div class="form-check mb-2">
+ <input type="radio" id="customRadiocolor1" name="customRadiocolor1" class="form-check-input" checked>
+ <label class="form-check-label" for="customRadiocolor1">Default Radio</label>
+ </div>
+ <div class="form-check form-radio-success mb-2">
+ <input type="radio" id="customRadiocolor2" name="customRadiocolor2" class="form-check-input" checked>
+ <label class="form-check-label" for="customRadiocolor2">Success Radio</label>
+ </div>
+ <div class="form-check form-radio-info mb-2">
+ <input type="radio" id="customRadiocolor3" name="customRadiocolor3" class="form-check-input" checked>
+ <label class="form-check-label" for="customRadiocolor3">Info Radio</label>
+ </div>
+ <div class="form-check form-radio-secondary mb-2">
+ <input type="radio" id="customRadiocolor6" name="customRadiocolor6" class="form-check-input" checked>
+ <label class="form-check-label" for="customRadiocolor6">Secondary Radio</label>
+ </div>
+ <div class="form-check form-radio-warning mb-2">
+ <input type="radio" id="customRadiocolor4" name="customRadiocolor4" class="form-check-input" checked>
+ <label class="form-check-label" for="customRadiocolor4">Warning Radio</label>
+ </div>
+ <div class="form-check form-radio-danger mb-2">
+ <input type="radio" id="customRadiocolor5" name="customRadiocolor5" class="form-check-input" checked>
+ <label class="form-check-label" for="customRadiocolor5">Danger Radio</label>
+ </div>
+ <div class="form-check form-radio-dark">
+ <input type="radio" id="customRadiocolor7" name="customRadiocolor7" class="form-check-input" checked>
+ <label class="form-check-label" for="customRadiocolor7">Dark Radio</label>
+ </div>
+
+
+
+ Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
+
+
+ <div class="mb-3">
+ <label for="example-input-small" class="form-label">Small</label>
+ <input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder=".input-sm">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-input-normal" class="form-label">Normal</label>
+ <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
+ </div>
+
+ <div class="mb-3">
+ <label for="example-input-large" class="form-label">Large</label>
+ <input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder=".input-lg">
+ </div>
+
+ <div class="mb-2">
+ <label for="example-gridsize" class="form-label">Grid Sizes</label>
+ <div class="row">
+ <div class="col-sm-4">
+ <input type="text" id="example-gridsize" class="form-control" placeholder=".col-sm-4">
+ </div>
+ </div>
+ </div>
+
+
+ + Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs +
+ + +
+
+ <form>
+ <div class="mb-3">
+ <label class="form-label">Static</label>
+ <div class="input-group flex-nowrap">
+ <span class="input-group-text" id="basic-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Dropdowns</label>
+ <div class="input-group">
+ <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+ <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">Buttons</label>
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
+ <button class="btn btn-dark" type="button">Button</button>
+ </div>
+ </div>
+
+ <div class="row g-2">
+ <div class="col-sm-6">
+ <label class="form-label">File input</label>
+ <input class="form-control" type="file" id="inputGroupFile04">
+ </div>
+ <div class="col-sm-6">
+ <label for="formFileMultiple" class="form-label">Multiple files input</label>
+ <input class="form-control" type="file" id="formFileMultiple" multiple>
+ </div>
+ </div>
+ </form>
+
+
+ Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
+ + +
+
+ <form>
+ <div class="mb-3">
+ <label for="exampleInputEmail1" class="form-label">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+ <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+ </div>
+ <div class="mb-3">
+ <label for="exampleInputPassword1" class="form-label">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+ </div>
+ <div class="mb-3">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="checkmeout0">
+ <label class="form-check-label" for="checkmeout0">Check me out !</label>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </form>
+
+
+ Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
+
+ <form class="form-horizontal">
+ <div class="row mb-3">
+ <label for="inputEmail3" class="col-3 col-form-label">Email</label>
+ <div class="col-9">
+ <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+ </div>
+ </div>
+ <div class="row mb-3">
+ <label for="inputPassword3" class="col-3 col-form-label">Password</label>
+ <div class="col-9">
+ <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+ </div>
+ </div>
+ <div class="row mb-3">
+ <label for="inputPassword5" class="col-3 col-form-label">Re Password</label>
+ <div class="col-9">
+ <input type="password" class="form-control" id="inputPassword5" placeholder="Retype Password">
+ </div>
+ </div>
+ <div class="row mb-3 justify-content-end">
+ <div class="col-9">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="checkmeout">
+ <label class="form-check-label" for="checkmeout">Check me out !</label>
+ </div>
+ </div>
+ </div>
+ <div class="justify-content-end row">
+ <div class="col-9">
+ <button type="submit" class="btn btn-info">Sign in</button>
+ </div>
+ </div>
+ </form>
+
+
+
+ Use the .row-cols-lg-auto, .g-3 & .align-items-center class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
+
+
+ <form class="row row-cols-lg-auto g-3 align-items-center">
+ <div class="col-12">
+ <label for="staticEmail2" class="visually-hidden">Email</label>
+ <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
+ </div>
+ <div class="col-12">
+ <label for="inputPassword2" class="visually-hidden">Password</label>
+ <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+ </div>
+ <div class="col-12">
+ <button type="submit" class="btn btn-primary">Confirm identity</button>
+ </div>
+ </form>
+
+ <h6 class="font-13 mt-3">Auto-sizing</h6>
+ <form>
+ <div class="row gy-2 gx-2 align-items-center">
+ <div class="col-auto">
+ <label class="visually-hidden" for="inlineFormInput">Name</label>
+ <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
+ </div>
+ <div class="col-auto">
+ <label class="visually-hidden" for="inlineFormInputGroup">Username</label>
+ <div class="input-group mb-2">
+ <div class="input-group-text">@</div>
+ <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
+ </div>
+ </div>
+ <div class="col-auto">
+ <div class="form-check mb-2">
+ <input type="checkbox" class="form-check-input" id="autoSizingCheck">
+ <label class="form-check-label" for="autoSizingCheck">Remember me</label>
+ </div>
+ </div>
+ <div class="col-auto">
+ <button type="submit" class="btn btn-primary mb-2">Submit</button>
+ </div>
+ </div>
+ </form>
+
+
+ Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
+
+ <form>
+ <div class="mb-2 row">
+ <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
+ <div class="col-sm-10">
+ <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
+ </div>
+ </div>
+ <div class="mb-2 row">
+ <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
+ <div class="col-sm-10">
+ <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
+ </div>
+ </div>
+ <div class="row">
+ <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
+ <div class="col-sm-10">
+ <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
+ </div>
+ </div>
+ </form>
+
+
+
+ By adding .row & .g-2, you can have control over the gutter width in as well the inline as block direction.
+
+
+ <form>
+ <div class="row g-2">
+ <div class="mb-3 col-md-6">
+ <label for="inputEmail4" class="form-label">Email</label>
+ <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+ </div>
+ <div class="mb-3 col-md-6">
+ <label for="inputPassword4" class="form-label">Password</label>
+ <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label for="inputAddress" class="form-label">Address</label>
+ <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+ </div>
+
+ <div class="mb-3">
+ <label for="inputAddress2" class="form-label">Address 2</label>
+ <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+ </div>
+
+ <div class="row g-2">
+ <div class="mb-3 col-md-6">
+ <label for="inputCity" class="form-label">City</label>
+ <input type="text" class="form-control" id="inputCity">
+ </div>
+ <div class="mb-3 col-md-4">
+ <label for="inputState" class="form-label">State</label>
+ <select id="inputState" class="form-select">
+ <option>Choose</option>
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </div>
+ <div class="mb-3 col-md-2">
+ <label for="inputZip" class="form-label">Zip</label>
+ <input type="text" class="form-control" id="inputZip">
+ </div>
+ </div>
+
+ <div class="mb-2">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="customCheck11">
+ <label class="form-check-label" for="customCheck11">Check this custom checkbox</label>
+ </div>
+ </div>
+
+ <button type="submit" class="btn btn-primary">Sign in</button>
+ </form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. +
+ + +Make sure to include following js files at end of body element
+
+ <!-- plugin js -->
+ <script src="assets/vendor/dropzone/min/dropzone.min.js"></script>
+ <!-- init js -->
+ <script src="assets/js/ui/component.fileupload.js"></script>
+
+ <!-- File Upload -->
+ <form action="/" method="post" class="dropzone" id="myAwesomeDropzone" data-plugin="dropzone" data-previews-container="#file-previews"
+ data-upload-preview-template="#uploadPreviewTemplate">
+ <div class="fallback">
+ <input name="file" type="file" multiple />
+ </div>
+
+ <div class="dz-message needsclick">
+ <i class="h1 text-muted ri-upload-cloud-2-line"></i>
+ <h3>Drop files here or click to upload.</h3>
+ <span class="text-muted font-13">(This is just a demo dropzone. Selected files are
+ <strong>not</strong> actually uploaded.)</span>
+ </div>
+ </form>
+
+ <!-- Preview -->
+ <div class="dropzone-previews mt-3" id="file-previews"></div>
+
+ <!-- file preview template -->
+ <div class="d-none" id="uploadPreviewTemplate">
+ <div class="card mt-1 mb-0 shadow-none border">
+ <div class="p-2">
+ <div class="row align-items-center">
+ <div class="col-auto">
+ <img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light" alt="">
+ </div>
+ <div class="col ps-0">
+ <a href="javascript:void(0);" class="text-muted fw-bold" data-dz-name></a>
+ <p class="mb-0" data-dz-size></p>
+ </div>
+ <div class="col-auto">
+ <!-- Button -->
+ <a href="" class="btn btn-link btn-lg text-muted" data-dz-remove>
+ <i class="ri-close-line"></i>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom feedback styles apply custom colors, borders,
+ focus styles, and background
+ icons to better communicate feedback. Background icons for
+ <select>s are only available with
+ .form-select, and not .form-control.
+
+
+ <form class="needs-validation" novalidate>
+ <div class="mb-3">
+ <label class="form-label" for="validationCustom01">First name</label>
+ <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
+ <div class="valid-feedback">
+ Looks good!
+ </div>
+ </div>
+ <div class="mb-3">
+ <label class="form-label" for="validationCustom02">Last name</label>
+ <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
+ <div class="valid-feedback">
+ Looks good!
+ </div>
+ </div>
+ <div class="mb-3">
+ <label class="form-label" for="validationCustomUsername">Username</label>
+ <div class="input-group">
+ <span class="input-group-text" id="inputGroupPrepend">@</span>
+ <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username"
+ aria-describedby="inputGroupPrepend" required>
+ <div class="invalid-feedback">
+ Please choose a username.
+ </div>
+ </div>
+ </div>
+ <div class="mb-3">
+ <label class="form-label" for="validationCustom03">City</label>
+ <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
+ <div class="invalid-feedback">
+ Please provide a valid city.
+ </div>
+ </div>
+ <div class="mb-3">
+ <label class="form-label" for="validationCustom04">State</label>
+ <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
+ <div class="invalid-feedback">
+ Please provide a valid state.
+ </div>
+ </div>
+ <div class="mb-3">
+ <label class="form-label" for="validationCustom05">Zip</label>
+ <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
+ <div class="invalid-feedback">
+ Please provide a valid zip.
+ </div>
+ </div>
+ <div class="mb-3">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="invalidCheck" required>
+ <label class="form-check-label form-label" for="invalidCheck">Agree to terms
+ and conditions</label>
+ <div class="invalid-feedback">
+ You must agree before submitting.
+ </div>
+ </div>
+ </div>
+ <button class="btn btn-primary" type="submit">Submit form</button>
+ </form>
+
+
+ If your form layout allows it, you can swap the
+ .{valid|invalid}-feedback classes for
+ .{valid|invalid}-tooltip classes to display validation feedback in
+ a styled tooltip. Be sure to have a parent with position: relative
+ on it for tooltip positioning. In the example below, our column classes have
+ this already, but your project may require an alternative setup.
+
+
+ <form class="needs-validation" novalidate>
+ <div class="position-relative mb-3">
+ <label class="form-label" for="validationTooltip01">First name</label>
+ <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
+ <div class="valid-tooltip">
+ Looks good!
+ </div>
+ <div class="invalid-tooltip">
+ Please enter first name.
+ </div>
+ </div>
+ <div class="position-relative mb-3">
+ <label class="form-label" for="validationTooltip02">Last name</label>
+ <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
+ <div class="valid-tooltip">
+ Looks good!
+ </div>
+ <div class="invalid-tooltip">
+ Please enter last name.
+ </div>
+ </div>
+ <div class="position-relative mb-3">
+ <label class="form-label" for="validationTooltipUsername">Username</label>
+ <div class="input-group">
+ <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
+ <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username"
+ aria-describedby="validationTooltipUsernamePrepend" required>
+ <div class="invalid-tooltip">
+ Please choose a unique and valid username.
+ </div>
+ </div>
+ </div>
+ <div class="position-relative mb-3">
+ <label class="form-label" for="validationTooltip03">City</label>
+ <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
+ <div class="invalid-tooltip">
+ Please provide a valid city.
+ </div>
+ </div>
+ <div class="position-relative mb-3">
+ <label class="form-label" for="validationTooltip04">State</label>
+ <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
+ <div class="invalid-tooltip">
+ Please provide a valid state.
+ </div>
+ </div>
+ <div class="position-relative mb-3">
+ <label class="form-label" for="validationTooltip05">Zip</label>
+ <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
+ <div class="invalid-tooltip">
+ Please provide a valid zip.
+ </div>
+ </div>
+ <button class="btn btn-primary" type="submit">Submit form</button>
+ </form>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet.
+ +Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis + dui. Aliquam mattis dictum aliquet.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use <i data-lucide="accessibility"></i>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+Hyper is a fully featured dashboard and admin template + comes with tones of well designed UI elements, components, widgets and pages.
+ + Get Free Trial + Check Demos +
+ The clean and well commented code allows easy customization of the
+ theme.It's designed for
+
describing your app, agency or business.
+
Et harum quidem rerum as expedita distinctio nam libero tempore + cum soluta nobis est cumque quo. +
+Temporibus autem quibusdam et aut officiis necessitatibus saepe + eveniet ut sit et recusandae. +
+Nam libero tempore, cum soluta a est eligendi minus id quod + maxime placeate facere assumenda est. +
+Et harum quidem rerum as expedita distinctio nam libero tempore + cum soluta nobis est cumque quo. +
+Temporibus autem quibusdam et aut officiis necessitatibus saepe + eveniet ut sit et recusandae. +
+Nam libero tempore, cum soluta a est eligendi minus id quod + maxime placeate facere assumenda est. +
+There are three different layout options available to cater need for
+ any
modern web
+ application.
+ 
+ 
+ 
+ 
+ 
+ Hyper comes with next generation ui design and have multiple benefits +
+
+ Hyper comes with a variety of ready-to-use applications and pages that help to speed up the development
+ +Projects & Tasks
+Ecommerce Application Pages
+Profile, pricing, invoice
+Login, signup, forget password
+The simplest and fastest way to build dashboard or admin panel. Hyper is built using the latest tech and tools and provide an easy way to customize anything, including an overall color schemes, layout, etc.
+ +Built with latest Bootstrap
+Extensive use of SCSS variables
+Well documented and structured code
+Detailed Documentation
+
+ The clean and well commented code allows easy customization of the
+ theme.It's designed for
+
describing your app, agency or business.
+
Standard License
+ +Multiple License
+ +Extended License
+ +Here are some of the basic types of questions for our customers. For more
+
information please contact us.
+
Yup, the marketplace license allows you to use this theme + in any end products. + For more information on licenses, please refere here.
+Use our dedicated support email (support@coderthemes.com) to send your issues or feedback. We are here to help anytime.
+No. This is a HTML template. It won't directly with + wordpress, though you can convert this into wordpress compatible theme.
+Yes, We will update the Hyper regularly. All the + future updates would be available without any cost.
+Please fill out the following form and we will get back to you shortly. For more
+
information please contact us.
+
Customer Support:
+1 234 56 7894
Email Address:
info@gmail.com
Office Address:
4461 Cedar Street Moro, AR 72368
Office Time:
9:00AM To 6:00PM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Week
+Previous Week
+
+ ASOS Ridley High Waist+ 07 April 2018 + |
+
+ $79.49+ Price + |
+
+ 82+ Quantity + |
+
+ $6,518.18+ Amount + |
+
+ Marco Lightweight Shirt+ 25 March 2018 + |
+
+ $128.50+ Price + |
+
+ 37+ Quantity + |
+
+ $4,754.50+ Amount + |
+
+ Half Sleeve Shirt+ 17 March 2018 + |
+
+ $39.99+ Price + |
+
+ 64+ Quantity + |
+
+ $2,559.36+ Amount + |
+
+ Lightweight Jacket+ 12 March 2018 + |
+
+ $20.00+ Price + |
+
+ 184+ Quantity + |
+
+ $3,680.00+ Amount + |
+
+ Marco Shoes+ 05 March 2018 + |
+
+ $28.49+ Price + |
+
+ 69+ Quantity + |
+
+ $1,965.81+ Amount + |
+
+ 5 minutes ago +
++ 16 hours ago +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ It's looking like you may have taken a wrong turn. Don't worry... it + happens to the best of us. Here's a + little tip that might help you get back on track.
+ + Return Home +
+
+ It's looking like you may have taken a wrong turn. Don't worry... it + happens to the best of us. Here's a + little tip that might help you get back on track.
+ + Return Home +
+
+ 
+
+ Why not try refreshing your page? or you can contact Support
+ + Return Home +It's a elegent templete. I love it very much! . +
++ - Hyper Admin User +
+
+
+ 
+ + A email has been send to youremail@domain.com. + Please check for an email from company and click on the included link to + reset your password. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nisi praesentium similique totam odio obcaecati, reprehenderit,
+ dignissimos rem temporibus ea inventore alias!
Beatae animi nemo ea
+ tempora, temporibus laborum facilis ut!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+Lorem ipsum dolor sit amet, in mea nonumes dissentias dissentiunt, pro te solet oratio iriure. Cu sit consetetur moderatius intellegam, ius decore accusamus te. Ne primis suavitate disputando nam. Mutat convenirete.
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+Lorem ipsum dolor sit amet, in mea nonumes dissentias dissentiunt, pro te solet oratio iriure. Cu sit consetetur moderatius intellegam, ius decore accusamus te. Ne primis suavitate disputando nam. Mutat convenirete.
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello, Cooper Hobson
+Please find below a cost-breakdown for the recent work completed. Please make payment at your earliest convenience, and do not hesitate to contact me with any questions.
+Order Date: Jan 17, 2018
+Order Status: Paid
+Order ID: #123456
+
+ | # | +Item | +Quantity | +Unit Cost | +Total | +
|---|---|---|---|---|
| 1 | +
+ Laptop + Brand Model VGN-TXN27N/B + 11.1" Notebook PC + |
+ 1 | +$1799.00 | +$1799.00 | +
| 2 | +
+ Warranty + Two Year Extended Warranty - + Parts and Labor + |
+ 3 | +$499.00 | +$1497.00 | +
| 3 | +
+ LED + 80cm (32) HD Ready LED TV + |
+ 2 | +$412.00 | +$824.00 | +
Sub-total: $4120.00
+VAT (12.5): $515.00
+It's a elegent templete. I love it very much! . +
++ - Hyper Admin User +
+It's a elegent templete. I love it very much! . +
++ - Hyper Admin User +
+It's a elegent templete. I love it very much! . +
++ - Hyper Admin User +
+
+ We're making the system more awesome. We'll be back shortly.
+ +There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
+Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical but the majority.
+If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embar.. no-reply@domain.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 3.27% +
++ 5.38% +
++ 4.87% +
++ 11.7% +
+Total Sent
+Reached
+Opened
+Current Month
+Previous Month
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + We have plans and prices that fit your business perfectly. Make your client site a success with our products. +
+Professional Pack
+ +Business Pack
+ +Enterprise Pack
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Founder
+ + + + ++ Hi I'm Johnathn Deo,has been the industry's standard dummy text ever since the + 1500s, when an unknown printer took a galley of type. +
+Full Name : Geneva + D. McKnight
+ +Mobile :(123) + 123 1234
+ +Email : user@email.domain
+ +Location : USA
+websitename.com Year: 2015 - 18
+Everyone realizes why a new common language + would be desirable: one could refuse to pay expensive translators. + To achieve this, it would be necessary to have uniform grammar, + pronunciation and more common words.
+Software Inc. Year: 2012 - 15
+If several languages coalesce, the grammar + of the resulting language is more simple and regular than that of + the individual languages. The new common language will be more + simple and regular than the existing European languages.
+ +Coderthemes Design LLP Year: 2010 - 12
+The European languages are members of + the same family. Their separate existence is a myth. For science + music sport etc, Europe uses the same vocabulary. The languages + only differ in their grammar their pronunciation.
+| # | +Clients | +Project Name | +Start Date | +Due Date | +Status | +
|---|---|---|---|---|---|
| 1 | + Halette Boivin |
+ App design and development | +01/01/2015 | +10/15/2018 | +Work in Progress | +
| 2 | + Durandana Jolicoeur |
+ Coffee detail page - Main Page | +21/07/2016 | +12/05/2018 | +Pending | +
| 3 | + Lucas Sabourin |
+ Poster illustation design | +18/03/2018 | +28/09/2018 | +Done | +
| 4 | + Donatien Brunelle |
+ Drinking bottle graphics | +02/10/2017 | +07/05/2018 | +Work in Progress | +
| 5 | + Karel Auberjo |
+ Landing page design - Home | +17/01/2017 | +25/05/2021 | +Coming soon | +
+ about 2 minuts ago
+Story based around the idea of time lapse, animation to post soon!
+ +
+
+
+
+
+
+ about 1 hour ago
+
+
+
+
+
+ 15 hours ago
+The parallax is a little odd but O.o that house build is awesome!!
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Authorised Brand Seller
+ +Total Revenue
+Number of Orders
++ Hye, I’m Michael Franklin residing in this beautiful world. I create websites and mobile apps with great UX and UI design. I have done work with big companies like Nokia, Google and Yahoo. Meet me or Contact me for any queries. One Extra line for filling space. Fill as many you want. +
+ +| Product | +Price | +Stock | +Amount | +
|---|---|---|---|
| ASOS Ridley High Waist | +$79.49 | +82 Pcs | +$6,518.18 | +
| Marco Lightweight Shirt | +$128.50 | +37 Pcs | +$4,754.50 | +
| Half Sleeve Shirt | +$39.99 | +64 Pcs | +$2,559.36 | +
| Lightweight Jacket | +$20.00 | +184 Pcs | +$3,680.00 | +
| Marco Shoes | +$28.49 | +69 Pcs | +$1,965.81 | +
It's a elegent templete. I love it very much! . +
++ - Hyper Admin User +
+It's a elegent templete. I love it very much! . +
++ - Hyper Admin User +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 10 December, 2018
+Alex Smith is a Senior Software (Full Stack) engineer with a deep passion for building usable, functional & pretty web applications.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
+
| Name | +Phone Number | +Date of Birth | +Active? | +
|---|---|---|---|
| Risa D. Pearson | +336-508-2157 | +July 24, 1950 | +
+
+
+
+
+
+ |
+
| Ann C. Thompson | +646-473-2057 | +January 25, 1959 | +
+
+
+
+
+
+ |
+
| Paul J. Friend | +281-308-0793 | +September 1, 1939 | +
+
+
+
+
+
+ |
+
| Linda G. Smith | +606-253-1207 | +May 3, 1962 | +
+
+
+
+
+
+ |
+
+
+ <table class="table table-centered mb-0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Phone Number</th>
+ <th>Date of Birth</th>
+ <th>Active?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Risa D. Pearson</td>
+ <td>336-508-2157</td>
+ <td>July 24, 1950</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch01" checked data-switch="success"/>
+ <label for="switch01" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Ann C. Thompson</td>
+ <td>646-473-2057</td>
+ <td>January 25, 1959</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch02" checked data-switch="success"/>
+ <label for="switch02" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Paul J. Friend</td>
+ <td>281-308-0793</td>
+ <td>September 1, 1939</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch03" data-switch="success"/>
+ <label for="switch03" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Linda G. Smith</td>
+ <td>606-253-1207</td>
+ <td>May 3, 1962</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch04" data-switch="success"/>
+ <label for="switch04" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ You can also invert the colors—with light text on dark backgrounds—with .table-dark.
+
| Name | +Phone Number | +Date of Birth | +Active? | +
|---|---|---|---|
| Risa D. Pearson | +336-508-2157 | +July 24, 1950 | +
+
+
+
+
+
+ |
+
| Ann C. Thompson | +646-473-2057 | +January 25, 1959 | +
+
+
+
+
+
+ |
+
| Paul J. Friend | +281-308-0793 | +September 1, 1939 | +
+
+
+
+
+
+ |
+
| Sean C. Nguyen | +269-714-6825 | +February 5, 1994 | +
+
+
+
+
+
+ |
+
+
+ <table class="table table-dark mb-0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Phone Number</th>
+ <th>Date of Birth</th>
+ <th>Active?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Risa D. Pearson</td>
+ <td>336-508-2157</td>
+ <td>July 24, 1950</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch6" data-switch="success"/>
+ <label for="switch6" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Ann C. Thompson</td>
+ <td>646-473-2057</td>
+ <td>January 25, 1959</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch7" checked data-switch="success"/>
+ <label for="switch7" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Paul J. Friend</td>
+ <td>281-308-0793</td>
+ <td>September 1, 1939</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch8" data-switch="success"/>
+ <label for="switch8" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Sean C. Nguyen</td>
+ <td>269-714-6825</td>
+ <td>February 5, 1994</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch10" checked data-switch="success"/>
+ <label for="switch10" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Use .table-striped to add zebra-striping to any table row
+ within the <tbody>.
+
+
+ <table class="table table-striped table-centered mb-0">
+ <thead>
+ <tr>
+ <th>User</th>
+ <th>Account No.</th>
+ <th>Balance</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-2.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Risa D. Pearson
+ </td>
+ <td>AC336 508 2157</td>
+ <td>July 24, 1950</td>
+ <td class="table-action">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-3.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Ann C. Thompson
+ </td>
+ <td>SB646 473 2057</td>
+ <td>January 25, 1959</td>
+ <td class="table-action">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-4.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Paul J. Friend
+ </td>
+ <td>DL281 308 0793</td>
+ <td>September 1, 1939</td>
+ <td class="table-action">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-5.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Sean C. Nguyen
+ </td>
+ <td>CA269 714 6825</td>
+ <td>February 5, 1994</td>
+ <td class="table-action">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Use one of two modifier classes to make <thead>s appear light or dark gray.
+
| Product | +Courier | +Process | +Status | +
|---|---|---|---|
| ASOS Ridley High Waist | +FedEx | +
+
+
+
+ |
+ Delivered | +
| Marco Lightweight Shirt | +DHL | +
+
+
+
+ |
+ Shipped | +
| Half Sleeve Shirt | +Bright | +
+
+
+
+ |
+ Order Received | +
| Lightweight Jacket | +FedEx | +
+
+
+
+ |
+ Delivered | +
+
+ <table class="table table-centered mb-0">
+ <thead class="table-dark">
+ <tr>
+ <th>Product</th>
+ <th>Courier</th>
+ <th>Process</th>
+ <th>Status</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>ASOS Ridley High Waist</td>
+ <td>FedEx</td>
+ <td>
+ <div class="progress progress-sm">
+ <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </td>
+ <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
+ </tr>
+ <tr>
+ <td>Marco Lightweight Shirt</td>
+ <td>DHL</td>
+ <td>
+ <div class="progress progress-sm">
+ <div class="progress-bar progress-lg bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </td>
+ <td><i class="mdi mdi-circle text-warning"></i> Shipped</td>
+ </tr>
+ <tr>
+ <td>Half Sleeve Shirt</td>
+ <td>Bright</td>
+ <td>
+ <div class="progress progress-sm">
+ <div class="progress-bar progress-lg bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </td>
+ <td><i class="mdi mdi-circle text-info"></i> Order Received</td>
+ </tr>
+ <tr>
+ <td>Lightweight Jacket</td>
+ <td>FedEx</td>
+ <td>
+ <div class="progress progress-sm">
+ <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </td>
+ <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Add .table-hover to enable a hover state on table rows within a <tbody>.
+
| Product | +Price | +Quantity | +Amount | +
|---|---|---|---|
| ASOS Ridley High Waist | +$79.49 | +82 Pcs | +$6,518.18 | +
| Marco Lightweight Shirt | +$128.50 | +37 Pcs | +$4,754.50 | +
| Half Sleeve Shirt | +$39.99 | +64 Pcs | +$2,559.36 | +
| Lightweight Jacket | +$20.00 | +184 Pcs | +$3,680.00 | +
+
+ <table class="table table-hover table-centered mb-0">
+ <thead>
+ <tr>
+ <th>Product</th>
+ <th>Price</th>
+ <th>Quantity</th>
+ <th>Amount</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>ASOS Ridley High Waist</td>
+ <td>$79.49</td>
+ <td><span class="badge bg-primary">82 Pcs</span></td>
+ <td>$6,518.18</td>
+ </tr>
+ <tr>
+ <td>Marco Lightweight Shirt</td>
+ <td>$128.50</td>
+ <td><span class="badge bg-primary">37 Pcs</span></td>
+ <td>$4,754.50</td>
+ </tr>
+ <tr>
+ <td>Half Sleeve Shirt</td>
+ <td>$39.99</td>
+ <td><span class="badge bg-primary">64 Pcs</span></td>
+ <td>$2,559.36</td>
+ </tr>
+ <tr>
+ <td>Lightweight Jacket</td>
+ <td>$20.00</td>
+ <td><span class="badge bg-primary">184 Pcs</span></td>
+ <td>$3,680.00</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Add .table-sm to make tables more compact by cutting cell padding in half.
+
| Product | +Price | +Quantity | +Amount | +
|---|---|---|---|
| ASOS Ridley High Waist | +$79.49 | +82 Pcs | +$6,518.18 | +
| Marco Lightweight Shirt | +$128.50 | +37 Pcs | +$4,754.50 | +
| Half Sleeve Shirt | +$39.99 | +64 Pcs | +$2,559.36 | +
| Lightweight Jacket | +$20.00 | +184 Pcs | +$3,680.00 | +
| Marco Shoes | +$28.49 | +69 Pcs | +$1,965.81 | +
| ASOS Ridley High Waist | +$79.49 | +82 Pcs | +$6,518.18 | +
+
+ <table class="table table-sm table-centered mb-0">
+ <thead>
+ <tr>
+ <th>Product</th>
+ <th>Price</th>
+ <th>Quantity</th>
+ <th>Amount</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>ASOS Ridley High Waist</td>
+ <td>$79.49</td>
+ <td><span class="badge bg-primary">82 Pcs</span></td>
+ <td>$6,518.18</td>
+ </tr>
+ <tr>
+ <td>Marco Lightweight Shirt</td>
+ <td>$128.50</td>
+ <td><span class="badge bg-primary">37 Pcs</span></td>
+ <td>$4,754.50</td>
+ </tr>
+ <tr>
+ <td>Half Sleeve Shirt</td>
+ <td>$39.99</td>
+ <td><span class="badge bg-primary">64 Pcs</span></td>
+ <td>$2,559.36</td>
+ </tr>
+ <tr>
+ <td>Lightweight Jacket</td>
+ <td>$20.00</td>
+ <td><span class="badge bg-primary">184 Pcs</span></td>
+ <td>$3,680.00</td>
+ </tr>
+ <tr>
+ <td>Marco Shoes</td>
+ <td>$28.49</td>
+ <td><span class="badge bg-primary">69 Pcs</span></td>
+ <td>$1,965.81</td>
+ </tr>
+ <tr>
+ <td>ASOS Ridley High Waist</td>
+ <td>$79.49</td>
+ <td><span class="badge bg-primary">82 Pcs</span></td>
+ <td>$6,518.18</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Add .table-bordered for borders on all sides of the table and cells.
+
+
+ <table class="table table-bordered table-centered mb-0">
+ <thead>
+ <tr>
+ <th>User</th>
+ <th>Account No.</th>
+ <th>Balance</th>
+ <th class="text-center">Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-6.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Risa D. Pearson
+ </td>
+ <td>AC336 508 2157</td>
+ <td>July 24, 1950</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-7.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Ann C. Thompson
+ </td>
+ <td>SB646 473 2057</td>
+ <td>January 25, 1959</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-8.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Paul J. Friend
+ </td>
+ <td>DL281 308 0793</td>
+ <td>September 1, 1939</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-9.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Sean C. Nguyen
+ </td>
+ <td>CA269 714 6825</td>
+ <td>February 5, 1994</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Add .table-bordered & .border-primary can be added to change colors.
+
+
+ <table class="table table-bordered border-primary table-centered mb-0">
+ <thead>
+ <tr>
+ <th>User</th>
+ <th>Account No.</th>
+ <th>Balance</th>
+ <th class="text-center">Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-6.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Risa D. Pearson
+ </td>
+ <td>AC336 508 2157</td>
+ <td>July 24, 1950</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-7.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Ann C. Thompson
+ </td>
+ <td>SB646 473 2057</td>
+ <td>January 25, 1959</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-8.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Paul J. Friend
+ </td>
+ <td>DL281 308 0793</td>
+ <td>September 1, 1939</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td class="table-user">
+ <img src="assets/images/users/avatar-9.jpg" alt="table-user" class="me-2 rounded-circle" />
+ Sean C. Nguyen
+ </td>
+ <td>CA269 714 6825</td>
+ <td>February 5, 1994</td>
+ <td class="table-action text-center">
+ <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Across every breakpoint, use
+ .table-responsive for horizontally scrolling tables. Use
+ .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave
+ normally and not scroll horizontally.
+
| # | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +
|---|---|---|---|---|---|---|---|---|---|
| 1 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
| 2 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
| 3 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
+
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ <th scope="col">Heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Add .table-borderless for a table without borders.
+
| Name | +Phone Number | +Date of Birth | +Active? | +
|---|---|---|---|
| Risa D. Pearson | +336-508-2157 | +July 24, 1950 | +
+
+
+
+
+
+ |
+
| Ann C. Thompson | +646-473-2057 | +January 25, 1959 | +
+
+
+
+
+
+ |
+
| Paul J. Friend | +281-308-0793 | +September 1, 1939 | +
+
+
+
+
+
+ |
+
| Linda G. Smith | +606-253-1207 | +May 3, 1962 | +
+
+
+
+
+
+ |
+
+
+ <table class="table table-centered table-borderless mb-0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Phone Number</th>
+ <th>Date of Birth</th>
+ <th>Active?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Risa D. Pearson</td>
+ <td>336-508-2157</td>
+ <td>July 24, 1950</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch21" checked data-switch="success"/>
+ <label for="switch21" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Ann C. Thompson</td>
+ <td>646-473-2057</td>
+ <td>January 25, 1959</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch22" checked data-switch="success"/>
+ <label for="switch22" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Paul J. Friend</td>
+ <td>281-308-0793</td>
+ <td>September 1, 1939</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch23" data-switch="success"/>
+ <label for="switch23" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Linda G. Smith</td>
+ <td>606-253-1207</td>
+ <td>May 3, 1962</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch24" data-switch="success"/>
+ <label for="switch24" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Add .table-borderless for a table without borders.
+
| Name | +Phone Number | +Date of Birth | +Active? | +
|---|---|---|---|
| Risa D. Pearson | +336-508-2157 | +July 24, 1950 | +
+
+
+
+
+
+ |
+
| Ann C. Thompson | +646-473-2057 | +January 25, 1959 | +
+
+
+
+
+
+ |
+
| Paul J. Friend | +281-308-0793 | +September 1, 1939 | +
+
+
+
+
+
+ |
+
| Sean C. Nguyen | +269-714-6825 | +February 5, 1994 | +
+
+
+
+
+
+ |
+
+
+ <table class="table table-dark table-borderless mb-0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Phone Number</th>
+ <th>Date of Birth</th>
+ <th>Active?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Risa D. Pearson</td>
+ <td>336-508-2157</td>
+ <td>July 24, 1950</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch25" data-switch="success"/>
+ <label for="switch25" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Ann C. Thompson</td>
+ <td>646-473-2057</td>
+ <td>January 25, 1959</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch26" checked data-switch="success"/>
+ <label for="switch26" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Paul J. Friend</td>
+ <td>281-308-0793</td>
+ <td>September 1, 1939</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch27" data-switch="success"/>
+ <label for="switch27" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Sean C. Nguyen</td>
+ <td>269-714-6825</td>
+ <td>February 5, 1994</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch28" checked data-switch="success"/>
+ <label for="switch28" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Highlight a table row or cell by adding a .table-active class.
+
| Name | +Phone Number | +Date of Birth | +Active? | +
|---|---|---|---|
| Risa D. Pearson | +336-508-2157 | +July 24, 1950 | +
+
+
+
+
+
+ |
+
| Ann C. Thompson | +646-473-2057 | +January 25, 1959 | +
+
+
+
+
+
+ |
+
| Paul J. Friend | +281-308-0793 | +September 1, 1939 | +
+
+
+
+
+
+ |
+
| Linda G. Smith | +606-253-1207 | +
+
+
+
+
+
+ |
+ |
| Paul J. Friend | +281-308-0793 | +September 1, 1939 | +
+
+
+
+
+
+ |
+
+
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Phone Number</th>
+ <th>Date of Birth</th>
+ <th>Active?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ <td>Risa D. Pearson</td>
+ <td>336-508-2157</td>
+ <td>July 24, 1950</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch29" checked data-switch="success" />
+ <label for="switch29" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Ann C. Thompson</td>
+ <td>646-473-2057</td>
+ <td>January 25, 1959</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch30" checked data-switch="success" />
+ <label for="switch30" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Paul J. Friend</td>
+ <td>281-308-0793</td>
+ <td>September 1, 1939</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch31" data-switch="success" />
+ <label for="switch31" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td scope="row">Linda G. Smith</td>
+ <td colspan="2" class="table-active">606-253-1207</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch32" data-switch="success" />
+ <label for="switch32" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Paul J. Friend</td>
+ <td>281-308-0793</td>
+ <td>September 1, 1939</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch33" checked data-switch="success" />
+ <label for="switch33" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + Border styles, active styles, and table variants are not inherited by nested tables. +
+ + +| Name | +Phone Number | +Date of Birth | +Active? | +||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Risa D. Pearson | +336-508-2157 | +July 24, 1950 | +
+
+
+
+
+
+ |
+ ||||||||||||
+
|
+ |||||||||||||||
| Linda G. Smith | +606-253-1207 | +September 2, 1939 | +
+
+
+
+
+
+ |
+ ||||||||||||
+
+ <table class="table table-striped mb-0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Phone Number</th>
+ <th>Date of Birth</th>
+ <th>Active?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Risa D. Pearson</td>
+ <td>336-508-2157</td>
+ <td>July 24, 1950</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch34" checked data-switch="success" />
+ <label for="switch34" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Phone Number</th>
+ <th>Date of Birth</th>
+ <th>Active?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Risa D. Pearson</td>
+ <td>336-508-2157</td>
+ <td>July 24, 1950</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch35" checked data-switch="success" />
+ <label for="switch35" data-on-label="Yes" data-off-label="No"
+ class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Ann C. Thompson</td>
+ <td>646-473-2057</td>
+ <td>January 25, 1959</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch36" data-switch="success" />
+ <label for="switch36" data-on-label="Yes" data-off-label="No"
+ class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td>Linda G. Smith</td>
+ <td>606-253-1207</td>
+ <td>September 2, 1939</td>
+ <td>
+ <!-- Switch-->
+ <div>
+ <input type="checkbox" id="switch37" data-switch="success" />
+ <label for="switch37" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction
+ function:
+ $().DataTable();. KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual
+ cells, columns, rows or all cells.
+
| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
Please include following css file at head element
+
+ <!-- Datatables css -->
+ <link href="assets/vendor/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
+ <link href="assets/vendor/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" type="text/css" />
+
+
+
+ Make sure to include following js files at end of body element
+
+ <!-- Datatables js -->
+ <script src="assets/vendor/datatables.net/js/dataTables.min.js"></script>
+ <script src="assets/vendor/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
+ <script src="assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
+ <script src="assets/vendor/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
+
+ <!-- Datatable Init js -->
+ <script src="assets/js/pages/demo.datatable-init.js"></script>
+
+
+
+
+
+
+ <table id="basic-datatable" class="table dt-responsive nowrap w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page + that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built. +
+ + +| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
Please include following css file at head element
+
+ <!-- Datatables css -->
+ <link href="assets/vendor/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" type="text/css" />
+
+
+
+ Make sure to include following js files at end of body element
+
+ <!-- Datatables js -->
+ <script src="assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
+ <script src="assets/vendor/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
+ <script src="assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
+ <script src="assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
+ <script src="assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
+
+
+
+
+
+
+ <table id="datatable-buttons" class="table table-striped dt-responsive nowrap w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + This example shows the multi option. Note how a click on a row will toggle its selected state without effecting other rows, + unlike the os and single options shown in other examples. +
+ + +| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
Please include following css file at head element
+
+ <!-- Datatables css -->
+ <link href="assets/vendor/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" type="text/css" />
+
+
+
+ Make sure to include following js files at end of body element
+
+ <!-- Datatables js -->
+ <script src="assets/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
+
+
+
+
+
+ <table id="selection-datatable" class="table dt-responsive nowrap w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) + is fine for most situations, but there are cases where you may wish to customise the options presented to the end + user. +
+ + +| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
+
+ <table id="alternative-page-datatable" class="table dt-responsive nowrap w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an + alternative method to pagination for displaying a large table in a fairly small vertical area, and as such + pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled + as well!). +
+ + +| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
+
+ <table id="scroll-vertical-datatable" class="table dt-responsive nowrap w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide + table, but want to constrain it to a limited horizontal display area. +
+ + +| First name | +Last name | +Position | +Office | +Age | +Start date | +Salary | +Extn. | +|
|---|---|---|---|---|---|---|---|---|
| Tiger | +Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +5421 | +t.nixon@datatables.net | +
| Garrett | +Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +8422 | +g.winters@datatables.net | +
| Ashton | +Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +1562 | +a.cox@datatables.net | +
| Cedric | +Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +6224 | +c.kelly@datatables.net | +
| Airi | +Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +5407 | +a.satou@datatables.net | +
| Brielle | +Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +4804 | +b.williamson@datatables.net | +
| Herrod | +Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +9608 | +h.chandler@datatables.net | +
| Rhona | +Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +6200 | +r.davidson@datatables.net | +
| Colleen | +Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +2360 | +c.hurst@datatables.net | +
| Sonya | +Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +1667 | +s.frost@datatables.net | +
| Jena | +Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +3814 | +j.gaines@datatables.net | +
| Quinn | +Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +9497 | +q.flynn@datatables.net | +
| Charde | +Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +6741 | +c.marshall@datatables.net | +
| Haley | +Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +3597 | +h.kennedy@datatables.net | +
| Tatyana | +Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +1965 | +t.fitzpatrick@datatables.net | +
| Michael | +Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +1581 | +m.silva@datatables.net | +
| Paul | +Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +3059 | +p.byrd@datatables.net | +
| Gloria | +Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +1721 | +g.little@datatables.net | +
| Bradley | +Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +2558 | +b.greer@datatables.net | +
| Dai | +Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +2290 | +d.rios@datatables.net | +
| Jenette | +Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +1937 | +j.caldwell@datatables.net | +
| Yuri | +Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +6154 | +y.berry@datatables.net | +
| Caesar | +Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +8330 | +c.vance@datatables.net | +
| Doris | +Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +3023 | +d.wilder@datatables.net | +
| Angelica | +Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +5797 | +a.ramos@datatables.net | +
| Gavin | +Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +8822 | +g.joyce@datatables.net | +
| Jennifer | +Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +9239 | +j.chang@datatables.net | +
| Brenden | +Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +1314 | +b.wagner@datatables.net | +
| Fiona | +Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +2947 | +f.green@datatables.net | +
| Shou | +Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +8899 | +s.itou@datatables.net | +
| Michelle | +House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +2769 | +m.house@datatables.net | +
| Suki | +Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +6832 | +s.burks@datatables.net | +
| Prescott | +Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +3606 | +p.bartlett@datatables.net | +
| Gavin | +Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +2860 | +g.cortez@datatables.net | +
| Martena | +Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +8240 | +m.mccray@datatables.net | +
| Unity | +Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +5384 | +u.butler@datatables.net | +
| Howard | +Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +7031 | +h.hatfield@datatables.net | +
| Hope | +Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +6318 | +h.fuentes@datatables.net | +
| Vivian | +Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +9422 | +v.harrell@datatables.net | +
| Timothy | +Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +7580 | +t.mooney@datatables.net | +
| Jackson | +Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +1042 | +j.bradshaw@datatables.net | +
| Olivia | +Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +2120 | +o.liang@datatables.net | +
| Bruno | +Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +6222 | +b.nash@datatables.net | +
| Sakura | +Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +9383 | +s.yamamoto@datatables.net | +
| Thor | +Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +8327 | +t.walton@datatables.net | +
| Finn | +Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +2927 | +f.camacho@datatables.net | +
| Serge | +Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +8352 | +s.baldwin@datatables.net | +
| Zenaida | +Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +7439 | +z.frank@datatables.net | +
| Zorita | +Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +4389 | +z.serrano@datatables.net | +
| Jennifer | +Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +3431 | +j.acosta@datatables.net | +
| Cara | +Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +3990 | +c.stevens@datatables.net | +
| Hermione | +Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +1016 | +h.butler@datatables.net | +
| Lael | +Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +6733 | +l.greer@datatables.net | +
| Jonas | +Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +8196 | +j.alexander@datatables.net | +
| Shad | +Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +6373 | +s.decker@datatables.net | +
| Michael | +Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +5384 | +m.bruce@datatables.net | +
| Donna | +Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +4226 | +d.snider@datatables.net | +
+
+ <table id="scroll-horizontal-datatable" class="table w-100 nowrap">
+ <thead>
+ <tr>
+ <th>First name</th>
+ <th>Last name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ <th>Extn.</th>
+ <th>E-mail</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Tiger</td>
+ <td>Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ <td>5421</td>
+ <td>t.nixon@datatables.net</td>
+ </tr>
+ <tr>
+ <td>Garrett</td>
+ <td>Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ <td>8422</td>
+ <td>g.winters@datatables.net</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+ Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.
+
| Name | +HR Information | +Contact | +|||
|---|---|---|---|---|---|
| Position | +Salary | +Office | +Extn. | +||
| Tiger Nixon | +System Architect | +$320,800 | +Edinburgh | +5421 | +t.nixon@datatables.net | +
| Garrett Winters | +Accountant | +$170,750 | +Tokyo | +8422 | +g.winters@datatables.net | +
| Ashton Cox | +Junior Technical Author | +$86,000 | +San Francisco | +1562 | +a.cox@datatables.net | +
| Cedric Kelly | +Senior Javascript Developer | +$433,060 | +Edinburgh | +6224 | +c.kelly@datatables.net | +
| Airi Satou | +Accountant | +$162,700 | +Tokyo | +5407 | +a.satou@datatables.net | +
| Brielle Williamson | +Integration Specialist | +$372,000 | +New York | +4804 | +b.williamson@datatables.net | +
| Herrod Chandler | +Sales Assistant | +$137,500 | +San Francisco | +9608 | +h.chandler@datatables.net | +
| Rhona Davidson | +Integration Specialist | +$327,900 | +Tokyo | +6200 | +r.davidson@datatables.net | +
| Colleen Hurst | +Javascript Developer | +$205,500 | +San Francisco | +2360 | +c.hurst@datatables.net | +
| Sonya Frost | +Software Engineer | +$103,600 | +Edinburgh | +1667 | +s.frost@datatables.net | +
| Jena Gaines | +Office Manager | +$90,560 | +London | +3814 | +j.gaines@datatables.net | +
| Quinn Flynn | +Support Lead | +$342,000 | +Edinburgh | +9497 | +q.flynn@datatables.net | +
| Charde Marshall | +Regional Director | +$470,600 | +San Francisco | +6741 | +c.marshall@datatables.net | +
| Haley Kennedy | +Senior Marketing Designer | +$313,500 | +London | +3597 | +h.kennedy@datatables.net | +
| Tatyana Fitzpatrick | +Regional Director | +$385,750 | +London | +1965 | +t.fitzpatrick@datatables.net | +
| Michael Silva | +Marketing Designer | +$198,500 | +London | +1581 | +m.silva@datatables.net | +
| Paul Byrd | +Chief Financial Officer (CFO) | +$725,000 | +New York | +3059 | +p.byrd@datatables.net | +
| Gloria Little | +Systems Administrator | +$237,500 | +New York | +1721 | +g.little@datatables.net | +
| Bradley Greer | +Software Engineer | +$132,000 | +London | +2558 | +b.greer@datatables.net | +
| Dai Rios | +Personnel Lead | +$217,500 | +Edinburgh | +2290 | +d.rios@datatables.net | +
| Jenette Caldwell | +Development Lead | +$345,000 | +New York | +1937 | +j.caldwell@datatables.net | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +$675,000 | +New York | +6154 | +y.berry@datatables.net | +
| Caesar Vance | +Pre-Sales Support | +$106,450 | +New York | +8330 | +c.vance@datatables.net | +
| Doris Wilder | +Sales Assistant | +$85,600 | +Sidney | +3023 | +d.wilder@datatables.net | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +$1,200,000 | +London | +5797 | +a.ramos@datatables.net | +
| Gavin Joyce | +Developer | +$92,575 | +Edinburgh | +8822 | +g.joyce@datatables.net | +
| Jennifer Chang | +Regional Director | +$357,650 | +Singapore | +9239 | +j.chang@datatables.net | +
| Brenden Wagner | +Software Engineer | +$206,850 | +San Francisco | +1314 | +b.wagner@datatables.net | +
| Fiona Green | +Chief Operating Officer (COO) | +$850,000 | +San Francisco | +2947 | +f.green@datatables.net | +
| Shou Itou | +Regional Marketing | +$163,000 | +Tokyo | +8899 | +s.itou@datatables.net | +
| Michelle House | +Integration Specialist | +$95,400 | +Sidney | +2769 | +m.house@datatables.net | +
| Suki Burks | +Developer | +$114,500 | +London | +6832 | +s.burks@datatables.net | +
| Prescott Bartlett | +Technical Author | +$145,000 | +London | +3606 | +p.bartlett@datatables.net | +
| Gavin Cortez | +Team Leader | +$235,500 | +San Francisco | +2860 | +g.cortez@datatables.net | +
| Martena Mccray | +Post-Sales support | +$324,050 | +Edinburgh | +8240 | +m.mccray@datatables.net | +
| Unity Butler | +Marketing Designer | +$85,675 | +San Francisco | +5384 | +u.butler@datatables.net | +
| Howard Hatfield | +Office Manager | +$164,500 | +San Francisco | +7031 | +h.hatfield@datatables.net | +
| Hope Fuentes | +Secretary | +$109,850 | +San Francisco | +6318 | +h.fuentes@datatables.net | +
| Vivian Harrell | +Financial Controller | +$452,500 | +San Francisco | +9422 | +v.harrell@datatables.net | +
| Timothy Mooney | +Office Manager | +$136,200 | +London | +7580 | +t.mooney@datatables.net | +
| Jackson Bradshaw | +Director | +$645,750 | +New York | +1042 | +j.bradshaw@datatables.net | +
| Olivia Liang | +Support Engineer | +$234,500 | +Singapore | +2120 | +o.liang@datatables.net | +
| Bruno Nash | +Software Engineer | +$163,500 | +London | +6222 | +b.nash@datatables.net | +
| Sakura Yamamoto | +Support Engineer | +$139,575 | +Tokyo | +9383 | +s.yamamoto@datatables.net | +
| Thor Walton | +Developer | +$98,540 | +New York | +8327 | +t.walton@datatables.net | +
| Finn Camacho | +Support Engineer | +$87,500 | +San Francisco | +2927 | +f.camacho@datatables.net | +
| Serge Baldwin | +Data Coordinator | +$138,575 | +Singapore | +8352 | +s.baldwin@datatables.net | +
| Zenaida Frank | +Software Engineer | +$125,250 | +New York | +7439 | +z.frank@datatables.net | +
| Zorita Serrano | +Software Engineer | +$115,000 | +San Francisco | +4389 | +z.serrano@datatables.net | +
| Jennifer Acosta | +Junior Javascript Developer | +$75,650 | +Edinburgh | +3431 | +j.acosta@datatables.net | +
| Cara Stevens | +Sales Assistant | +$145,600 | +New York | +3990 | +c.stevens@datatables.net | +
| Hermione Butler | +Regional Director | +$356,250 | +London | +1016 | +h.butler@datatables.net | +
| Lael Greer | +Systems Administrator | +$103,500 | +London | +6733 | +l.greer@datatables.net | +
| Jonas Alexander | +Developer | +$86,500 | +San Francisco | +8196 | +j.alexander@datatables.net | +
| Shad Decker | +Regional Director | +$183,000 | +Edinburgh | +6373 | +s.decker@datatables.net | +
| Michael Bruce | +Javascript Developer | +$183,000 | +Singapore | +5384 | +m.bruce@datatables.net | +
| Donna Snider | +Customer Support | +$112,000 | +New York | +4226 | +d.snider@datatables.net | +
| Name | +Position | +Salary | +Office | +Extn. | +|
+
+ <table id="complex-header-datatable" class="table dt-responsive nowrap w-100">
+ <thead class="table-light">
+ <tr>
+ <th rowspan="2" class="align-middle">Name</th>
+ <th colspan="2">HR Information</th>
+ <th colspan="3">Contact</th>
+ </tr>
+ <tr>
+ <th>Position</th>
+ <th>Salary</th>
+ <th>Office</th>
+ <th>Extn.</th>
+ <th>E-mail</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>$320,800</td>
+ <td>Edinburgh</td>
+ <td>5421</td>
+ <td>t.nixon@datatables.net</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>$170,750</td>
+ <td>Tokyo</td>
+ <td>8422</td>
+ <td>g.winters@datatables.net</td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Salary</th>
+ <th>Office</th>
+ <th>Extn.</th>
+ <th>E-mail</th>
+ </tr>
+ </tfoot>
+ </table>
+
+
+ + The following example shows how a callback function can be used to format a particular row at draw time. For each + row that is generated for display, the createdRow function is called once and once only. It is passed the create row + node which can then be modified. +
+ + +| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
+
+ <table id="row-callback-datatable" class="table dt-responsive nowrap w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so + that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page. This + state saving ability is enabled by the stateSave option. +
+ + +| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
+
+ <table id="state-saving-datatable" class="table activate-select dt-responsive nowrap w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + When making use of DataTables' x-axis scrolling feature you may wish to fix the left or right most columns in place +
+ + + +| First name | +Last name | +Position | +Office | +Age | +Start date | +Salary | +Extn. | +|
|---|---|---|---|---|---|---|---|---|
| Tiger | +Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +5421 | +t.nixon@datatables.net | +
| Garrett | +Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +8422 | +g.winters@datatables.net | +
| Ashton | +Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +1562 | +a.cox@datatables.net | +
| Cedric | +Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +6224 | +c.kelly@datatables.net | +
| Airi | +Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +5407 | +a.satou@datatables.net | +
| Brielle | +Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +4804 | +b.williamson@datatables.net | +
| Herrod | +Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +9608 | +h.chandler@datatables.net | +
| Rhona | +Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +6200 | +r.davidson@datatables.net | +
| Colleen | +Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +2360 | +c.hurst@datatables.net | +
| Sonya | +Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +1667 | +s.frost@datatables.net | +
| Jena | +Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +3814 | +j.gaines@datatables.net | +
| Quinn | +Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +9497 | +q.flynn@datatables.net | +
| Charde | +Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +6741 | +c.marshall@datatables.net | +
| Haley | +Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +3597 | +h.kennedy@datatables.net | +
| Tatyana | +Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +1965 | +t.fitzpatrick@datatables.net | +
| Michael | +Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +1581 | +m.silva@datatables.net | +
| Paul | +Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +3059 | +p.byrd@datatables.net | +
| Gloria | +Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +1721 | +g.little@datatables.net | +
| Bradley | +Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +2558 | +b.greer@datatables.net | +
| Dai | +Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +2290 | +d.rios@datatables.net | +
| Jenette | +Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +1937 | +j.caldwell@datatables.net | +
| Yuri | +Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +6154 | +y.berry@datatables.net | +
| Caesar | +Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +8330 | +c.vance@datatables.net | +
| Doris | +Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +3023 | +d.wilder@datatables.net | +
| Angelica | +Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +5797 | +a.ramos@datatables.net | +
| Gavin | +Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +8822 | +g.joyce@datatables.net | +
| Jennifer | +Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +9239 | +j.chang@datatables.net | +
| Brenden | +Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +1314 | +b.wagner@datatables.net | +
| Fiona | +Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +2947 | +f.green@datatables.net | +
| Shou | +Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +8899 | +s.itou@datatables.net | +
| Michelle | +House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +2769 | +m.house@datatables.net | +
| Suki | +Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +6832 | +s.burks@datatables.net | +
| Prescott | +Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +3606 | +p.bartlett@datatables.net | +
| Gavin | +Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +2860 | +g.cortez@datatables.net | +
| Martena | +Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +8240 | +m.mccray@datatables.net | +
| Unity | +Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +5384 | +u.butler@datatables.net | +
| Howard | +Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +7031 | +h.hatfield@datatables.net | +
| Hope | +Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +6318 | +h.fuentes@datatables.net | +
| Vivian | +Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +9422 | +v.harrell@datatables.net | +
| Timothy | +Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +7580 | +t.mooney@datatables.net | +
| Jackson | +Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +1042 | +j.bradshaw@datatables.net | +
| Olivia | +Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +2120 | +o.liang@datatables.net | +
| Bruno | +Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +6222 | +b.nash@datatables.net | +
| Sakura | +Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +9383 | +s.yamamoto@datatables.net | +
| Thor | +Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +8327 | +t.walton@datatables.net | +
| Finn | +Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +2927 | +f.camacho@datatables.net | +
| Serge | +Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +8352 | +s.baldwin@datatables.net | +
| Zenaida | +Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +7439 | +z.frank@datatables.net | +
| Zorita | +Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +4389 | +z.serrano@datatables.net | +
| Jennifer | +Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +3431 | +j.acosta@datatables.net | +
| Cara | +Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +3990 | +c.stevens@datatables.net | +
| Hermione | +Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +1016 | +h.butler@datatables.net | +
| Lael | +Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +6733 | +l.greer@datatables.net | +
| Jonas | +Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +8196 | +j.alexander@datatables.net | +
| Shad | +Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +6373 | +s.decker@datatables.net | +
| Michael | +Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +5384 | +m.bruce@datatables.net | +
| Donna | +Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +4226 | +d.snider@datatables.net | +
+
+ <table id="fixed-columns-datatable" class="table nowrap row-border order-column w-100">
+ <thead>
+ <tr>
+ <th>First name</th>
+ <th>Last name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ <th>Extn.</th>
+ <th>E-mail</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Tiger</td>
+ <td>Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ <td>5421</td>
+ <td>t.nixon@datatables.net</td>
+ </tr>
+ <tr>
+ <td>Garrett</td>
+ <td>Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ <td>8422</td>
+ <td>g.winters@datatables.net</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ + The FixedHeader will freeze in place the header and/or footer in a DataTable, ensuring that title information will remain always visible. +
+ + + +| Name | +Position | +Office | +Age | +Start date | +Salary | +
|---|---|---|---|---|---|
| Tiger Nixon | +System Architect | +Edinburgh | +61 | +2011/04/25 | +$320,800 | +
| Garrett Winters | +Accountant | +Tokyo | +63 | +2011/07/25 | +$170,750 | +
| Ashton Cox | +Junior Technical Author | +San Francisco | +66 | +2009/01/12 | +$86,000 | +
| Cedric Kelly | +Senior Javascript Developer | +Edinburgh | +22 | +2012/03/29 | +$433,060 | +
| Airi Satou | +Accountant | +Tokyo | +33 | +2008/11/28 | +$162,700 | +
| Brielle Williamson | +Integration Specialist | +New York | +61 | +2012/12/02 | +$372,000 | +
| Herrod Chandler | +Sales Assistant | +San Francisco | +59 | +2012/08/06 | +$137,500 | +
| Rhona Davidson | +Integration Specialist | +Tokyo | +55 | +2010/10/14 | +$327,900 | +
| Colleen Hurst | +Javascript Developer | +San Francisco | +39 | +2009/09/15 | +$205,500 | +
| Sonya Frost | +Software Engineer | +Edinburgh | +23 | +2008/12/13 | +$103,600 | +
| Jena Gaines | +Office Manager | +London | +30 | +2008/12/19 | +$90,560 | +
| Quinn Flynn | +Support Lead | +Edinburgh | +22 | +2013/03/03 | +$342,000 | +
| Charde Marshall | +Regional Director | +San Francisco | +36 | +2008/10/16 | +$470,600 | +
| Haley Kennedy | +Senior Marketing Designer | +London | +43 | +2012/12/18 | +$313,500 | +
| Tatyana Fitzpatrick | +Regional Director | +London | +19 | +2010/03/17 | +$385,750 | +
| Michael Silva | +Marketing Designer | +London | +66 | +2012/11/27 | +$198,500 | +
| Paul Byrd | +Chief Financial Officer (CFO) | +New York | +64 | +2010/06/09 | +$725,000 | +
| Gloria Little | +Systems Administrator | +New York | +59 | +2009/04/10 | +$237,500 | +
| Bradley Greer | +Software Engineer | +London | +41 | +2012/10/13 | +$132,000 | +
| Dai Rios | +Personnel Lead | +Edinburgh | +35 | +2012/09/26 | +$217,500 | +
| Jenette Caldwell | +Development Lead | +New York | +30 | +2011/09/03 | +$345,000 | +
| Yuri Berry | +Chief Marketing Officer (CMO) | +New York | +40 | +2009/06/25 | +$675,000 | +
| Caesar Vance | +Pre-Sales Support | +New York | +21 | +2011/12/12 | +$106,450 | +
| Doris Wilder | +Sales Assistant | +Sidney | +23 | +2010/09/20 | +$85,600 | +
| Angelica Ramos | +Chief Executive Officer (CEO) | +London | +47 | +2009/10/09 | +$1,200,000 | +
| Gavin Joyce | +Developer | +Edinburgh | +42 | +2010/12/22 | +$92,575 | +
| Jennifer Chang | +Regional Director | +Singapore | +28 | +2010/11/14 | +$357,650 | +
| Brenden Wagner | +Software Engineer | +San Francisco | +28 | +2011/06/07 | +$206,850 | +
| Fiona Green | +Chief Operating Officer (COO) | +San Francisco | +48 | +2010/03/11 | +$850,000 | +
| Shou Itou | +Regional Marketing | +Tokyo | +20 | +2011/08/14 | +$163,000 | +
| Michelle House | +Integration Specialist | +Sidney | +37 | +2011/06/02 | +$95,400 | +
| Suki Burks | +Developer | +London | +53 | +2009/10/22 | +$114,500 | +
| Prescott Bartlett | +Technical Author | +London | +27 | +2011/05/07 | +$145,000 | +
| Gavin Cortez | +Team Leader | +San Francisco | +22 | +2008/10/26 | +$235,500 | +
| Martena Mccray | +Post-Sales support | +Edinburgh | +46 | +2011/03/09 | +$324,050 | +
| Unity Butler | +Marketing Designer | +San Francisco | +47 | +2009/12/09 | +$85,675 | +
| Howard Hatfield | +Office Manager | +San Francisco | +51 | +2008/12/16 | +$164,500 | +
| Hope Fuentes | +Secretary | +San Francisco | +41 | +2010/02/12 | +$109,850 | +
| Vivian Harrell | +Financial Controller | +San Francisco | +62 | +2009/02/14 | +$452,500 | +
| Timothy Mooney | +Office Manager | +London | +37 | +2008/12/11 | +$136,200 | +
| Jackson Bradshaw | +Director | +New York | +65 | +2008/09/26 | +$645,750 | +
| Olivia Liang | +Support Engineer | +Singapore | +64 | +2011/02/03 | +$234,500 | +
| Bruno Nash | +Software Engineer | +London | +38 | +2011/05/03 | +$163,500 | +
| Sakura Yamamoto | +Support Engineer | +Tokyo | +37 | +2009/08/19 | +$139,575 | +
| Thor Walton | +Developer | +New York | +61 | +2013/08/11 | +$98,540 | +
| Finn Camacho | +Support Engineer | +San Francisco | +47 | +2009/07/07 | +$87,500 | +
| Serge Baldwin | +Data Coordinator | +Singapore | +64 | +2012/04/09 | +$138,575 | +
| Zenaida Frank | +Software Engineer | +New York | +63 | +2010/01/04 | +$125,250 | +
| Zorita Serrano | +Software Engineer | +San Francisco | +56 | +2012/06/01 | +$115,000 | +
| Jennifer Acosta | +Junior Javascript Developer | +Edinburgh | +43 | +2013/02/01 | +$75,650 | +
| Cara Stevens | +Sales Assistant | +New York | +46 | +2011/12/06 | +$145,600 | +
| Hermione Butler | +Regional Director | +London | +47 | +2011/03/21 | +$356,250 | +
| Lael Greer | +Systems Administrator | +London | +21 | +2009/02/27 | +$103,500 | +
| Jonas Alexander | +Developer | +San Francisco | +30 | +2010/07/14 | +$86,500 | +
| Shad Decker | +Regional Director | +Edinburgh | +51 | +2008/11/13 | +$183,000 | +
| Michael Bruce | +Javascript Developer | +Singapore | +29 | +2011/06/27 | +$183,000 | +
| Donna Snider | +Customer Support | +New York | +27 | +2011/01/25 | +$112,000 | +
| Name | +Position | +Office | +Age | +Start date | +Salary | +
+
+ <table id="fixed-header-datatable" class="table dt-responsive nowrap table-striped w-100">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Office</th>
+ <th>Age</th>
+ <th>Start date</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>Tiger Nixon</td>
+ <td>System Architect</td>
+ <td>Edinburgh</td>
+ <td>61</td>
+ <td>2011/04/25</td>
+ <td>$320,800</td>
+ </tr>
+ <tr>
+ <td>Garrett Winters</td>
+ <td>Accountant</td>
+ <td>Tokyo</td>
+ <td>63</td>
+ <td>2011/07/25</td>
+ <td>$170,750</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click the accordions below to expand/collapse the accordion content.
+ + + +.accordion-body, though the transition does limit overflow.
+ .accordion-body, though the transition does limit overflow.
+ .accordion-body, though the transition does limit overflow.
+
+
+ <div class="accordion" id="accordionExample">
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="headingOne">
+ <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
+ aria-expanded="true" aria-controls="collapseOne">
+ Accordion Item #1
+ </button>
+ </h2>
+ <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
+ data-bs-parent="#accordionExample">
+ <div class="accordion-body">
+ <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse
+ plugin adds the appropriate classes that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
+ custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
+ within the <code>.accordion-body</code>, though the transition does limit overflow.
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="headingTwo">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+ data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+ Accordion Item #2
+ </button>
+ </h2>
+ <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
+ data-bs-parent="#accordionExample">
+ <div class="accordion-body">
+ <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
+ plugin adds the appropriate classes that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
+ custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
+ within the <code>.accordion-body</code>, though the transition does limit overflow.
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="headingThree">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+ data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+ Accordion Item #3
+ </button>
+ </h2>
+ <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
+ data-bs-parent="#accordionExample">
+ <div class="accordion-body">
+ <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse
+ plugin adds the appropriate classes that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
+ custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
+ within the <code>.accordion-body</code>, though the transition does limit overflow.
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
.accordion-flush class. This is the first item's accordion body.
+ .accordion-flush class. This is the second item's accordion body. Let's imagine this being
+ filled with some actual content.
+ .accordion-flush class. This is the third item's accordion body. Nothing more exciting
+ happening here in terms of content, but just filling up the space to make it look, at least at first
+ glance, a bit more representative of how this would look in a real-world application.
+
+
+ <div class="accordion accordion-flush" id="accordionFlushExample">
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="flush-headingOne">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+ data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+ Accordion Item #1
+ </button>
+ </h2>
+ <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
+ data-bs-parent="#accordionFlushExample">
+ <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+ <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="flush-headingTwo">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+ data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+ Accordion Item #2
+ </button>
+ </h2>
+ <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
+ data-bs-parent="#accordionFlushExample">
+ <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+ <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being
+ filled with some actual content.</div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="flush-headingThree">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+ data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
+ Accordion Item #3
+ </button>
+ </h2>
+ <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
+ data-bs-parent="#accordionFlushExample">
+ <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+ <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting
+ happening here in terms of content, but just filling up the space to make it look, at least at first
+ glance, a bit more representative of how this would look in a real-world application.</div>
+ </div>
+ </div>
+ </div>
+
+
+
+ Using the card component, you can
+ extend the default collapse behavior to create an accordion. To properly achieve
+ the accordion style, be sure to use .accordion as a wrapper.
+
+
+ <div class="accordion" id="CardaccordionExample">
+ <div class="card mb-0">
+ <div class="card-header" id="CardheadingOne">
+ <h5 class="m-0">
+ <a class="custom-accordion-title d-block pt-2 pb-2"
+ data-bs-toggle="collapse" href="#collapseOne"
+ aria-expanded="true" aria-controls="collapseOne">
+ Collapsible Group Item #1
+ </a>
+ </h5>
+ </div>
+
+ <div id="collapseOne" class="collapse show"
+ aria-labelledby="CardheadingOne" data-bs-parent="#CardaccordionExample">
+ <div class="card-body pt-0">
+ ...
+ </div>
+ </div>
+ </div>
+ <div class="card mb-0">
+ <div class="card-header" id="CardheadingTwo">
+ <h5 class="m-0">
+ <a class="custom-accordion-title collapsed d-block pt-2 pb-2"
+ data-bs-toggle="collapse" href="#collapseTwo"
+ aria-expanded="false" aria-controls="collapseTwo">
+ Collapsible Group Item #2
+ </a>
+ </h5>
+ </div>
+ <div id="collapseTwo" class="collapse" aria-labelledby="CardheadingTwo"
+ data-bs-parent="#CardaccordionExample">
+ <div class="card-body pt-0">
+ ...
+ </div>
+ </div>
+ </div>
+ <div class="card mb-0">
+ <div class="card-header" id="CardheadingThree">
+ <h5 class="m-0">
+ <a class="custom-accordion-title collapsed d-block pt-2 pb-2"
+ data-bs-toggle="collapse" href="#collapseThree"
+ aria-expanded="false" aria-controls="collapseThree">
+ Collapsible Group Item #3
+ </a>
+ </h5>
+ </div>
+ <div id="collapseThree" class="collapse"
+ aria-labelledby="CardheadingThree" data-bs-parent="#CardaccordionExample">
+ <div class="card-body pt-0">
+ ...
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.
.accordion-body, though the transition does limit overflow.
+ .accordion-body, though the transition does limit
+ overflow.
+ .accordion-body, though the transition does limit
+ overflow.
+
+
+ <div class="accordion" id="accordionPanelsStayOpenExample">
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="panelsStayOpen-headingOne">
+ <button class="accordion-button" type="button" data-bs-toggle="collapse"
+ data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
+ aria-controls="panelsStayOpen-collapseOne">
+ Accordion Item #1
+ </button>
+ </h2>
+ <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+ aria-labelledby="panelsStayOpen-headingOne">
+ <div class="accordion-body">
+ <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse
+ plugin adds the appropriate classes that we use to style each element. These classes control the
+ overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of
+ this with custom CSS or overriding our default variables. It's also worth noting that just about any
+ HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+ data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
+ aria-controls="panelsStayOpen-collapseTwo">
+ Accordion Item #2
+ </button>
+ </h2>
+ <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
+ aria-labelledby="panelsStayOpen-headingTwo">
+ <div class="accordion-body">
+ <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
+ collapse plugin adds the appropriate classes that we use to style each element. These classes
+ control the overall appearance, as well as the showing and hiding via CSS transitions. You can
+ modify any of this with custom CSS or overriding our default variables. It's also worth noting that
+ just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit
+ overflow.
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+ data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
+ aria-controls="panelsStayOpen-collapseThree">
+ Accordion Item #3
+ </button>
+ </h2>
+ <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
+ aria-labelledby="panelsStayOpen-headingThree">
+ <div class="accordion-body">
+ <strong>This is the third item's accordion body.</strong> It is hidden by default, until the
+ collapse plugin adds the appropriate classes that we use to style each element. These classes
+ control the overall appearance, as well as the showing and hiding via CSS transitions. You can
+ modify any of this with custom CSS or overriding our default variables. It's also worth noting that
+ just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit
+ overflow.
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+ You can have custom look and feel for accorion as well. Just use class .custom-accordion along with
+ .accordion as a wrapper.
+
+
+ <div class="accordion custom-accordion" id="custom-accordion-one">
+ <div class="card mb-0">
+ <div class="card-header" id="headingFour">
+ <h5 class="m-0">
+ <a class="custom-accordion-title d-block"
+ data-bs-toggle="collapse" href="#collapseFour"
+ aria-expanded="true" aria-controls="collapseFour">
+ Q. Can I use this template for my client? <i
+ class="mdi mdi-chevron-down accordion-arrow"></i>
+ </a>
+ </h5>
+ </div>
+
+ <div id="collapseFour" class="collapse show"
+ aria-labelledby="headingFour"
+ data-bs-parent="#custom-accordion-one">
+ <div class="card-body">
+ ...
+ </div>
+ </div>
+ </div>
+ <div class="card mb-0">
+ <div class="card-header" id="headingFive">
+ <h5 class="m-0">
+ <a class="custom-accordion-title collapsed d-block"
+ data-bs-toggle="collapse" href="#collapseFive"
+ aria-expanded="false" aria-controls="collapseFive">
+ Q. Can this theme work with WordPress? <i
+ class="mdi mdi-chevron-down accordion-arrow"></i>
+ </a>
+ </h5>
+ </div>
+ <div id="collapseFive" class="collapse"
+ aria-labelledby="headingFive"
+ data-bs-parent="#custom-accordion-one">
+ <div class="card-body">
+ ...
+ </div>
+ </div>
+ </div>
+ <div class="card mb-0">
+ <div class="card-header" id="headingSix">
+ <h5 class="m-0">
+ <a class="custom-accordion-title collapsed d-block"
+ data-bs-toggle="collapse" href="#collapseSix"
+ aria-expanded="false" aria-controls="collapseSix">
+ Q. How do I get help with the theme? <i
+ class="mdi mdi-chevron-down accordion-arrow"></i>
+ </a>
+ </h5>
+ </div>
+ <div id="collapseSix" class="collapse" aria-labelledby="headingSix"
+ data-bs-parent="#custom-accordion-one">
+ <div class="card-body">
+ ...
+ </div>
+ </div>
+ </div>
+ <div class="card mb-0">
+ <div class="card-header" id="headingSeven">
+ <h5 class="m-0">
+ <a class="custom-accordion-title collapsed d-block"
+ data-bs-toggle="collapse" href="#collapseSeven"
+ aria-expanded="false" aria-controls="collapseSeven">
+ Q. Will you regularly give updates of Hyper ? <i
+ class="mdi mdi-chevron-down accordion-arrow"></i>
+ </a>
+ </h5>
+ </div>
+ <div id="collapseSeven" class="collapse"
+ aria-labelledby="headingSeven"
+ data-bs-parent="#custom-accordion-one">
+ <div class="card-body">
+ ...
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ + Bootstrap's collapse provides the way to toggle the visibility of any content or element. + Please read the official Bootstrap + documentation for a full list of options. +
+ + + ++ + Link with href + + +
+
+
+ <p>
+ <a class="btn btn-primary" data-bs-toggle="collapse"
+ href="#collapseExample" aria-expanded="false"
+ aria-controls="collapseExample">
+ Link with href
+ </a>
+ <button class="btn btn-primary ms-1" type="button"
+ data-bs-toggle="collapse" data-bs-target="#collapseExample"
+ aria-expanded="false" aria-controls="collapseExample">
+ Button with data-bs-target
+ </button>
+ </p>
+ <div class="collapse show" id="collapseExample">
+ <div class="card card-body mb-0">
+ ...
+ </div>
+ </div>
+
+
+ The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.
+ +
+
+
+ <p>
+ <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample"
+ aria-expanded="false" aria-controls="collapseWidthExample">
+ Toggle width collapse
+ </button>
+ </p>
+ <div style="min-height: 120px;">
+ <div class="collapse collapse-horizontal" id="collapseWidthExample">
+ <div class="card card-body mb-0" style="width: 300px;">
+ This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
+ </div>
+ </div>
+ </div>
+
+
+
+ Multiple <button> or <a> can show and hide an element if
+ they each reference it with their href or data-bs-target attribute
+
+ Toggle first element + + +
+
+
+ <p>
+ <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
+ <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
+ <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
+ </p>
+ <div class="row">
+ <div class="col">
+ <div class="collapse multi-collapse" id="multiCollapseExample1">
+ <div class="card card-body mb-0">
+ ...
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="collapse multi-collapse" id="multiCollapseExample2">
+ <div class="card card-body mb-0">
+ ...
+ </div>
+ </div>
+ </div> <!-- end col -->
+ </div> <!-- end row-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. + Alerts are available for any length of text, as well as an optional dismiss + button. +
+
+ For proper styling, use one of the eight
+ required contextual classes (e.g.,
+ .alert-success). For background color use class
+ .bg-* , .text-white
+
+
+ <div class="alert alert-primary" role="alert">
+ <strong>Primary - </strong> A simple primary alert—check it out!
+ </div>
+ <div class="alert alert-secondary" role="alert">
+ <strong>Secondary - </strong> A simple secondary alert—check it out!
+ </div>
+ <div class="alert alert-success" role="alert">
+ <strong>Success - </strong> A simple success alert—check it out!
+ </div>
+ <div class="alert alert-danger" role="alert">
+ <strong>Error - </strong> A simple danger alert—check it out!
+ </div>
+ <div class="alert alert-warning text-bg-warning border-0" role="alert">
+ <strong>Warning - </strong> A simple warning alert—check it out!
+ </div>
+ <div class="alert alert-info text-bg-info border-0" role="alert">
+ <strong>Info - </strong> A simple info alert—check it out!
+ </div>
+ <div class="alert alert-light text-bg-light border-0" role="alert">
+ <strong>Light - </strong> A simple light alert—check it out!
+ </div>
+ <div class="alert alert-dark border-0 mb-0" role="alert">
+ <strong>Dark - </strong> A simple dark alert—check it out!
+ </div>
+
+
+
+ Add a dismiss button and the .alert-dismissible class, which adds
+ extra padding to the right of the alert
+ and positions the .btn-close button.
+
+
+ <div class="alert alert-primary alert-dismissible text-bg-primary border-0 fade show" role="alert">
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Primary - </strong> A simple primary alert—check it out!
+ </div>
+ <div class="alert alert-secondary alert-dismissible text-bg-secondary border-0 fade show" role="alert">
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Secondary - </strong> A simple secondary alert—check it out!
+ </div>
+ <div class="alert alert-success alert-dismissible text-bg-success border-0 fade show" role="alert">
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Success - </strong> A simple success alert—check it out!
+ </div>
+ <div class="alert alert-danger alert-dismissible text-bg-danger border-0 fade show" role="alert">
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Error - </strong> A simple danger alert—check it out!
+ </div>
+ <div class="alert alert-warning alert-dismissible fade show" role="alert">
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Warning - </strong> A simple warning alert—check it out!
+ </div>
+ <div class="alert alert-info alert-dismissible fade show" role="alert">
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Info - </strong> A simple info alert—check it out!
+ </div>
+ <div class="alert alert-light alert-dismissible fade show" role="alert">
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Light - </strong> A simple light alert—check it out!
+ </div>
+ <div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+ <strong>Dark - </strong> A simple dark alert—check it out!
+ </div>
+
+
+
+ Display alert with transparent background and with contextual text color. Use
+ classes
+ .bg-white, and .text-*. E.g. bg-white
+ text-primary.
+
+
+ <div class="alert alert-primary bg-transparent text-primary" role="alert">
+ This is a <strong>primary</strong> alert—check it out!
+ </div>
+ <div class="alert alert-secondary bg-transparent text-secondary" role="alert">
+ This is a <strong>secondary</strong> alert—check it out!
+ </div>
+ <div class="alert alert-success bg-transparent text-success" role="alert">
+ This is a <strong>success</strong> alert—check it out!
+ </div>
+ <div class="alert alert-info bg-transparent text-info" role="alert">
+ This is a <strong>info</strong> alert—check it out!
+ </div>
+ <div class="alert alert-warning bg-transparent text-warning" role="alert">
+ This is a <strong>warning</strong> alert—check it out!
+ </div>
+ <div class="alert alert-danger bg-transparent text-danger" role="alert">
+ This is a <strong>danger</strong> alert—check it out!
+ </div>
+ <div class="alert alert-light bg-transparent text-light" role="alert">
+ This is a <strong>light</strong> alert—check it out!
+ </div>
+ <div class="alert alert-dark bg-transparent text-dark" role="alert">
+ This is a <strong>dark</strong> alert—check it out!
+ </div>
+
+
+
+ Use the .alert-link utility class to quickly provide matching
+ colored links within any alert.
+
+
+ <div class="alert alert-primary" role="alert">
+ A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+ <div class="alert alert-secondary" role="alert">
+ A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+ <div class="alert alert-success" role="alert">
+ A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+ <div class="alert alert-danger" role="alert">
+ A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+ <div class="alert alert-warning" role="alert">
+ A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+ <div class="alert alert-info" role="alert">
+ A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+ <div class="alert alert-light" role="alert">
+ A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+ <div class="alert alert-dark" role="alert">
+ A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+ </div>
+
+
+ + You can also include additional elements like icons, heading, etc along side the actual message. +
+ + +
+
+ <div class="alert alert-success" role="alert">
+ <i class="ri-check-line me-1 align-middle font-16"></i> This is a <strong>success</strong> alert - check it out!
+ </div>
+ <div class="alert alert-danger" role="alert">
+ <i class="ri-close-circle-line me-1 align-middle font-16"></i> This is a <strong>danger</strong> alert - check it out!
+ </div>
+ <div class="alert alert-warning" role="alert">
+ <i class="ri-alert-line me-1 align-middle font-16"></i> This is a <strong>warning</strong> alert - check it out!
+ </div>
+ <div class="alert alert-info" role="alert">
+ <i class="ri-information-line me-1 align-middle font-16"></i> This is a <strong>info</strong> alert - check it out!
+ </div>
+
+
+ + Alerts can also contain additional HTML elements like headings, paragraphs and + dividers. +
+ + +Aww yeah, you successfully read this important alert message. This + example text is going to run a bit longer so that you can see how + spacing within an alert works with this kind of content.
+Whenever you need to, be sure to use margin utilities to + keep things nice and tidy.
+
+
+ <div class="alert alert-success" role="alert">
+ <h4 class="alert-heading">Well done!</h4>
+ <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+ <hr>
+ <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+ </div>
+
+
+ Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
+ + +
+
+ <div id="liveAlertPlaceholder"></div>
+ <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Create and group avatars of different sizes and shapes with the css classes. + Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes. +
+ + + +
+
+ .avatar-xs
+
+
+ .avatar-sm
+
+
+ .avatar-md
+
+
+ .avatar-lg
+
+
+ .avatar-xl
+
+
+ <!-- Avatar Extra Small -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xs">
+
+ <!-- Avatar Small -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-sm">
+
+ <!-- Avatar Medium -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-md">
+
+ <!-- Avatar Large -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-lg">
+
+ <!-- Avatar Extra Large -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xl">
+
+
+
+ Using an additional class .rounded-circle in <img> element creates the rounded avatar.
+
+
+ .avatar-md .rounded-circle
+
+
+ .avatar-lg .rounded-circle
+
+
+ .avatar-xl .rounded-circle
+
+
+ <!-- Avatar Medium -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-md rounded-circle">
+
+ <!-- Avatar Large -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-lg rounded-circle">
+
+ <!-- Avatar Extra Large -->
+ <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xl rounded-circle">
+
+
+
+ Using utilities classes of background e.g. bg-* allows you to have any background color as well.
+
+ Using .avatar-xs
+
+ Using .avatar-sm
+
+ Using .avatar-md
+
+ Using .avatar-lg
+
+ Using .avatar-xl
+
+
+ <!-- Avatar Extra Small -->
+ <div class="avatar-xs">
+ <span class="avatar-title bg-success rounded">
+ xs
+ </span>
+ </div>
+
+ <!-- Avatar Small -->
+ <div class="avatar-sm">
+ <span class="avatar-title bg-success rounded">
+ sm
+ </span>
+ </div>
+
+ <!-- Avatar Medium -->
+ <div class="avatar-md">
+ <span class="avatar-title bg-success rounded">
+ md
+ </span>
+ </div>
+
+ <!-- Avatar Large -->
+ <div class="avatar-lg">
+ <span class="avatar-title bg-success rounded">
+ lg
+ </span>
+ </div>
+
+ <!-- Avatar Extra Small -->
+ <div class="avatar-xl">
+ <span class="avatar-title bg-success rounded">
+ xl
+ </span>
+ </div>
+
+
+
+ Using an additional class .rounded-circle in <img> element creates the rounded avatar.
+
+ Using .avatar-md .rounded-circle
+
+ Using .avatar-lg .rounded-circle
+
+ Using .avatar-xl .rounded-circle
+
+
+ <!-- Avatar Medium -->
+ <div class="avatar-md">
+ <span class="avatar-title bg-success rounded-circle">
+ md
+ </span>
+ </div>
+
+ <!-- Avatar Large -->
+ <div class="avatar-lg">
+ <span class="avatar-title bg-success rounded-circle">
+ lg
+ </span>
+ </div>
+
+ <!-- Avatar Extra Small -->
+ <div class="avatar-xl">
+ <span class="avatar-title bg-success rounded-circle">
+ xl
+ </span>
+ </div>
+
+
+ + Avatars with different sizes and shapes. +
+ + + +
+
+ .rounded
+
+
+ .rounded
+
+
+ .rounded-circle
+
+
+ .img-thumbnail
+
+
+ .rounded-circle .img-thumbnail
+
+
+ <!-- Rounded -->
+ <img src="assets/images/small/small-2.jpg" alt="image" class="img-fluid rounded" width="200"/>
+
+ <!-- Rounded Circle-->
+ <img src="assets/images/user/avatar-1.jpg" alt="image" class="img-fluid rounded-circle" width="120"/>
+
+ <!-- Thumbnail-->
+ <img src="assets/images/small/small-3.jpg" alt="image" class="img-fluid img-thumbnail" width="200"/>
+
+ <!-- Thumbnail Circle-->
+ <img src="assets/images/user/avatar-2.jpg" alt="image" class="img-fluid img-thumbnail rounded-circle" width="120"/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A simple labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
+
+
+ <h1>h1.Example heading <span class="badge text-bg-secondary">New</span></h1>
+ <h2>h2.Example heading <span class="badge badge-success-lighten">New</span></h2>
+ <h3>h2.Example heading <span class="badge bg-primary">New</span></h3>
+ <h4>h4.Example heading <a href="#" class="badge badge-info-lighten">Info Link</a></h4>
+ <h5>h5.Example heading <span class="badge badge-outline-warning">New</span></h5>
+ <h6>h6.Example heading <span class="badge bg-danger">New</span></h6>
+
+
+
+ Use the .rounded-pill modifier class to make badges more rounded.
+
+ Use the .badge-*-lighten modifier class to make badges lighten.
+
+ Using the .badge-outline-* to quickly create a bordered badges.
+
+
+ <!-- Default Badges -->
+ <span class="badge bg-primary rounded-pill">Primary</span>
+ <span class="badge text-bg-secondary rounded-pill">Secondary</span>
+ <span class="badge bg-success rounded-pill">Success</span>
+ <span class="badge bg-danger rounded-pill">Danger</span>
+ <span class="badge bg-warning rounded-pill">Warning</span>
+ <span class="badge bg-info rounded-pill">Info</span>
+ <span class="badge bg-light text-dark rounded-pill">Light</span>
+ <span class="badge bg-dark text-light rounded-pill">Dark</span>
+
+ <!-- Lighten Badges -->
+ <span class="badge badge-primary-lighten rounded-pill">Primary</span>
+ <span class="badge badge-secondary-lighten rounded-pill">Secondary</span>
+ <span class="badge badge-success-lighten rounded-pill">Success</span>
+ <span class="badge badge-danger-lighten rounded-pill">Danger</span>
+ <span class="badge badge-warning-lighten rounded-pill">Warning</span>
+ <span class="badge badge-info-lighten rounded-pill">Info</span>
+ <span class="badge badge-dark-lighten rounded-pill">Dark</span>
+
+ <!-- Outline Badges -->
+ <span class="badge badge-outline-primary rounded-pill">Primary</span>
+ <span class="badge badge-outline-secondary rounded-pill">Secondary</span>
+ <span class="badge badge-outline-success rounded-pill">Success</span>
+ <span class="badge badge-outline-danger rounded-pill">Danger</span>
+ <span class="badge badge-outline-warning rounded-pill">Warning</span>
+ <span class="badge badge-outline-info rounded-pill">Info</span>
+ <span class="badge badge-outline-dark rounded-pill">Dark</span>
+
+
+
+ Add any of the below mentioned modifier classes to change the appearance of a badge.
+ Badge can be more contextual as well. Just use regular convention e.g. badge-*color, bg-primary
+ to have badge with different background.
+
+ Using the .badge-*-lighten modifier class, you can have more soften variation.
+
+ Using the .badge-outline-* to quickly create a bordered badges.
+
+
+ <!-- Default Badges -->
+ <span class="badge bg-primary">Primary</span>
+ <span class="badge text-bg-secondary">Secondary</span>
+ <span class="badge bg-success">Success</span>
+ <span class="badge bg-danger">Danger</span>
+ <span class="badge bg-warning">Warning</span>
+ <span class="badge bg-info">Info</span>
+ <span class="badge bg-light text-dark">Light</span>
+ <span class="badge bg-dark text-light">Dark</span>
+
+ <!-- Lighten Badges -->
+ <span class="badge badge-primary-lighten">Primary</span>
+ <span class="badge badge-secondary-lighten">Secondary</span>
+ <span class="badge badge-success-lighten">Success</span>
+ <span class="badge badge-danger-lighten">Danger</span>
+ <span class="badge badge-warning-lighten">Warning</span>
+ <span class="badge badge-info-lighten">Info</span>
+ <span class="badge badge-dark-lighten">Dark</span>
+
+ <!-- Outline Badges -->
+ <span class="badge badge-outline-primary">Primary</span>
+ <span class="badge badge-outline-secondary">Secondary</span>
+ <span class="badge badge-outline-success">Success</span>
+ <span class="badge badge-outline-danger">Danger</span>
+ <span class="badge badge-outline-warning">Warning</span>
+ <span class="badge badge-outline-info">Info</span>
+ <span class="badge badge-outline-dark">Dark</span>
+
+
+
+ Use utilities to modify a .badge and position it in the corner of a
+ link or button.
+
+
+ <button type="button" class="btn btn-primary position-relative">
+ Inbox
+ <span
+ class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+ 99+
+ <span class="visually-hidden">unread messages</span>
+ </span>
+ </button>
+
+ <button type="button" class="btn btn-primary position-relative">
+ Profile
+ <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle">
+ <span class="visually-hidden">New alerts</span>
+ </span>
+ </button>
+
+ <button type="button" class="btn btn-success mt-4">
+ Notifications <span class="badge bg-light text-dark ms-1">4</span>
+ </button>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. + Please read the official Bootstrap documentation for more options. +
+ + +
+
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb mb-0">
+ <li class="breadcrumb-item active" aria-current="page">Home</li>
+ </ol>
+ </nav>
+
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb mb-0">
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Library</li>
+ </ol>
+ </nav>
+
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb mb-0">
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
+ </ol>
+ </nav>
+
+
+ + Optionally you can also specify the icon with your breadcrumb item. +
+ + +
+
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb bg-light-lighten p-2">
+ <li class="breadcrumb-item active" aria-current="page"><i class="uil-home-alt me-1"></i> Home</li>
+ </ol>
+ </nav>
+
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb bg-light-lighten p-2">
+ <li class="breadcrumb-item"><a href="#"><i class="uil-home-alt"></i> Home</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Library</li>
+ </ol>
+ </nav>
+
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb bg-light-lighten p-2 mb-0">
+ <li class="breadcrumb-item"><a href="#"><i class="uil-home-alt"></i> Home</a></li>
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
+ </ol>
+ </nav>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use the button classes on an <a>, <button>, or <input> element.
+
+ <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>
+ <button type="button" class="btn btn-link">Link</button>
+
+
+ Use a classes .btn-outline-** to quickly create a bordered buttons.
+
+ <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"><i class="uil-cloud-computing"></i> 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"><i class="uil-circuit"></i> Info</button>
+ <button type="button" class="btn btn-outline-light">Light</button>
+ <button type="button" class="btn btn-outline-dark">Dark</button>
+
+
+ Add .rounded-pill to default button to get rounded corners.
+
+ <button type="button" class="btn btn-primary rounded-pill">Primary</button>
+ <button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
+ <button type="button" class="btn btn-success rounded-pill">Success</button>
+ <button type="button" class="btn btn-danger rounded-pill">Danger</button>
+ <button type="button" class="btn btn-warning rounded-pill">Warning</button>
+ <button type="button" class="btn btn-info rounded-pill">Info</button>
+ <button type="button" class="btn btn-light rounded-pill">Light</button>
+ <button type="button" class="btn btn-dark rounded-pill">Dark</button>
+
+
+ Use a classes .btn-outline-** to quickly create a bordered buttons.
+
+ <button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
+ <button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
+ <button type="button" class="btn btn-outline-success rounded-pill"><i class="uil-cloud-computing"></i> Success</button>
+ <button type="button" class="btn btn-outline-danger rounded-pill">Danger</button>
+ <button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
+ <button type="button" class="btn btn-outline-info rounded-pill"><i class="uil-circuit"></i> Info</button>
+ <button type="button" class="btn btn-outline-light rounded-pill">Light</button>
+ <button type="button" class="btn btn-outline-dark rounded-pill">Dark</button>
+
+
+ Use a classes .btn-soft-** to quickly create a soft background color buttons.
+
+ <button type="button" class="btn btn-soft-primary">Primary</button>
+ <button type="button" class="btn btn-soft-secondary">Secondary</button>
+ <button type="button" class="btn btn-soft-success">Success</button>
+ <button type="button" class="btn btn-soft-danger">Danger</button>
+ <button type="button" class="btn btn-soft-warning">Warning</button>
+ <button type="button" class="btn btn-soft-info">Info</button>
+ <button type="button" class="btn btn-soft-dark">Dark</button>
+
+
+ Use a classes .btn-soft-** .rounded-pill to quickly create a soft background color buttons with rounded.
+
+ <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"><i class="uil-cloud-computing"></i> 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"><i class="uil-circuit"></i> Info</button>
+ <button type="button" class="btn btn-outline-light">Light</button>
+ <button type="button" class="btn btn-outline-dark">Dark</button>
+
+
+
+ Add .btn-lg, .btn-sm for additional sizes.
+
+
+ <button type="button" class="btn btn-primary btn-lg">Large</button>
+ <button type="button" class="btn btn-info">Normal</button>
+ <button type="button" class="btn btn-success btn-sm">Small</button>
+
+
+
+ Add the disabled attribute to <button> buttons.
+
+
+ <button type="button" class="btn btn-info" disabled>Info</button>
+ <button type="button" class="btn btn-success" disabled>Success</button>
+ <button type="button" class="btn btn-danger" disabled>Danger</button>
+ <button type="button" class="btn btn-dark" disabled>Dark</button>
+
+
+ + Icon only button. +
+ + +
+
+ <button type="button" class="btn btn-light"><i class="mdi mdi-heart-outline"></i> </button>
+ <button type="button" class="btn btn-danger"><i class="mdi mdi-window-close"></i> </button>
+ <button type="button" class="btn btn-dark"><i class="mdi mdi-music"></i> </button>
+ <button type="button" class="btn btn-primary"><i class="mdi mdi-star"></i> </button>
+ <button type="button" class="btn btn-success"><i class="mdi mdi-thumb-up-outline"></i> </button>
+ <button type="button" class="btn btn-info"><i class="mdi mdi-keyboard"></i> </button>
+ <button type="button" class="btn btn-warning"><i class="mdi mdi-wrench"></i> </button>
+
+ <button type="button" class="btn btn-light"><i class="mdi mdi-heart me-1"></i> <span>Like</span> </button>
+ <button type="button" class="btn btn-warning"><i class="mdi mdi-rocket me-1"></i> <span>Launch</span> </button>
+ <button type="button" class="btn btn-info"><i class="mdi mdi-cloud me-1"></i> <span>Cloud Hosting</span> </button>
+
+ <button type="button" class="btn btn-outline-success"><i class="uil-money-withdrawal"></i> Money</button>
+ <button type="button" class="btn btn-outline-primary"><i class="uil-paypal"></i> PayPal</button>
+ <button type="button" class="btn btn-outline-danger"><i class="uil-cog"></i> Settings</button>
+
+
+
+ Create block level buttons by adding class .d-grid to parent div.
+
+
+ <div class="d-grid">
+ <button type="button" class="btn btn-sm btn-primary">Block Button</button>
+ <button type="button" class="btn btn-lg btn-success">Block Button</button>
+ </div>
+ <!-- end d-grid -->
+
+
+
+ Wrap a series of buttons with .btn in .btn-group.
+
+
+ <!-- Button Group -->
+ <div class="btn-group mb-2">
+ <button type="button" class="btn btn-light">Left</button>
+ <button type="button" class="btn btn-light">Middle</button>
+ <button type="button" class="btn btn-light">Right</button>
+ </div>
+
+ <!-- Button Group with Dropdowns-->
+ <div class="btn-group mb-2">
+ <button type="button" class="btn btn-light">1</button>
+ <button type="button" class="btn btn-primary">2</button>
+ <button type="button" class="btn btn-light">3</button>
+ <div class="btn-group">
+ <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Button Group Vertical-->
+ <div class="btn-group-vertical mb-2">
+ <button type="button" class="btn btn-light">Top</button>
+ <button type="button" class="btn btn-light">Middle</button>
+ <button type="button" class="btn btn-light">Bottom</button>
+ </div>
+
+ <!-- Button Group Vertical with Dropdowns-->
+ <div class="btn-group-vertical mb-2">
+ <button type="button" class="btn btn-light">Button 1</button>
+ <button type="button" class="btn btn-light">Button 2</button>
+ <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 3 </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ </div>
+ </div>
+
+
+ Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.
+
+ <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
+ <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
+ <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
+
+
+ The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
+
+ <a class="btn btn-primary" href="#" role="button">Link</a>
+ <button class="btn btn-primary" type="submit">Button</button>
+ <input class="btn btn-primary" type="button" value="Input">
+ <input class="btn btn-primary" type="submit" value="Submit">
+ <input class="btn btn-primary" type="reset" value="Reset">
+
+
+ Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.
+ <button type="button" class="btn">Base class</button><button type="button" class="btn">Base class</button>
+
+ Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.
+ + +
+
+ <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
+ Custom focus ring
+ </a>
+
+ <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--ct-focus-ring-color: rgba(var(--ct-success-rgb), .25)">
+ Green focus ring
+ </a>
+
+ <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--ct-focus-ring-x: 10px; --ct-focus-ring-y: 10px; --ct-focus-ring-blur: 4px">
+ Blurry offset focus ring
+ </a>
+
+
+ In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.
+
+ <p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
+ <p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
+ <p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
+ <p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
+ <p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
+ <p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
+ <p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
+ <p class="mb-0"><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Some quick example text to build on the card title and make + up the bulk of the card's content. Some quick example text to build on the card title and make up.
+ Button +
+ Some quick example text to build on the card..
+
+ Some quick example text to build on the card title and make + up the bulk of the card's content. Some quick example text to build on the card title and make up.
+ Button +
+ Some quick example text to build on the card title and make + up the bulk of the card's content.
+ Card link + Another link +With supporting text below as a natural lead-in to additional + content.
+ Go somewhere +With supporting text below as a natural lead-in to additional + content.
+ Go somewhere +With supporting text below as a natural lead-in to + additional content.
+ Go somewhere +++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
With supporting text below as a natural lead-in to + additional content.
+ Button +++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante.
+ +
With supporting text below as a natural lead-in to + additional content.
+ Button +With supporting text below as a natural lead-in to + additional content.
+ Button +With supporting text below as a natural lead-in to + additional content.
+ Button +
+ This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+
+
+
+ + Some quick example text to build on the card up the bulk of the card's content. +
+
+
+ + Some quick example text to build on the card up the bulk of the card's content. +
+
+ This is a wider card with supporting text below as a + natural lead-in to additional content. This content is a little bit + longer.
++ Last updated 3 mins ago +
+
+ This card has supporting text below as a natural + lead-in to additional content.
++ Last updated 3 mins ago +
+
+ This is a wider card with supporting text below as a + natural lead-in to additional content. This card has even longer content + than the first to show that equal height action.
++ Last updated 3 mins ago +
+
+
+ <div class="row">
+ <div class="col-md-4">
+ <!-- Portlet card -->
+ <div class="card mb-md-0 mb-3">
+ <div class="card-body">
+ <div class="card-widgets">
+ <a href="javascript:;" data-bs-toggle="reload"><i class="mdi mdi-refresh"></i></a>
+ <a data-bs-toggle="collapse" href="#cardCollpase1" role="button" aria-expanded="false" aria-controls="cardCollpase1"><i class="mdi mdi-minus"></i></a>
+ <a href="#" data-bs-toggle="remove"><i class="mdi mdi-close"></i></a>
+ </div>
+ <h5 class="card-title mb-0">Card title</h5>
+
+ <div id="cardCollpase1" class="collapse pt-3 show">
+ ...
+ </div>
+ </div>
+ </div> <!-- end card-->
+ </div><!-- end col -->
+
+ <div class="col-md-4">
+ <!-- Portlet card -->
+ <div class="card bg-primary text-white mb-md-0 mb-3">
+ <div class="card-body">
+ <div class="card-widgets">
+ <a href="javascript:;" data-bs-toggle="reload"><i class="mdi mdi-refresh"></i></a>
+ <a data-bs-toggle="collapse" href="#cardCollpase2" role="button" aria-expanded="false" aria-controls="cardCollpase2"><i class="mdi mdi-minus"></i></a>
+ <a href="#" data-bs-toggle="remove"><i class="mdi mdi-close"></i></a>
+ </div>
+ <h5 class="card-title mb-0">Card title</h5>
+
+ <div id="cardCollpase2" class="collapse pt-3 show">
+ ...
+ </div>
+ </div>
+ </div> <!-- end card-->
+ </div><!-- end col -->
+
+ <div class="col-md-4">
+ <!-- Portlet card -->
+ <div class="card bg-success text-white mb-0">
+ <div class="card-body">
+ <div class="card-widgets">
+ <a href="javascript:;" data-bs-toggle="reload"><i class="mdi mdi-refresh"></i></a>
+ <a data-bs-toggle="collapse" href="#cardCollpase3" role="button" aria-expanded="false" aria-controls="cardCollpase3"><i class="mdi mdi-minus"></i></a>
+ <a href="#" data-bs-toggle="remove"><i class="mdi mdi-close"></i></a>
+ </div>
+ <h5 class="card-title mb-0">Card title</h5>
+
+ <div id="cardCollpase3" class="collapse pt-3 show">
+ ...
+ </div>
+ </div>
+ </div> <!-- end card-->
+ </div><!-- end col -->
+ </div>
+ <!-- end row -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Here’s a carousel with slides only.
+ Note the presence of the .d-block
+ and .img-fluid on carousel images
+ to prevent browser default image alignment.
+
+
+
+
+ <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img class="d-block img-fluid" src="assets/images/small/small-1.jpg" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-2.jpg" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-3.jpg" alt="Third slide">
+ </div>
+ </div>
+ </div>
+
+
+ Adding in the previous and next controls:
+ + +
+
+ <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img class="d-block img-fluid" src="assets/images/small/small-4.jpg" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-1.jpg" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-2.jpg" alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </a>
+ </div>
+
+
+ You can also add the indicators to the + carousel, alongside the controls, too.
+ + +
+
+ <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
+ <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
+ <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img class="d-block img-fluid" src="assets/images/small/small-3.jpg" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-2.jpg" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-1.jpg" alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </a>
+ </div>
+
+
+ Add captions to your slides easily with the .carousel-caption element within any .carousel-item.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+ <div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img src="assets/images/small/small-1.jpg" alt="..." class="d-block img-fluid">
+ <div class="carousel-caption d-none d-md-block">
+ <h3 class="text-white">First slide label</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img src="assets/images/small/small-3.jpg" alt="..." class="d-block img-fluid">
+ <div class="carousel-caption d-none d-md-block">
+ <h3 class="text-white">Second slide label</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img src="assets/images/small/small-2.jpg" alt="..." class="d-block img-fluid">
+ <div class="carousel-caption d-none d-md-block">
+ <h3 class="text-white">Third slide label</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </a>
+ </div>
+
+
+ Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide.
+
+ <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img class="d-block img-fluid" src="assets/images/small/small-1.jpg" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-2.jpg" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="assets/images/small/small-3.jpg" alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </a>
+ </div>
+
+
+ Add data-bs-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.
+
+ <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img class="d-block w-100 img-fluid" src="assets/images/small/small-4.jpg" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100 img-fluid" src="assets/images/small/small-2.jpg" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100 img-fluid" src="assets/images/small/small-1.jpg" alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </a>
+ </div>
+
+
+ Add .carousel-dark to the .carousel for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.
+ Some representative placeholder content for the first slide.
+
+ Some representative placeholder content for the second slide.
+
+ Some representative placeholder content for the third slide.
+
+
+ <div id="carouselExampleDark" class="carousel carousel-dark slide">
+ <div class="carousel-indicators">
+ <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+ <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
+ <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
+ </div>
+ <div class="carousel-inner">
+ <div class="carousel-item active" data-bs-interval="10000">
+ <img src="assets/images/small/small-5.jpg" class="img-fluid" alt="Images">
+ <div class="carousel-caption d-none d-md-block">
+ <h5>First slide label</h5>
+ <p>Some representative placeholder content for the first slide.</p>
+ </div>
+ </div>
+ <div class="carousel-item" data-bs-interval="2000">
+ <img src="assets/images/small/small-6.jpg" class="img-fluid" alt="Images">
+ <div class="carousel-caption d-none d-md-block">
+ <h5>Second slide label</h5>
+ <p>Some representative placeholder content for the second slide.</p>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img src="assets/images/small/small-7.jpg" class="img-fluid" alt="Images">
+ <div class="carousel-caption d-none d-md-block">
+ <h5>Third slide label</h5>
+ <p>Some representative placeholder content for the third slide.</p>
+ </div>
+ </div>
+ </div>
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </button>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Any single .btn can be turned into a dropdown
+ toggle with some markup changes. Here’s how you can put them to work
+ with either <button>
+ elements:
+
+
+ <!-- Default Drodown -->
+ <div class="dropdown">
+ <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown button
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+ </div>
+
+ <!-- Link with Dropdown -->
+ <div class="dropdown">
+ <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown link
+ </a>
+
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+ </div>
+
+
+ The best part is you can do this with any button variant, too:
+ + +
+
+ <!-- Light -->
+ <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Light</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+ <!-- Secondary -->
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+
+ <!-- Primary -->
+ <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+ <!-- Success -->
+ <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+ <!-- Info -->
+ <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+ <!-- Warning -->
+ <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+ <!-- Danger -->
+ <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+ <!-- Dark -->
+ <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ </div>
+
+
+
+ Add .dropdown-menu-animated
+ to a .dropdown-menu to have animated dropdown menu.
+
+ <div class="dropdown btn-group">
+ <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Animated Dropdown
+ </button>
+ <div class="dropdown-menu dropdown-menu-animated">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+ </div>
+
+
+ Trigger dropdown menus above elements
+ by adding .dropup to the parent
+ element.
+
+ <!-- Default dropup button -->
+ <div class="btn-group dropup">
+ <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+ <!-- Split dropup button -->
+ <div class="btn-group dropup">
+ <button type="button" class="btn btn-light">
+ Split dropup
+ </button>
+ <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+
+ Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.
+
+ <!-- Default dropend button -->
+ <div class="btn-group mb-2 dropend">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropend
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+ <!-- Split dropend button -->
+ <div class="btn-group mb-2 dropend">
+ <button type="button" class="btn btn-primary ">
+ Split Dropend
+ </button>
+ <button type="button" class="btn btn-primary dropdown-toggle-split dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropright</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+
+ Add .disabled to items in the dropdown to style them as disabled.
+
+ <!-- Disabled -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Disabled
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Regular link</a>
+ <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
+ <a class="dropdown-item" href="#">Another link</a>
+ </div>
+ </div>
+
+
+ Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto an existing .dropdown-menu. No changes are required to the dropdown items.
+
+ <div class="dropdown">
+ <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ Dropdown button
+ </button>
+ <ul class="dropdown-menu dropdown-menu-dark">
+ <li><a class="dropdown-item active" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+
+
+ Use data-bs-offset or data-bs-reference to change the location of the dropdown.
+
+ <div class="d-flex">
+ <div class="dropdown me-1">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
+ Offset
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Reference</button>
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+ <span class="visually-hidden">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
+ + +
+
+ <!-- Text Example -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Text Dropdown
+ </button>
+ <div class="dropdown-menu p-3 text-muted" style="max-width: 200px;">
+ <p>
+ Some example text that's free-flowing within the dropdown menu.
+ </p>
+ <p class="mb-0">
+ And this is more example text.
+ </p>
+ </div>
+ </div>
+
+
+
+ Add .dropdown-menu-end
+ to a .dropdown-menu to right
+ align the dropdown menu.
+
+ Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
+
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-primary">Primary</button>
+ <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div><!-- /btn-group -->
+
+
+ Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
+ + +
+
+ <!-- Large button groups (default and split) -->
+ <div class="btn-group">
+ <button class="btn btn-light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Large button
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+ <div class="btn-group">
+ <button class="btn btn-light btn-lg" type="button">
+ Large button
+ </button>
+ <button type="button" class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+ <!-- Small button groups (default and split) -->
+ <div class="btn-group">
+ <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Small button
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+ <div class="btn-group">
+ <button class="btn btn-light btn-sm" type="button">
+ Small button
+ </button>
+ <button type="button" class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+
+ Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element.
+
+ <!-- Default dropstart button -->
+ <div class="btn-group dropstart">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropstart
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+ <!-- Split dropstart button -->
+ <div class="btn-group">
+ <div class="btn-group dropstart" role="group">
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true"
+ aria-expanded="false">
+ <span class="visually-hidden">Toggle Dropstart</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+ <button type="button" class="btn btn-secondary">
+ Split dropleft
+ </button>
+ </div>
+
+
+ Add .active to item in the dropdown to style them as active.
+
+ <!-- Active Item -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Active Menu
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Regular link</a>
+ <a class="dropdown-item active" href="#">Active link</a>
+ <a class="dropdown-item" href="#">Another link</a>
+ </div>
+ </div>
+
+
+ Add a header to label sections of actions in any dropdown menu.
+ + +
+
+ <!-- Header Item -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Header
+ </button>
+ <div class="dropdown-menu">
+ <h6 class="dropdown-header">Dropdown header</h6>
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ </div>
+ </div>
+
+
+ Make the dropdown menu centered below the toggle with .dropdown-center on the parent element.
+
+ <div class="dropdown-center">
+ <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ Centered dropdown
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Action two</a></li>
+ <li><a class="dropdown-item" href="#">Action three</a></li>
+ </ul>
+ </div>
+
+ <div class="dropup-center dropup">
+ <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ Centered dropup
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Action two</a></li>
+ <li><a class="dropdown-item" href="#">Action three</a></li>
+ </ul>
+ </div>
+
+
+ By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.
+
+ <div class="hstack gap-2">
+ <div class="btn-group">
+ <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
+ Default dropdown
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ </ul>
+ </div>
+
+ <div class="btn-group">
+ <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
+ Clickable inside
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ </ul>
+ </div>
+
+ <div class="btn-group">
+ <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+ Clickable outside
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ </ul>
+ </div>
+
+ <div class="btn-group">
+ <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
+ Manual close
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ <li><a class="dropdown-item" href="#">Menu item</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
+ + +
+
+ <!-- Forms -->
+ <div class="dropdown">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Form
+ </button>
+ <div class="dropdown-menu">
+ <form class="px-4 py-3">
+ <div class="mb-3">
+ <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
+ <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
+ </div>
+ <div class="mb-3">
+ <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
+ <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
+ </div>
+ <div class="mb-3">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="dropdownCheck">
+ <label class="form-check-label" for="dropdownCheck">
+ Remember me
+ </label>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Sign in</button>
+ </form>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">New around here? Sign up</a>
+ <a class="dropdown-item" href="#">Forgot password?</a>
+ </div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use class .ratio-21x9
+
+ <!-- 21:9 aspect ratio -->
+ <div class="ratio ratio-21x9">
+ <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?autohide=0&showinfo=0&controls=0"></iframe>
+ </div>
+
+
+ Use class .ratio-1x1
+
+ <!-- 1:1 aspect ratio -->
+ <div class="ratio ratio-1x1">
+ <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?ecver=1"></iframe>
+ </div>
+
+
+ Use class .ratio-16x9
+
+ <!-- 16:9 aspect ratio -->
+ <div class="ratio ratio-16x9">
+ <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?autohide=0&showinfo=0&controls=0"></iframe>
+ </div>
+
+
+ Use class .ratio-4x3
+
+ <!-- 4:3 aspect ratio -->
+ <div class="ratio ratio-4x3">
+ <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?ecver=1"></iframe>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + See how aspects of the Bootstrap grid system work across multiple devices with a handy table. +
+ +| + |
+ Extra small + <576px + |
+
+ Small + ≥576px + |
+
+ Medium + ≥768px + |
+
+ Large + ≥992px + |
+
+ Extra large + ≥1200px + |
+
+ Extra large + ≥1400px + |
+
|---|---|---|---|---|---|---|
Container max-width |
+ None (auto) | +540px | +720px | +960px | +1140px | +1320px | +
| Class prefix | +.col- |
+ .col-sm- |
+ .col-md- |
+ .col-lg- |
+ .col-xl- |
+ .col-xxl- |
+
| # of columns | +12 | +|||||
| Gutter width | +1.5rem (.75rem on left and right) | +|||||
| Custom gutters | +Yes | +|||||
| Nestable | +Yes | +|||||
| Column ordering | +Yes | +|||||
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
+
+ <p><a href="#" class="link-primary">Primary link</a></p>
+ <p><a href="#" class="link-secondary">Secondary link</a></p>
+ <p><a href="#" class="link-success">Success link</a></p>
+ <p><a href="#" class="link-danger">Danger link</a></p>
+ <p><a href="#" class="link-warning">Warning link</a></p>
+ <p><a href="#" class="link-info">Info link</a></p>
+ <p><a href="#" class="link-light">Light link</a></p>
+ <p><a href="#" class="link-dark">Dark link</a></p>
+ <p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
+
+
+ Colored link helpers have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
+ + +
+
+ <p><a href="#" class="link-primary text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
+ <p><a href="#" class="link-secondary text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
+ <p><a href="#" class="link-success text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
+ <p><a href="#" class="link-danger text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
+ <p><a href="#" class="link-warning text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
+ <p><a href="#" class="link-info text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
+ <p><a href="#" class="link-light text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
+ <p><a href="#" class="link-dark text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
+ <p class="mb-0"><a href="#" class="link-body-emphasis text-decoration-underline link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
+
+
+ Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.
+
+ <p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
+ <p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
+ <p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
+ <p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
+ <p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
+
+
+ You can even change the opacity level on hover.
+ +
+
+ <p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
+ <p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
+ <p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
+ <p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
+ <p class="mb-0"><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
+
+
+ Change the underline’s color independent of the link text color.
+ +
+
+ <p><a href="#" class="text-decoration-underline link-underline-primary">Primary underline</a></p>
+ <p><a href="#" class="text-decoration-underline link-underline-secondary">Secondary underline</a></p>
+ <p><a href="#" class="text-decoration-underline link-underline-success">Success underline</a></p>
+ <p><a href="#" class="text-decoration-underline link-underline-danger">Danger underline</a></p>
+ <p><a href="#" class="text-decoration-underline link-underline-warning">Warning underline</a></p>
+ <p><a href="#" class="text-decoration-underline link-underline-info">Info underline</a></p>
+ <p><a href="#" class="text-decoration-underline link-underline-light">Light underline</a></p>
+ <p><a href="#" class="text-decoration-underline link-underline-dark">Dark underline</a></p>
+
+
+ Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.
+
+ <p><a class="text-decoration-underline link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
+ <p><a class="text-decoration-underline link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
+ <p><a class="text-decoration-underline link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
+ <p><a class="text-decoration-underline link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
+ <p><a class="text-decoration-underline link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
+ <p class="mb-0"><a class="text-decoration-underline link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
+
+
+ Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.
+
+ <p><a href="#">Default link</a></p>
+ <p><a class="text-decoration-underline link-offset-1" href="#">Offset 1 link</a></p>
+ <p><a class="text-decoration-underline link-offset-2" href="#">Offset 2 link</a></p>
+ <p class="mb-0"><a class="text-decoration-underline link-offset-3" href="#">Offset 3 link</a></p>
+
+
+ Just like the .link-opacity-*-hover utilities, .link-offset and .link-underline-opacity utilities include :hover variants by default. Mix and match to create unique link styles.
+
+ <p><a href="#">Default link</a></p>
+ <p><a class="text-decoration-underline link-offset-1" href="#">Offset 1 link</a></p>
+ <p><a class="text-decoration-underline link-offset-2" href="#">Offset 2 link</a></p>
+ <p class="mb-0"><a class="text-decoration-underline link-offset-3" href="#">Offset 3 link</a></p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The most basic list group is an unordered list with + list items and the proper classes. + Build upon it with the options that follow, or with your own CSS as needed. +
+ + +
+
+ <ul class="list-group">
+ <li class="list-group-item"><i class="uil-google-drive-alt me-1"></i> Google Drive</li>
+ <li class="list-group-item"><i class="uil-facebook-messenger me-1"></i> Facebook Messenger</li>
+ <li class="list-group-item"><i class="uil-apple me-1"></i> Apple Technology Company</li>
+ <li class="list-group-item"><i class="uil-intercom me-1"></i> Intercom Support System</li>
+ <li class="list-group-item"><i class="uil-paypal me-1"></i> Paypal Payment Gateway</li>
+ </ul>
+
+
+ Add .active to a
+ .list-group-item to indicate the current active selection.
+
+
+ <ul class="list-group">
+ <li class="list-group-item active"><i class="uil-google-drive-alt me-1"></i> Google Drive</li>
+ <li class="list-group-item"><i class="uil-facebook-messenger me-1"></i> Facebook Messenger</li>
+ <li class="list-group-item"><i class="uil-apple me-1"></i> Apple Technology Company</li>
+ <li class="list-group-item"><i class="uil-intercom me-1"></i> Intercom Support System</li>
+ <li class="list-group-item"><i class="uil-paypal me-1"></i> Paypal Payment Gateway</li>
+ </ul>
+
+
+ Add .disabled to a .list-group-item to make it
+ appear disabled.
+
+
+ <ul class="list-group">
+ <li class="list-group-item disabled" aria-disabled="true"><i class="uil-google-drive-alt me-1"></i> Google Drive</li>
+ <li class="list-group-item"><i class="uil-facebook-messenger me-1"></i> Facebook Messenger</li>
+ <li class="list-group-item"><i class="uil-apple me-1"></i> Apple Technology Company</li>
+ <li class="list-group-item"><i class="uil-intercom me-1"></i> Intercom Support System</li>
+ <li class="list-group-item"><i class="uil-paypal me-1"></i> Paypal Payment Gateway</li>
+ </ul>
+
+
+ Use <a>s or
+ <button>s to create actionable list group items with
+ hover, disabled, and active states by adding
+ .list-group-item-action.
+
+
+ <div class="list-group">
+ <a href="#" class="list-group-item list-group-item-action active">
+ Paypal Payment Gateway
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">Google Drive</a>
+ <button type="button" class="list-group-item list-group-item-action">Facebook Messenger</button>
+ <button type="button" class="list-group-item list-group-item-action">Apple Technology Company</button>
+ <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Intercom Support System</a>
+ </div>
+
+
+ Add .list-group-flush to remove some
+ borders and rounded corners to render list group items edge-to-edge in a parent
+ container (e.g., cards).
+
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item">Google Drive</li>
+ <li class="list-group-item">Facebook Messenger</li>
+ <li class="list-group-item">Apple Technology Company</li>
+ <li class="list-group-item">Intercom Support System</li>
+ <li class="list-group-item">Paypal Payment Gateway</li>
+ </ul>
+
+
+ Add .list-group-horizontal to change the
+ layout of list group items from vertical to horizontal across all breakpoints.
+ Alternatively, choose a responsive variant
+ .list-group-horizontal-{sm|md|lg|xl} to make a list group
+ horizontal starting at that breakpoint’s min-width.
+
+
+ <!-- Vertical -->
+ <ul class="list-group list-group-horizontal">
+ <li class="list-group-item">Google</li>
+ <li class="list-group-item">Whatsapp</li>
+ <li class="list-group-item">Facebook</li>
+ </ul>
+
+ <!-- Responsive Small -->
+ <ul class="list-group list-group-horizontal-sm">
+ <li class="list-group-item">Apple</li>
+ <li class="list-group-item">PayPal</li>
+ <li class="list-group-item">Intercom</li>
+ </ul>
+
+ <!-- Responsive Medium -->
+ <ul class="list-group list-group-horizontal-md">
+ <li class="list-group-item">Google</li>
+ <li class="list-group-item">Whatsapp</li>
+ <li class="list-group-item">Facebook</li>
+ </ul>
+
+ <!-- Responsive Large -->
+ <ul class="list-group list-group-horizontal-lg">
+ <li class="list-group-item">Google</li>
+ <li class="list-group-item">Whatsapp</li>
+ <li class="list-group-item">Facebook</li>
+ </ul>
+
+
+ Use contextual classes to style list items with a + stateful background and color.
+ + +
+
+ <ul class="list-group">
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
+ <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
+ <li class="list-group-item list-group-item-success">A simple success list group item</li>
+ <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+ <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+ <li class="list-group-item list-group-item-info">A simple info list group item</li>
+ <li class="list-group-item list-group-item-light">A simple light list group item</li>
+ <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
+ </ul>
+
+
+ Use contextual classes to style list items with a + stateful background and color.
+ + +
+
+ <div class="list-group">
+ <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
+ <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
+ </div>
+
+
+ Add nearly any HTML within, even for linked list + groups like the one below, with the help of flexbox utilities.
+ + +Donec id elit non mi porta gravida at eget metus. + Maecenas sed diam eget risus varius blandit.
+ Donec id elit non mi porta. + + +Donec id elit non mi porta gravida at eget metus. + Maecenas sed diam eget risus varius blandit.
+ Donec id elit non mi porta. + + +Donec id elit non mi porta gravida at eget metus. + Maecenas sed diam eget risus varius blandit.
+ Donec id elit non mi porta. + +
+
+ <div class="list-group">
+ <a href="#" class="list-group-item list-group-item-action active">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small>3 days ago</small>
+ </div>
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+ <small>Donec id elit non mi porta.</small>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small class="text-muted">3 days ago</small>
+ </div>
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+ <small class="text-muted">Donec id elit non mi porta.</small>
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small class="text-muted">3 days ago</small>
+ </div>
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+ <small class="text-muted">Donec id elit non mi porta.</small>
+ </a>
+ </div>
+
+
+ Add badges to any list group item to show unread + counts, activity, and more with the help of some utilities.
+ + +
+
+ <ul class="list-group">
+ <li class="list-group-item d-flex justify-content-between align-items-center">
+ Gmail Emails
+ <span class="badge bg-primary rounded-pill">14</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between align-items-center">
+ Pending Payments
+ <span class="badge bg-success rounded-pill">2</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between align-items-center">
+ Action Needed
+ <span class="badge bg-danger rounded-pill">99+</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between align-items-center">
+ Payments Done
+ <span class="badge bg-success rounded-pill">20+</span>
+ </li>
+ </ul>
+
+
+ Place Bootstrap’s checkboxes and radios within list
+ group items and customize as needed. You can use them without
+ <label>s, but please remember to include an
+ aria-label attribute and value for accessibility.
+
+
+ <ul class="list-group">
+ <li class="list-group-item">
+ <input class="form-check-input me-1" type="checkbox" value=""
+ id="firstCheckbox">
+ <label class="form-check-label" for="firstCheckbox">First
+ checkbox</label>
+ </li>
+ <li class="list-group-item">
+ <input class="form-check-input me-1" type="checkbox" value=""
+ id="secondCheckbox">
+ <label class="form-check-label" for="secondCheckbox">Second
+ checkbox</label>
+ </li>
+ </ul>
+
+ <ul class="list-group">
+ <li class="list-group-item">
+ <input class="form-check-input me-1" type="radio"
+ name="listGroupRadio" value="" id="firstRadio" checked>
+ <label class="form-check-label" for="firstRadio">First radio</label>
+ </li>
+ <li class="list-group-item">
+ <input class="form-check-input me-1" type="radio"
+ name="listGroupRadio" value="" id="secondRadio">
+ <label class="form-check-label" for="secondRadio">Second
+ radio</label>
+ </li>
+ </ul>
+
+
+ Numbers are generated by counter-reset on
+ the <ol>, and then styled and placed with a
+ ::before psuedo-element on the <li> with
+ counter-increment and content.
+
+
+ <ol class="list-group list-group-numbered">
+ <li class="list-group-item d-flex justify-content-between align-items-start">
+ <div class="ms-2 me-auto">
+ <div class="fw-bold">Subheading</div>
+ Cras justo odio
+ </div>
+ <span class="badge bg-primary rounded-pill">14</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between align-items-start">
+ <div class="ms-2 me-auto">
+ <div class="fw-bold">Subheading</div>
+ Cras justo odio
+ </div>
+ <span class="badge bg-primary rounded-pill">14</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between align-items-start">
+ <div class="ms-2 me-auto">
+ <div class="fw-bold">Subheading</div>
+ Cras justo odio
+ </div>
+ <span class="badge bg-primary rounded-pill">14</span>
+ </li>
+ </ol>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + A rendered modal with header, body, and set of actions in the footer. +
+ + +
+
+ <!-- Standard modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#standard-modal">Standard Modal</button>
+ <div id="standard-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="standard-modalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Large modal -->
+ <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#bs-example-modal-lg">Large Modal</button>
+ <div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Small modal -->
+ <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bs-example-modal-sm">Small Modal</button>
+ <div class="modal fade" id="bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Full width modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#full-width-modal">Full width Modal</button>
+ <div id="full-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fullWidthModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-full-width">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="fullWidthModalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Scrollable modal -->
+ <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#scrollable-modal">Scrollable Modal</button>
+ <div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-scrollable" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="scrollableModalTitle">Modal title</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+
+ Examples of custom modals.
+ + +
+
+ <!-- Signup modal-->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signup-modal">Sign Up Modal</button>
+ <div id="signup-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+
+ <div class="modal-body">
+ <div class="text-center mt-2 mb-4">
+ <a href="index.html" class="text-success">
+ <span><img src="assets/images/logo-dark.png" alt="" height="18"></span>
+ </a>
+ </div>
+
+ <form class="ps-3 pe-3" action="#">
+
+ <div class="mb-3">
+ <label for="username" class="form-label">Name</label>
+ <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
+ </div>
+
+ <div class="mb-3">
+ <label for="emailaddress" class="form-label">Email address</label>
+ <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
+ </div>
+
+ <div class="mb-3">
+ <label for="password" class="form-label">Password</label>
+ <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
+ </div>
+
+ <div class="mb-3">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="customCheck1">
+ <label class="form-check-label" for="customCheck1">I accept <a href="#">Terms and Conditions</a></label>
+ </div>
+ </div>
+
+ <div class="mb-3 text-center">
+ <button class="btn btn-primary" type="submit">Sign Up Free</button>
+ </div>
+
+ </form>
+
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Login modal -->
+ <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#login-modal">Log In Modal</button>
+ <div id="login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-body">
+ <div class="text-center mt-2 mb-4">
+ <a href="index.html" class="text-success">
+ <span><img src="assets/images/logo-dark.png" alt="" height="18"></span>
+ </a>
+ </div>
+
+ <form action="#" class="ps-3 pe-3">
+
+ <div class="mb-3">
+ <label for="emailaddress1" class="form-label">Email address</label>
+ <input class="form-control" type="email" id="emailaddress1" required="" placeholder="john@deo.com">
+ </div>
+
+ <div class="mb-3">
+ <label for="password1" class="form-label">Password</label>
+ <input class="form-control" type="password" required="" id="password1" placeholder="Enter your password">
+ </div>
+
+ <div class="mb-3">
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" id="customCheck2">
+ <label class="form-check-label" for="customCheck2">Remember me</label>
+ </div>
+ </div>
+
+ <div class="mb-3 text-center">
+ <button class="btn rounded-pill btn-primary" type="submit">Sign In</button>
+ </div>
+
+ </form>
+
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+
+ Show different contexual alert messages using modal component
+ + +
+
+ <!-- Success Alert Modal -->
+ <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#success-alert-modal">Success Alert</button>
+ <div id="success-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content modal-filled bg-success">
+ <div class="modal-body p-4">
+ <div class="text-center">
+ <i class="ri-check-line h1"></i>
+ <h4 class="mt-2">Well Done!</h4>
+ <p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+ <button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">Continue</button>
+ </div>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Info Alert Modal -->
+ <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#info-alert-modal">Info Alert</button>
+ <div id="info-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ <div class="modal-body p-4">
+ <div class="text-center">
+ <i class="ri-information-line h1 text-info"></i>
+ <h4 class="mt-2">Heads up!</h4>
+ <p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+ <button type="button" class="btn btn-info my-2" data-bs-dismiss="modal">Continue</button>
+ </div>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Warning Alert Modal -->
+ <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#warning-alert-modal">Warning Alert</button>
+ <div id="warning-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ <div class="modal-body p-4">
+ <div class="text-center">
+ <i class="ri-alert-line h1 text-warning"></i>
+ <h4 class="mt-2">Incorrect Information</h4>
+ <p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+ <button type="button" class="btn btn-warning my-2" data-bs-dismiss="modal">Continue</button>
+ </div>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Danger Alert Modal -->
+ <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#danger-alert-modal">Danger Alert</button>
+ <div id="danger-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content modal-filled bg-danger">
+ <div class="modal-body p-4">
+ <div class="text-center">
+ <i class="ri-close-circle-line h1"></i>
+ <h4 class="mt-2">Oh snap!</h4>
+ <p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+ <button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">Continue</button>
+ </div>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+
+ Specify the position for the modal. You can display modal at top, bottom, center or right of page by specifying
+ classes modal-top, modal-bottom, modal-dialog-centered and modal-right
+ respectively.
+
+ <!-- Top modal -->
+ <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#top-modal">Top Modal</button>
+ <div id="top-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-top">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="topModalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Right modal -->
+ <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#right-modal">Rightbar Modal</button>
+ <div id="right-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-sm modal-right">
+ <div class="modal-content">
+ <div class="modal-header border-0">
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ <div class="text-center">
+ ...
+ </div>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Bottom modal -->
+ <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#bottom-modal">Bottom Modal</button>
+ <div id="bottom-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-sm modal-bottom">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="bottomModalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Center modal -->
+ <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#centermodal">Center modal</button>
+ <div class="modal fade" id="centermodal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="myCenterModalLabel">Center modal</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+
+ A rendered modal with header having contexual background color.
+ + +
+
+ <!-- Primary Header Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#primary-header-modal">Primary Header</button>
+ <div id="primary-header-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="primary-header-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header bg-primary">
+ <h4 class="modal-title" id="primary-header-modalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Success Header Modal -->
+ <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#success-header-modal">Success Header</button>
+ <div id="success-header-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="success-header-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header bg-success">
+ <h4 class="modal-title" id="success-header-modalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-success">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Info Header Modal -->
+ <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#info-header-modal">Info Header</button>
+ <div id="info-header-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="info-header-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header bg-info">
+ <h4 class="modal-title" id="info-header-modalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-info">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Warning Header Modal -->
+ <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#warning-header-modal">Warning Header</button>
+ <div id="warning-header-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="warning-header-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header bg-warning">
+ <h4 class="modal-title" id="warning-header-modalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-warning">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Danger Header Modal -->
+ <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#danger-header-modal">Danger Header</button>
+ <div id="danger-header-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="danger-header-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header bg-danger">
+ <h4 class="modal-title" id="danger-header-modalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-danger">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Dark Header Modal -->
+ <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#dark-header-modal">Dark Header</button>
+ <div id="dark-header-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dark-header-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header bg-dark">
+ <h4 class="modal-title" id="dark-header-modalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-dark">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+
+ A rendered modal with header, body and footer having contexual background color.
+ + +
+
+ <!-- Primary Filled Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fill-primary-modal">Primary Filled</button>
+ <div id="fill-primary-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fill-primary-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content modal-filled bg-primary">
+ <div class="modal-header">
+ <h4 class="modal-title" id="fill-primary-modalLabel">Primary Filled Modal</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-light">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Success Filled Modal -->
+ <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#fill-success-modal">Success Filled</button>
+ <div id="fill-success-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fill-success-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content modal-filled bg-success">
+ <div class="modal-header">
+ <h4 class="modal-title" id="fill-success-modalLabel">Success Filled Modal</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-light">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Info Filled Modal -->
+ <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#fill-info-modal">Info Filled</button>
+ <div id="fill-info-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fill-info-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content modal-filled bg-info">
+ <div class="modal-header">
+ <h4 class="modal-title" id="fill-info-modalLabel">Info Filled Modal</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-light">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Warning Filled Modal -->
+ <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#fill-warning-modal">Warning Filled</button>
+ <div id="fill-warning-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fill-warning-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content modal-filled bg-warning">
+ <div class="modal-header">
+ <h4 class="modal-title" id="fill-warning-modalLabel">Warning Filled Modal</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-light">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Danger Filled Modal -->
+ <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#fill-danger-modal">Danger Filled</button>
+ <div id="fill-danger-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fill-danger-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content modal-filled bg-danger">
+ <div class="modal-header">
+ <h4 class="modal-title" id="fill-danger-modalLabel">Danger Filled Modal</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-info" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-light">Save changes</button>
+ </div>;
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Dark Filled Modal -->
+ <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#fill-dark-modal">Dark Filled</button>
+ <div id="fill-dark-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fill-dark-modalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content modal-filled bg-dark">
+ <div class="modal-header">
+ <h4 class="modal-title" id="fill-dark-modalLabel">Dark Filled Modal</h4>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-light">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+
+ Display a series of modals one by one to guide your users on multiple aspects or take step wise input.
+ + +
+
+ <!-- Modal -->
+ <div id="multiple-one" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="multiple-oneModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="multiple-oneModalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ <h5 class="mt-0">Text in a modal</h5>
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" data-bs-target="#multiple-two" data-bs-toggle="modal" data-bs-dismiss="modal">Next</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Modal -->
+ <div id="multiple-two" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="multiple-twoModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="multiple-twoModalLabel">Modal Heading</h4>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ <h5 class="mt-0">Text in a modal</h5>
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <div class="d-flex flex-wrap gap-2">
+ <!-- Multiple modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#multiple-one">Multiple Modal</button>
+ </div>
+
+
+ Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.
+
+ <!-- Modal -->
+ <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
+ tabindex="-1">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ Show a second modal and hide this one with the button below.
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal"
+ data-bs-dismiss="modal">Open second modal</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <!-- Modal -->
+ <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
+ tabindex="-1">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ Hide this modal and show the first with the button below.
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal"
+ data-bs-dismiss="modal">Back to first</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <a class="btn btn-secondary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
+
+
+ Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog
+
+ <!-- Fullscreen Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreeexampleModal">
+ Fullscreen Modal
+ </button>
+ <div class="modal fade" id="fullscreeexampleModal" tabindex="-1" aria-labelledby="fullscreeexampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="fullscreeexampleModalLabel">Full Screen Modal</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <a href="javascript:void(0);" class="btn btn-light" data-bs-dismiss="modal">Close</a>
+ <button type="button" class="btn btn-primary">Save Changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Full Screen Below sm Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">Full Screen Below sm</button>
+ <div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen-sm-down">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <a href="javascript:void(0);" class="btn btn-light" data-bs-dismiss="modal">Close</a>
+ <button type="button" class="btn btn-primary">Save Changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Full Screen Below md Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full Screen Below md</button>
+ <div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen-md-down">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <a href="javascript:void(0);" class="btn btn-light" data-bs-dismiss="modal">Close</a>
+ <button type="button" class="btn btn-primary">Save Changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Full Screen Below lg Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full Screen Below lg</button>
+ <div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen-lg-down">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <a href="javascript:void(0);" class="btn btn-light" data-bs-dismiss="modal">Close</a>
+ <button type="button" class="btn btn-primary">Save Changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Full Screen Below xl Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full Screen Below xl</button>
+ <div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen-sm-down">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <a href="javascript:void(0);" class="btn btn-light" data-bs-dismiss="modal">Close</a>
+ <button type="button" class="btn btn-primary">Save Changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Full Screen Below xxl Modal -->
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full Screen Below xxl</button>
+ <div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen-xxl-down">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <a href="javascript:void(0);" class="btn btn-light" data-bs-dismiss="modal">Close</a>
+ <button type="button" class="btn btn-primary">Save Changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
+ + +
+
+ <!-- Static Backdrop modal -->
+ <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+ Static Backdrop
+ </button>
+
+ <!-- Modal -->
+ <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div> <!-- end modal header -->
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Understood</button>
+ </div> <!-- end modal footer -->
+ </div> <!-- end modal content-->
+ </div> <!-- end modal dialog-->
+ </div> <!-- end modal-->
+
+
+ Have a bunch of buttons that all trigger the same modal with slightly different contents? Use
+ event.relatedTarget and HTML data-bs-*
+ attributes to vary the contents of the modal depending on which button was clicked.
+
+
+ <div class="hstack gap-2 flex-wrap">
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
+ </div>
+
+ <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalLabel">New message</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ <form>
+ <div class="mb-3">
+ <label for="recipient-name" class="col-form-label">Recipient:</label>
+ <input type="text" class="form-control" id="recipient-name">
+ </div>
+ <div class="mb-3">
+ <label for="message-text" class="col-form-label">Message:</label>
+ <textarea class="form-control" id="message-text"></textarea>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Send message</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Push notifications to your visitors with a toast, a + lightweight and easily customizable alert message.
+ + +Toasts are as flexible as you need and + have very little required markup. At a minimum, we + require a single element to contain your “toasted” content and + strongly encourage a dismiss button.
+
+ Hyper
+ 11 mins ago
+
+ Toasts are slightly translucent, too, + so they blend over whatever they might appear over. + For browsers that support the backdrop-filter CSS property, + we’ll also attempt to blur the elements under a toast.
+ +
+ Hyper
+ 11 mins ago
+
+ When you have multiple toasts, we + default to vertiaclly stacking them in a readable manner.
+
+ Hyper
+ just now
+
+
+ Hyper
+ 2 seconds ago
+
+ Place toasts with custom CSS as you
+ need them. The top right is often used for
+ notifications, as is the top middle. If you’re only ever going
+ to show one toast at a time, put the positioning
+ styles right on the .toast.
+ Hyper
+ 11 mins ago
+
+
+
+ <!-- Basic Toast -->
+ <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="toast-header">
+ <img src="assets/images/logo-dark-sm.png" alt="brand-logo" height="12" class="me-1" />
+ <strong class="me-auto">Hyper</strong>
+ <small>11 mins ago</small>
+ <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+ </div>
+ <div class="toast-body">
+ Hello, world! This is a toast message.
+ </div>
+ </div> <!--end toast-->
+
+ <!-- Translucent Toast -->
+ <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="toast-header">
+ <img src="assets/images/logo-dark-sm.png" alt="brand-logo" height="12" class="me-1" />
+ <strong class="me-auto">Hyper</strong>
+ <small>11 mins ago</small>
+ <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+ </div>
+ <div class="toast-body">
+ Hello, world! This is a toast message.
+ </div>
+ </div> <!--end toast-->
+
+ <!-- Stacking Toast -->
+ <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
+ <!-- Position it -->
+ <div class="toast-container" style="position: absolute; top: 0; right: 0;">
+
+ <!-- Then put toasts within -->
+ <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="toast-header">
+ <img src="assets/images/logo-dark-sm.png" alt="brand-logo" height="12" class="me-1" />
+ <strong class="me-auto">Hyper</strong>
+ <small class="text-muted">just now</small>
+ <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+ </div>
+ <div class="toast-body">
+ See? Just like this.
+ </div>
+ </div> <!--end toast-->
+
+ <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="toast-header">
+ <img src="assets/images/logo-dark-sm.png" alt="brand-logo" height="12" class="me-1" />
+ <strong class="me-auto">Hyper</strong>
+ <small class="text-muted">2 seconds ago</small>
+ <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+ </div>
+ <div class="toast-body">
+ Heads up, toasts will stack automatically
+ </div>
+ </div> <!--end toast-->
+ </div>
+ </div>
+
+ <!-- Placement Toast -->
+ <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
+ <!-- Then put toasts within -->
+ <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="toast-header">
+ <img src="assets/images/logo-dark-sm.png" alt="brand-logo" height="12" class="me-1" />
+ <strong class="me-auto">Hyper</strong>
+ <small>11 mins ago</small>
+ <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+ </div>
+ <div class="toast-body">
+ Hello, world! This is a toast message.
+ </div>
+ </div> <!--end toast-->
+ </div>
+
+
+ Alternatively, you can also add additional controls + and components to toasts.
+ + +
+
+ <div class="toast show align-items-center mb-4" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="d-flex">
+ <div class="toast-body">
+ Hello, world! This is a toast message.
+ </div>
+ <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+ </div>
+ </div>
+
+ <div class="toast show align-items-center text-white bg-primary border-0 mb-4" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="d-flex">
+ <div class="toast-body">
+ Hello, world! This is a toast message.
+ </div>
+ <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+ </div>
+ </div>
+
+ <div class="toast show mb-4" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="toast-body">
+ Hello, world! This is a toast message.
+ <div class="mt-2 pt-2 border-top">
+ <button type="button" class="btn btn-primary btn-sm">Take action</button>
+ <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="toast bg-primary show" role="alert" aria-live="assertive" aria-atomic="true">
+ <div class="toast-body text-white">
+ Hello, world! This is a toast message.
+ <div class="mt-2 pt-2 border-top">
+ <button type="button" class="btn btn-light btn-sm">Take action</button>
+ <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
+ </div>
+ </div>
+ </div>
+
+
+ Place toasts with custom CSS as you need them. The top
+ right is often used for notifications, as is the top middle. If you’re only ever
+ going to show one toast at a time, put the positioning styles right on the
+ .toast.
+
+ Hyper
+ 11 mins ago
+
+
+ <form>
+ <div class="mb-3">
+ <label for="selectToastPlacement">Toast placement</label>
+ <select class="form-select mt-2" id="selectToastPlacement">
+ <option value="" selected>Select a position...</option>
+ <option value="top-0 start-0">Top left</option>
+ <option value="top-0 start-50 translate-middle-x">Top center</option>
+ <option value="top-0 end-0">Top right</option>
+ <option value="top-50 start-0 translate-middle-y">Middle left</option>
+ <option value="top-50 start-50 translate-middle">Middle center</option>
+ <option value="top-50 end-0 translate-middle-y">Middle right</option>
+ <option value="bottom-0 start-0">Bottom left</option>
+ <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
+ <option value="bottom-0 end-0">Bottom right</option>
+ </select>
+ </div>
+ </form>
+ <div aria-live="polite" aria-atomic="true" class="bg-light position-relative bd-example-toasts" style="min-height:294px">
+ <div class="toast-container position-absolute p-3" id="toastPlacement">
+ <div class="toast show">
+ <div class="toast-header">
+ <img src="assets/images/logo-dark-sm.png" alt="brand-logo" height="12" class="me-1" />
+ <strong class="me-auto">Hyper</strong>
+ <small>11 mins ago</small>
+ </div>
+ <div class="toast-body">
+ Hello, world! This is a toast message.
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ Toasts based notifications can be used to to show + important alerts or information to users.
+ + +Info Example
+ +Warning Example
+ +Success Example
+ +Danger Example
+ +The text can be an array
+ +Put some HTML in the text
+ +Making them sticky
+ +Fade transitions
+ +Open file
+ src/scss/custom/plugins/_toaster.scss and
+ change the different style to change the background, text or
+ other
+ colors.
+
+
+ <script>$.NotificationApp.send("Title","Your awesome message text","Position","Background color","Icon")</script>
+
+
+
+ Following positions for toast are supported at the + moment:
+bottom-left to show the toast at bottom left
+ position
+ bottom-right to show the toast at bottom right
+ position
+ bottom-center to show the toast at bottom center
+ position
+ top-right to show the toast at top right position
+ top-left to show the toast at top left position
+ top-center to show the toast at top center position
+ mid-center to show the toast at middle position
+ For more options, please refer to official documentation here +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="offcanvas" is required.
+
+
+ <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
+ Link with href
+ </a>
+ <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+ Button with data-bs-target
+ </button>
+
+ <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+ <div class="offcanvas-header">
+ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+
+ <ul class="ps-3">
+ <li class="">At vero eos et accusamus et iusto odio dignissimos</li>
+ <li class="">Et harum quidem rerum facilis</li>
+ <li class="">Temporibus autem quibusdam et aut officiis</li>
+ </ul>
+ </div>
+ </div>
+
+
+
+ Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.
+
+
+ <button class="btn btn-primary mt-2 mt-md-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
+ <button class="btn btn-primary mt-2 mt-md-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
+ <button class="btn btn-primary mt-2 mt-md-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
+
+ <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+ <div class="offcanvas-header">
+ <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+
+ <ul class="ps-3">
+ <li class="">At vero eos et accusamus et iusto odio dignissimos</li>
+ <li class="">Et harum quidem rerum facilis</li>
+ <li class="">Temporibus autem quibusdam et aut officiis</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
+ <div class="offcanvas-header">
+ <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+
+ <ul class="ps-3">
+ <li class="">At vero eos et accusamus et iusto odio dignissimos</li>
+ <li class="">Et harum quidem rerum facilis</li>
+ <li class="">Temporibus autem quibusdam et aut officiis</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
+ <div class="offcanvas-header">
+ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+
+ <ul class="ps-3">
+ <li class="">At vero eos et accusamus et iusto odio dignissimos</li>
+ <li class="">Et harum quidem rerum facilis</li>
+ <li class="">Temporibus autem quibusdam et aut officiis</li>
+ </ul>
+ </div>
+ </div>
+
+
+ + Try the right and bottom examples out below. +
+ + + +.offcanvas-start places offcanvas on the left of the viewport (shown above).offcanvas-end places offcanvas on the right of the viewport.offcanvas-top places offcanvas on the top of the viewport.offcanvas-bottom places offcanvas on the bottom of the viewport
+
+
+ <div>
+ <button class="btn btn-primary mt-2 mt-md-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle Top offcanvas</button>
+ <button class="btn btn-primary mt-2 mt-md-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
+ <button class="btn btn-primary mt-2 mt-md-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
+ <button class="btn btn-primary mt-2 mt-lg-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">Toggle Left offcanvas</button>
+
+ <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
+ <div class="offcanvas-header">
+ <h5 id="offcanvasTopLabel">Offcanvas Top</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+ <div class="offcanvas-header">
+ <h5 id="offcanvasRightLabel">Offcanvas right</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
+ <div class="offcanvas-header">
+ <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel">
+ <div class="offcanvas-header">
+ <h5 id="offcanvasLeftLabel">Offcanvas Left</h5>
+ <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+
+ Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars.
+ Here we add .text-bg-dark to the .offcanvas and .btn-close-white to
+ .btn-close for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding
+ .dropdown-menu-dark to .dropdown-menu.
+
+
+ <button class="btn btn-primary mt-2 mt-md-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDark" aria-controls="offcanvasDark">Toggle Top offcanvas</button>
+
+ <div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
+ <div class="offcanvas-header">
+ <h5 id="offcanvasDarkLabel">Offcanvas Top</h5>
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <div>
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
+ images, lists, etc.
+ </div>
+ <h5 class="mt-3">List</h5>
+ <ul class="ps-3">
+ <li class="">Nemo enim ipsam voluptatem quia aspernatur</li>
+ <li class="">Neque porro quisquam est, qui dolorem</li>
+ <li class="">Quis autem vel eum iure qui in ea</li>
+ </ul>
+ </div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Simple pagination inspired by Rdio, great for apps and search results.
+ + +
+
+ <nav>
+ <ul class="pagination">
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+
+
+ Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.
+
+ <nav aria-label="...">
+ <ul class="pagination mb-0">
+ <li class="page-item disabled">
+ <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+ </li>
+ <li class="page-item"><a class="page-link" href="#">1</a></li>
+ <li class="page-item active" aria-current="page">
+ <a class="page-link" href="#">2</a>
+ </li>
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
+ <li class="page-item">
+ <a class="page-link" href="#">Next</a>
+ </li>
+ </ul>
+ </nav>
+
+
+ Change the alignment of pagination components with flexbox utilities.
+ + +
+
+ <!-- Center Align -->
+ <nav aria-label="Page navigation example">
+ <ul class="pagination justify-content-center">
+ <li class="page-item disabled">
+ <a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
+ </li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);">Next</a>
+ </li>
+ </ul>
+ </nav>
+
+ <!-- End Align -->
+ <nav aria-label="Page navigation example">
+ <ul class="pagination justify-content-end">
+ <li class="page-item disabled">
+ <a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
+ </li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);">Next</a>
+ </li>
+ </ul>
+ </nav>
+
+
+ Add .pagination-rounded for rounded pagination.
+
+ <nav>
+ <ul class="pagination pagination-rounded mb-0">
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
+ <li class="page-item active"><a class="page-link" href="javascript: void(0);">3</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">4</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">5</a></li>
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+
+
+ Add .pagination-lg or .pagination-sm for additional sizes.
+
+ <!-- Large -->
+ <nav>
+ <ul class="pagination pagination-lg">
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+
+ <!-- Small -->
+ <nav>
+ <ul class="pagination pagination-sm mb-0">
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">1</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">2</a></li>
+ <li class="page-item"><a class="page-link" href="javascript: void(0);">3</a></li>
+ <li class="page-item">
+ <a class="page-link" href="javascript: void(0);" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two. +
+ + + +
+
+ Some quick example text to build on the card title and make up the bulk of the card's + content.
+ Go somewhere +
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="card border shadow-none mb-md-0">
+ <img src="assets/images/small/small-1.jpg" class="card-img-top" alt="...">
+
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
+ content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div> <!-- end card-body-->
+ </div> <!-- end card-->
+ </div> <!-- end col-->
+
+ <div class="col-md-6">
+ <div class="card border shadow-none mb-0" aria-hidden="true">
+ <img src="assets/images/small/small-2.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title placeholder-glow">
+ <span class="placeholder col-6"></span>
+ </h5>
+ <p class="card-text placeholder-glow">
+ <span class="placeholder col-7"></span>
+ <span class="placeholder col-4"></span>
+ <span class="placeholder col-4"></span>
+ <span class="placeholder col-6"></span>
+ <span class="placeholder col-8"></span>
+ </p>
+ <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
+ </div> <!-- end card-body-->
+ </div> <!-- end card-->
+ </div> <!-- end col-->
+ </div> <!-- end row-->
+
+
+
+ By default, the placeholder uses currentColor. This can be overriden with a custom color or utility class.
+
+
+ <span class="placeholder col-12"></span>
+ <span class="placeholder col-12 bg-primary"></span>
+ <span class="placeholder col-12 bg-secondary"></span>
+ <span class="placeholder col-12 bg-success"></span>
+ <span class="placeholder col-12 bg-danger"></span>
+ <span class="placeholder col-12 bg-warning"></span>
+ <span class="placeholder col-12 bg-info"></span>
+ <span class="placeholder col-12 bg-light"></span>
+ <span class="placeholder col-12 bg-dark"></span>
+
+
+
+ You can change the width through grid column classes, width utilities, or inline styles.
+
+
+ <span class="placeholder col-6"></span>
+ <span class="placeholder w-75"></span>
+ <span class="placeholder" style="width: 25%;"></span>
+
+
+
+ The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.
+
+
+ <span class="placeholder col-12 placeholder-lg"></span>
+ <span class="placeholder col-12"></span>
+ <span class="placeholder col-12 placeholder-sm"></span>
+ <span class="placeholder col-12 placeholder-xs"></span>
+
+
+
+ Create placeholders with the .placeholder class and a grid column class (e.g., .col-6) to set the width. They can replace the text inside an element or as be added as a modifier class to an existing component.
+
+
+ <p aria-hidden="true">
+ <span class="placeholder col-6"></span>
+ </p>
+
+ <a href="#" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
+
+
+
+ Animate placehodlers with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.
+
+ +
+ ++ +
+
+
+ <p class="placeholder-glow">
+ <span class="placeholder col-12"></span>
+ </p>
+
+ <p class="placeholder-wave mb-0">
+ <span class="placeholder col-12"></span>
+ </p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Popover is a component which displays a box with a content after a click on an + element - similar to the tooltip but can contain more content. +
+ + +
+
+ <button type="button" class="btn btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+
+
+ Use the focus trigger to dismiss popovers
+ on the user’s next click of a different element than the toggle element.
+
+ <button type="button" tabindex="0" class="btn btn-success" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="And here's some amazing content. It's very engaging. Right?" title="Dismissible popover">
+ Dismissible popover
+ </button>
+
+
+ Use the attribute data-bs-trigger="hover"
+ to show the popover on hovering the element.
+
+ <button type="button" tabindex="0" class="btn btn-dark" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="And here's some amazing content. It's very engaging. Right?" title="Ohh Wow !">
+ Please Hover Me
+ </button>
+
+
+ Four options are available: top, right, bottom, and + left aligned.
+ + +
+
+ <!-- Top Position -->
+ <button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="">
+ Popover on top
+ </button>
+
+ <!-- Bottom Position -->
+ <button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
+ sagittis lacus vel augue laoreet rutrum faucibus." title="">
+ Popover on bottom
+ </button>
+
+ <!-- Right Position -->
+ <button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="">
+ Popover on right
+ </button>
+
+ <!-- Left Position -->
+ <button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">
+ Popover on left
+ </button>
+
+
+ You can customize the appearance of popovers using CSS variables. We set a custom class with
+ data-bs-custom-class="primary-popover" to scope our custom appearance and use it to override some of the
+ local CSS variables.
+
+
+ <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right"
+ data-bs-custom-class="primary-popover" data-bs-title="Primary popover"
+ data-bs-content="This popover is themed via CSS variables.">
+ Primary popover
+ </button>
+
+ <button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="right"
+ data-bs-custom-class="success-popover" data-bs-title="Success popover"
+ data-bs-content="This popover is themed via CSS variables.">
+ Success popover
+ </button>
+
+ <button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="right"
+ data-bs-custom-class="danger-popover" data-bs-title="Danger popover"
+ data-bs-content="This popover is themed via CSS variables.">
+ Danger popover
+ </button>
+
+ <button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="right"
+ data-bs-custom-class="info-popover" data-bs-title="Info popover"
+ data-bs-content="This popover is themed via CSS variables.">
+ Info popover
+ </button>
+
+
+ Elements with the disabled attribute
+ aren’t interactive, meaning users cannot hover or click them to trigger a
+ popover (or tooltip). As a workaround, you’ll want to trigger the popover from a
+ wrapper <div> or <span> and override the
+ pointer-events on the disabled element.
+
+
+ <span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover">
+ <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+ </span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A progress bar can be used to show a user how far along he/she is in a process.
+ + +
+
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+
+ We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.
+ Use .progress-sm,.progress-md,.progress-lg,.progress-xl classes.
+
+ <!-- Inline height -->
+ <div class="progress" style="height: 3px;">
+ <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- .progress-sm -->
+ <div class="progress progress-sm">
+ <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- .progress-md -->
+ <div class="progress progress-md">
+ <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- .progress-lg -->
+ <div class="progress progress-lg">
+ <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- .progress-xl -->
+ <div class="progress progress-xl">
+ <div class="progress-bar bg-success" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+
+ Include multiple progress bars in a progress component if you need.
+ + +
+
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+ <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+ <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+
+ The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
+
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+ </div>
+
+
+ Add labels to your progress bars by placing text within the .progress-bar.
+
+ <div class="progress mb-3">
+ <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+ </div>
+ <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+ <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+ </div>
+
+
+ Use background utility classes to change the appearance of individual progress bars.
+ + +
+
+ <!-- Success -->
+ <div class="progress">
+ <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- Info -->
+ <div class="progress">
+ <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- Warning -->
+ <div class="progress">
+ <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- Danger -->
+ <div class="progress">
+ <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- Dark -->
+ <div class="progress">
+ <div class="progress-bar bg-dark" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- Secondary -->
+ <div class="progress">
+ <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+
+ Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.
+
+ <div class="progress mb-2">
+ <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress mb-2">
+ <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress mb-2">
+ <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress mb-2">
+ <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim eros at volutpat. In egestas + mattis dui. Aliquam mattis dictum aliquet. Nulla sapien + mauris, eleifend et sem ac, commodo dapibus odio.
+Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim eros at volutpat. In egestas + mattis dui. Aliquam mattis dictum aliquet. Nulla sapien + mauris, eleifend et sem ac, commodo dapibus odio.
+Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim eros at volutpat. In egestas + mattis dui. Aliquam mattis dictum aliquet. Nulla sapien + mauris, eleifend et sem ac, commodo dapibus odio.
+Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim eros at volutpat. In egestas + mattis dui. Aliquam mattis dictum aliquet. Nulla sapien + mauris, eleifend et sem ac, commodo dapibus odio.
+Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim eros at volutpat. In egestas + mattis dui. Aliquam mattis dictum aliquet. Nulla sapien + mauris, eleifend et sem ac, commodo dapibus odio.
+Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim eros at volutpat. In egestas + mattis dui. Aliquam mattis dictum aliquet. Nulla sapien + mauris, eleifend et sem ac, commodo dapibus odio.
+Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim eros at volutpat. In egestas + mattis dui. Aliquam mattis dictum aliquet. Nulla sapien + mauris, eleifend et sem ac, commodo dapibus odio.
+Quisque nec turpis at urna dictum luctus. Suspendisse + convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, + commodo dapibus odio. Vivamus pretium nec odio cursus elementum. + Suspendisse molestie ullamcorper ornare.
+Quisque nec turpis at urna dictum luctus. Suspendisse + convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, + commodo dapibus odio. Vivamus pretium nec odio cursus elementum. + Suspendisse molestie ullamcorper ornare.
+Quisque nec turpis at urna dictum luctus. Suspendisse + convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, + commodo dapibus odio. Vivamus pretium nec odio cursus elementum. + Suspendisse molestie ullamcorper ornare.
+Quisque nec turpis at urna dictum luctus. Suspendisse + convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, + commodo dapibus odio. Vivamus pretium nec odio cursus elementum. + Suspendisse molestie ullamcorper ornare.
+Quisque nec turpis at urna dictum luctus. Suspendisse + convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, + commodo dapibus odio. Vivamus pretium nec odio cursus elementum. + Suspendisse molestie ullamcorper ornare.
+Quisque nec turpis at urna dictum luctus. Suspendisse + convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, + commodo dapibus odio. Vivamus pretium nec odio cursus elementum. + Suspendisse molestie ullamcorper ornare.
+Quisque nec turpis at urna dictum luctus. Suspendisse + convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam + mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, + commodo dapibus odio. Vivamus pretium nec odio cursus elementum. + Suspendisse molestie ullamcorper ornare.
+
+
+ <!-- Ribbons style 1 -->
+
+ <!-- Left -->
+ <div class="card ribbon-box">
+ <div class="card-body">
+ <div class="ribbon ribbon-primary float-start"><i class="mdi mdi-access-point me-1"></i> Primary</div>
+ <h5 class="text-primary float-end mt-0">Primary Header</h5>
+ <div class="ribbon-content">
+ ...
+ </div>
+ </div> <!-- end card-body -->
+ </div> <!-- end card-->
+
+ <!-- Right -->
+ <div class="card ribbon-box">
+ <div class="card-body">
+ <div class="ribbon ribbon-success float-end"><i class="mdi mdi-access-point me-1"></i> Success</div>
+ <h5 class="text-success float-start mt-0">Success Header</h5>
+ <div class="ribbon-content">
+ ...
+ </div>
+ </div> <!-- end card-body -->
+ </div> <!-- end card-->
+
+
+ <!-- Ribbons style 2 -->
+
+ <div class="card ribbon-box">
+ <div class="card-body">
+ <div class="ribbon-two ribbon-two-primary"><span>Primary</span></div>
+ <p class="mb-0">Quisque nec turpis at urna dictum luctus. Suspendisse
+ convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam
+ mattis dictum aliquet. </p>
+ </div> <!-- end card-body -->
+ </div> <!-- end card-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use the border spinners for a lightweight loading indicator.
+ + +
+
+ <div class="spinner-border" role="status">
+ <span class="visually-hidden">Loading...</span>
+ </div>
+
+
+ You can use any + of our text color utilities on the standard spinner.
+ + +
+
+ <div class="spinner-border text-primary" role="status"></div>
+ <div class="spinner-border text-secondary" role="status"></div>
+ <div class="spinner-border text-success" role="status"></div>
+ <div class="spinner-border text-danger" role="status"></div>
+ <div class="spinner-border text-warning" role="status"></div>
+ <div class="spinner-border text-info" role="status"></div>
+ <div class="spinner-border text-light" role="status"></div>
+ <div class="spinner-border text-dark" role="status"></div>
+
+
+ Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.
+ + +
+
+ <div class="d-flex justify-content-center">
+ <div class="spinner-border" role="status"></div>
+ </div>
+
+
+ Add .spinner-border-sm and
+ .spinner-border.avatar-** to make a smaller spinner that can quickly be used within other components.
+
+
+ <!-- Large -->
+ <div class="spinner-border avatar-lg text-primary" role="status"></div>
+ <div class="spinner-grow avatar-lg text-secondary" role="status"></div>
+
+ <!--Medium -->
+ <div class="spinner-border avatar-md text-primary" role="status"></div>
+ <div class="spinner-grow avatar-md text-secondary" role="status"></div>
+
+ <!--Small -->
+ <div class="spinner-border avatar-sm text-primary" role="status"></div>
+ <div class="spinner-grow avatar-sm text-secondary" role="status"></div>
+
+ <!--Extra Small -->
+ <div class="spinner-border spinner-border-sm" role="status"></div>
+ <div class="spinner-grow spinner-grow-sm" role="status"></div>
+
+
+ If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
+ + +
+
+ <div class="spinner-grow" role="status">
+ <span class="visually-hidden">Loading...</span>
+ </div>
+
+
+ You can use any of our text color utilities on the standard spinner.
+ + +
+
+ <div class="spinner-grow text-primary" role="status"></div>
+ <div class="spinner-grow text-secondary" role="status"></div>
+ <div class="spinner-grow text-success" role="status"></div>
+ <div class="spinner-grow text-danger" role="status"></div>
+ <div class="spinner-grow text-warning" role="status"></div>
+ <div class="spinner-grow text-info" role="status"></div>
+ <div class="spinner-grow text-light" role="status"></div>
+ <div class="spinner-grow text-dark" role="status"></div>
+
+
+ Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.
+
+ <div class="d-flex align-items-center">
+ <strong>Loading...</strong>
+ <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
+ </div>
+
+
+ Use spinners within buttons to indicate an action is currently processing or taking place. + You may also swap the text out of the spinner element and utilize button text as needed.
+ + +
+
+ <!-- Border Spinner -->
+ <button class="btn btn-primary" type="button" disabled>
+ <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden">Loading...</span>
+ </button>
+ <button class="btn btn-primary" type="button" disabled>
+ <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+ Loading...
+ </button>
+
+ <!-- Growing Spinner -->
+ <button class="btn btn-primary" type="button" disabled>
+ <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Loading...</span>
+ </button>
+ <button class="btn btn-primary" type="button" disabled>
+ <span class="spinner-grow spinner-grow-sm me-1" role="status" aria-hidden="true"></span>
+ Loading...
+ </button>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Simple widget of tabbable panes of local content.
+ + +Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+
+
+ <ul class="nav nav-tabs mb-3">
+ <li class="nav-item">
+ <a href="#home" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+ <i class="mdi mdi-home-variant d-md-none d-block"></i>
+ <span class="d-none d-md-block">Home</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#profile" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
+ <i class="mdi mdi-account-circle d-md-none d-block"></i>
+ <span class="d-none d-md-block">Profile</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#settings" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+ <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+ <span class="d-none d-md-block">Settings</span>
+ </a>
+ </li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane" id="home">
+ <p>...</p>
+ </div>
+ <div class="tab-pane show active" id="profile">
+ <p>...</p>
+ </div>
+ <div class="tab-pane" id="settings">
+ <p>...</p>
+ </div>
+ </div>
+
+
+ Using class .nav-justified, you can force your tab menu items to use the full available width.
Leggings occaecat dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Leggings occaecat dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+
+
+ <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
+ <li class="nav-item">
+ <a href="#home1" data-bs-toggle="tab" aria-expanded="false" class="nav-link rounded-0">
+ <i class="mdi mdi-home-variant d-md-none d-block"></i>
+ <span class="d-none d-md-block">Home</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#profile1" data-bs-toggle="tab" aria-expanded="true" class="nav-link rounded-0 active">
+ <i class="mdi mdi-account-circle d-md-none d-block"></i>
+ <span class="d-none d-md-block">Profile</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#settings1" data-bs-toggle="tab" aria-expanded="false" class="nav-link rounded-0">
+ <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+ <span class="d-none d-md-block">Settings</span>
+ </a>
+ </li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane" id="home1">
+ <p>...</p>
+ </div>
+ <div class="tab-pane show active" id="profile1">
+ <p>...</p>
+ </div>
+ <div class="tab-pane" id="settings1">
+ <p>...</p>
+ </div>
+ </div>
+
+
+
+ You can stack your navigation by changing the flex item direction with the .flex-column utility.
+
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Leggings sint. Veniam sint duis incididunt + do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit + excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit + mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
+Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna + pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit + id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Leggings + enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur + qui.
+Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque + eu, pretium quis, sem. Nulla consequat massa quis enim. Cillum ad ut irure tempor velit nostrud occaecat ullamco + aliqua anim Leggings sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.
+
+
+ <div class="row">
+ <div class="col-sm-3 mb-2 mb-sm-0">
+ <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+ <a class="nav-link active show" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home"
+ aria-selected="true">
+ <i class="mdi mdi-home-variant d-md-none d-block"></i>
+ <span class="d-none d-md-block">Home</span>
+ </a>
+ <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
+ aria-selected="false">
+ <i class="mdi mdi-account-circle d-md-none d-block"></i>
+ <span class="d-none d-md-block">Profile</span>
+ </a>
+ <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
+ aria-selected="false">
+ <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+ <span class="d-none d-md-block">Settings</span>
+ </a>
+ </div>
+ </div> <!-- end col-->
+
+ <div class="col-sm-9">
+ <div class="tab-content" id="v-pills-tabContent">
+ <div class="tab-pane fade active show" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
+ <p class="mb-0">...</p>
+ </div>
+ <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
+ <p class="mb-0">...</p>
+ </div>
+ <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
+ <p class="mb-0">...</p>
+ </div>
+ </div> <!-- end tab-content-->
+ </div> <!-- end col-->
+ </div>
+ <!-- end row-->
+
+
+
+ You can stack your navigation by changing the flex item direction with the .flex-column utility.
+
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Leggings sint. Veniam sint duis incididunt + do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit + excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit + mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
+Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna + pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit + id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Leggings + enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur + qui.
+Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque + eu, pretium quis, sem. Nulla consequat massa quis enim. Cillum ad ut irure tempor velit nostrud occaecat ullamco + aliqua anim Leggings sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.
+
+
+ <div class="row">
+ <div class="col-sm-9">
+ <div class="tab-content" id="v-pills-tabContent-right">
+ <div class="tab-pane fade active show" id="v-pills-home2" role="tabpanel" aria-labelledby="v-pills-home-tab2">
+ <p class="mb-0">...</p>
+ </div>
+ <div class="tab-pane fade" id="v-pills-profile2" role="tabpanel" aria-labelledby="v-pills-profile-tab2">
+ <p class="mb-0">...</p>
+ </div>
+ <div class="tab-pane fade" id="v-pills-settings2" role="tabpanel" aria-labelledby="v-pills-settings-tab2">
+ <p class="mb-0">...</p>
+ </div>
+ </div> <!-- end tabcontent-->
+ </div> <!-- end col-->
+
+ <div class="col-sm-3 mt-2 mt-sm-0">
+ <div class="nav flex-column nav-pills" id="v-pills-tab2" role="tablist" aria-orientation="vertical">
+ <a class="nav-link active show" id="v-pills-home-tab2" data-bs-toggle="pill" href="#v-pills-home2" role="tab" aria-controls="v-pills-home2"
+ aria-selected="true">
+ <i class="mdi mdi-home-variant d-md-none d-block"></i>
+ <span class="d-none d-md-block">Home</span>
+ </a>
+ <a class="nav-link" id="v-pills-profile-tab2" data-bs-toggle="pill" href="#v-pills-profile2" role="tab" aria-controls="v-pills-profile2"
+ aria-selected="false">
+ <i class="mdi mdi-account-circle d-md-none d-block"></i>
+ <span class="d-none d-md-block">Profile</span>
+ </a>
+ <a class="nav-link" id="v-pills-settings-tab2" data-bs-toggle="pill" href="#v-pills-settings2" role="tab" aria-controls="v-pills-settings2"
+ aria-selected="false">
+ <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+ <span class="d-none d-md-block">Settings</span>
+ </a>
+ </div>
+ </div> <!-- end col-->
+ </div> <!-- end row-->
+
+
+
+ The navigation item can have a simple bottom border as well. Just specify the class .nav-bordered.
+
Leggings occaecat dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Leggings occaecat dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+
+
+ <ul class="nav nav-tabs nav-bordered mb-3">
+ <li class="nav-item">
+ <a href="#home-b1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+ <i class="mdi mdi-home-variant d-md-none d-block"></i>
+ <span class="d-none d-md-block">Home</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#profile-b1" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
+ <i class="mdi mdi-account-circle d-md-none d-block"></i>
+ <span class="d-none d-md-block">Profile</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#settings-b1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+ <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+ <span class="d-none d-md-block">Settings</span>
+ </a>
+ </li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane" id="home-b1">
+ <p>...</p>
+ </div>
+ <div class="tab-pane show active" id="profile-b1">
+ <p>...</p>
+ </div>
+ <div class="tab-pane" id="settings-b1">
+ <p>...</p>
+ </div>
+ </div>
+
+
+ + The navigation item with a simple bottom border and justified +
+ + +Leggings occaecat dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+Leggings occaecat dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Food truck quinoa dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+
+
+ <ul class="nav nav-tabs nav-justified nav-bordered mb-3">
+ <li class="nav-item">
+ <a href="#home-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+ <i class="mdi mdi-home-variant d-md-none d-block"></i>
+ <span class="d-none d-md-block">Home</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#profile-b2" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
+ <i class="mdi mdi-account-circle d-md-none d-block"></i>
+ <span class="d-none d-md-block">Profile</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#settings-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+ <i class="mdi mdi-settings-outline d-md-none d-block"></i>
+ <span class="d-none d-md-block">Settings</span>
+ </a>
+ </li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane" id="home-b2">
+ <p>...</p>
+ </div>
+ <div class="tab-pane show active" id="profile-b2">
+ <p>...</p>
+ </div>
+ <div class="tab-pane" id="settings-b2">
+ <p>...</p>
+ </div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hover over the links below to see tooltips.
+ + ++ Tight pants next level keffiyeh you probably haven't heard + of them. Photo booth beard raw denim letterpress vegan messenger bag + stumptown. Farm-to-table Photo booth beard seitan, mcsweeney's fixie sustainable quinoa + 8-bit american apparel have a terry richardson + vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. + Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan + chambray. A really ironic artisan whatever + keytar, scenester farm-to-table banksy Austin twitter handle freegan cred + raw denim single-origin coffee viral. +
+
+
+ <p class="muted mb-0">
+ Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">you probably</a> haven't heard
+ of them. Photo booth beard raw denim letterpress vegan messenger bag
+ stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa
+ 8-bit american apparel <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">have a</a> terry richardson
+ vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
+ Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan
+ chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">whatever
+ </a> keytar, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">twitter handle</a> freegan cred
+ raw denim single-origin coffee viral.
+ </p>
+
+
+ Elements with the disabled attribute
+ aren’t interactive, meaning users cannot focus, hover, or click them to trigger
+ a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from
+ a wrapper <div> or <span>, ideally made
+ keyboard-focusable using tabindex="0", and override the
+ pointer-events on the disabled element.
+
+
+ <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
+ <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
+ </span>
+
+
+ Hover over the buttons below to see the four tooltips + directions: top, right, bottom, and left.
+ + +
+
+ <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip on top</button>
+ <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</button>
+ <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>
+ <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
+
+
+ And with custom HTML added:
+ + +
+
+ <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"
+ data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+ Tooltip with HTML
+ </button>
+
+
+ We set a custom class with ex. data-bs-custom-class="primary-tooltip" to scope our background-color primary appearance and use
+ it to override a local CSS
+ variable.
+
+ <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top"
+ data-bs-custom-class="primary-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
+ Primary tooltip
+ </button>
+ <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top"
+ data-bs-custom-class="danger-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
+ Danger tooltip
+ </button>
+ <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top"
+ data-bs-custom-class="info-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
+ Info tooltip
+ </button>
+ <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top"
+ data-bs-custom-class="success-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
+ Success tooltip
+ </button>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
+ + +Suspendisse vel quam malesuada, aliquet sem sit + amet, fringilla elit. Morbi + tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien + nec, + varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros + hendrerit + est consequat posuere et at velit.
+ + + +In nec rhoncus eros. Vestibulum eu mattis nisl. + Quisque viverra viverra magna + nec pulvinar. Maecenas pellentesque porta augue, consectetur + facilisis diam + porttitor sed. Suspendisse tempor est sodales augue rutrum + tincidunt. + Quisque a malesuada purus.
+ + + +Vestibulum auctor tincidunt semper. Phasellus ut + vulputate lacus. Suspendisse + ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl + nisi, + feugiat quis bibendum vitae, dapibus in tellus.
+ + + +Nulla et mattis nunc. Curabitur scelerisque + commodo condimentum. Mauris + blandit, velit a consectetur egestas, diam arcu fermentum justo, + eget + ultrices arcu eros vel erat.
+ + + +Nulla et mattis nunc. Curabitur scelerisque + commodo condimentum. Mauris + blandit, velit a consectetur egestas, diam arcu fermentum justo, + eget.
+ + + +Nulla et mattis nunc. Curabitur scelerisque + commodo condimentum. Mauris + blandit, velit a consectetur egestas.
+
+
+ <h1 class="display-1">Display 1</h1>
+
+ <h1 class="display-2">Display 2</h1>
+
+ <h1 class="display-3">Display 3</h1>
+
+ <h1 class="display-4">Display 4</h1>
+
+ <h1 class="display-5">Display 5</h1>
+
+ <h1 class="display-6">Display 6</h1>
+
+
+ All HTML headings, <h1> through
+ <h6>, are available. .h1 through .h6
+ classes are also available, for when you want to match the font styling of a heading
+ but still want your text to be displayed inline.
+
Suspendisse vel quam malesuada, aliquet sem sit + amet, fringilla elit. Morbi + tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien + nec, + varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros + hendrerit + est consequat posuere et at velit.
+ + + +In nec rhoncus eros. Vestibulum eu mattis nisl. + Quisque viverra viverra magna + nec pulvinar. Maecenas pellentesque porta augue, consectetur + facilisis diam + porttitor sed. Suspendisse tempor est sodales augue rutrum + tincidunt. + Quisque a malesuada purus.
+ + + +Vestibulum auctor tincidunt semper. Phasellus ut + vulputate lacus. Suspendisse + ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl + nisi, + feugiat quis bibendum vitae, dapibus in tellus.
+ + + +Nulla et mattis nunc. Curabitur scelerisque + commodo condimentum. Mauris + blandit, velit a consectetur egestas, diam arcu fermentum justo, + eget + ultrices arcu eros vel erat.
+ + + +Quisque nec turpis at urna dictum luctus. + Suspendisse convallis dignissim + eros at volutpat. In egestas mattis dui. Aliquam mattis dictum + aliquet. + Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. + Vivamus + pretium nec odio cursus elementum. Suspendisse molestie ullamcorper + ornare.
+ + + +Donec ultricies, lacus id tempor condimentum, orci + leo faucibus sem, a + molestie libero lectus ac justo. ultricies mi eros, sit amet tempor + nulla + varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in + tellus.
+
+
+ <h1>h1. Bootstrap heading</h1>
+ <h2>h2. Bootstrap heading</h2>
+ <h3>h3. Bootstrap heading</h3>
+ <h4>h4. Bootstrap heading</h4>
+ <h5>h5. Bootstrap heading</h5>
+ <h6>h6. Bootstrap heading</h6>
+
+ <!-- .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. -->
+
+ <p class="h1">h1. Bootstrap heading</p>
+ <p class="h2">h2. Bootstrap heading</p>
+ <p class="h3">h3. Bootstrap heading</p>
+ <p class="h4">h4. Bootstrap heading</p>
+ <p class="h5">h5. Bootstrap heading</p>
+ <p class="h6">h6. Bootstrap heading</p>
+
+
+ Styling for common inline HTML5 elements.
+ + ++ Your title goes here +
+ +You can use the mark tag to highlight text.
+This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
+This line of text will render as underlined
+This line of text is meant to be treated as fine print.
+This line rendered as bold text.
+This line rendered as italicized text.
+ Nulla attr vitae elit libero, a pharetra augue. +
+
+ <p class="lead">
+ Your title goes here
+ </p>
+
+ <p>You can use the mark tag to <mark>highlight</mark> text.</p>
+ <p><del>This line of text is meant to be treated as deleted text.</del></p>
+ <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+ <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+ <p><u>This line of text will render as underlined</u></p>
+ <p><small>This line of text is meant to be treated as fine print.</small></p>
+ <p><strong>This line rendered as bold text.</strong></p>
+ <p><em>This line rendered as italicized text.</em></p>
+ Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
+
+
+ A list of items in which the order does not explicitly matter.
+ + +
+
+ <ul>
+ <li>
+ Lorem ipsum dolor sit amet
+ </li>
+ <li>
+ Facilisis in pretium nisl aliquet
+ </li>
+ <li>
+ Nulla volutpat aliquam velit
+ <ul>
+ <li>
+ Phasellus iaculis neque
+ </li>
+ <li>
+ Purus sodales ultricies
+ </li>
+ </ul>
+ </li>
+ <li>
+ Faucibus porta lacus fringilla vel
+ </li>
+ <li>
+ Eget porttitor lorem
+ </li>
+ </ul>
+
+
+ A list of items in which the order does explicitly matter.
+ + +
+
+ <ol>
+ <li>
+ Lorem ipsum dolor sit amet
+ </li>
+ <li>
+ Facilisis in pretium nisl aliquet
+ </li>
+ <li>
+ Nulla volutpat aliquam velit
+ <ol>
+ <li>
+ Phasellus iaculis neque
+ </li>
+ <li>
+ Purus sodales ultricies
+ </li>
+ </ol>
+ </li>
+ <li>
+ Faucibus porta lacus fringilla vel
+ </li>
+ <li>
+ Eget porttitor lorem
+ </li>
+ </ol>
+
+
+ This only applies to immediate children + list items, meaning you will need to add the class for any nested lists as well.
+ + +
+ Place all list items on a single line with
+ display: inline-block;
+ and some light padding.
+
+
+ <ul class="list-unstyled">
+ <li>
+ Lorem ipsum dolor sit amet
+ </li>
+ <li>
+ Integer molestie lorem at massa
+ <ul>
+ <li>
+ Phasellus iaculis neque
+ </li>
+ </ul>
+ </li>
+ <li>
+ Faucibus porta lacus fringilla vel
+ </li>
+ <li>
+ Eget porttitor lorem
+ </li>
+ </ul>
+
+ <!-- Inline -->
+
+ <ul class="list-inline">
+ <li class="list-inline-item">
+ Lorem ipsum
+ </li>
+ <li class="list-inline-item">
+ Phasellus iaculis
+ </li>
+ <li class="list-inline-item">
+ Nulla volutpat
+ </li>
+ </ul>
+
+
+ For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+ Use text utilities as needed to change the alignment of your blockquote. +
+ +++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+ <!-- Left -->
+ <blockquote class="blockquote">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ </blockquote>
+ <figcaption class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
+
+ <!-- Center -->
+ <blockquote class="blockquote text-center">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ </blockquote>
+ <figcaption class="blockquote-footer text-center">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
+
+ <!-- Right -->
+ <blockquote class="blockquote text-end">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ </blockquote>
+ <figcaption class="blockquote-footer text-end">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
+
+
+ Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+Donec id elit non mi porta gravida at eget metus.
+
+
+ <dl class="row mb-0">
+ <dt class="col-sm-3">Description lists</dt>
+ <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+ <dt class="col-sm-3">Euismod</dt>
+ <dd class="col-sm-9">
+ <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
+ <p>Donec id elit non mi porta gravida at eget metus.</p>
+ </dd>
+
+ <dt class="col-sm-3">Malesuada porta</dt>
+ <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+
+ <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+ <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+
+ <dt class="col-sm-3">Nesting</dt>
+ <dd class="col-sm-9">
+ <dl class="row mb-0">
+ <dt class="col-sm-4">Nested definition list</dt>
+ <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+ </dl>
+ </dd>
+ </dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Similar to the contextual text color classes, set the background of an element to any contextual class. Background
+ utilities do not set color, so in some cases you’ll want to use .text-*color utilities.
+
+ <div class="bg-primary text-white p-2 mb-2">.bg-primary</div>
+ <div class="bg-secondary text-white p-2 mb-2">.bg-secondary</div>
+ <div class="bg-success text-white p-2 mb-2">.bg-success</div>
+ <div class="bg-danger text-white p-2 mb-2">.bg-danger</div>
+ <div class="bg-warning text-dark p-2 mb-2">.bg-warning</div>
+ <div class="bg-info text-dark p-2 mb-2">.bg-info</div>
+ <div class="bg-light text-dark p-2 mb-2">.bg-light</div>
+ <div class="bg-dark p-2 mb-2">.bg-dark</div>
+ <div class="bg-body text-dark p-2 mb-2">.bg-body</div>
+ <div class="bg-body-secondary text-dark p-2 mb-2">.bg-body-secondary</div>
+ <div class="bg-body-tertiary text-dark p-2 mb-2">.bg-body-tertiary</div>
+ <div class="bg-white p-2 mb-2">.bg-white</div>
+ <div class="bg-black p-2 mb-2">.bg-black</div>
+ <div class="bg-transparent text-dark p-2">.bg-transparent</div>
+
+
+ By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This
+ gradient starts with a semi-transparent white which fades out to the bottom.
+
+ <div class="p-2 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
+ <div class="p-2 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
+ <div class="p-2 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
+ <div class="p-2 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
+ <div class="p-2 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
+ <div class="p-2 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
+ <div class="p-2 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
+ <div class="p-2 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
+ <div class="p-2 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
+
+
+ Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* color utilities.
.bg-primary-subtle.bg-secondary-subtle .bg-success-subtle.bg-danger-subtle.bg-warning-subtle.bg-info-subtle.bg-light-subtle.bg-dark-subtle.bg-primary-lighten.bg-secondary-lighten .bg-success-lighten.bg-danger-lighten.bg-warning-lighten.bg-info-lighten.bg-light-lighten.bg-dark-lighten
+
+ <div class="row">
+ <div class="col-lg-6">
+ <div class="d-flex flex-column gap-2">
+ <div class="bg-primary-subtle p-2"><code class="text-primary-emphasis">.text-primary-subtle</code></div>
+ <div class="bg-secondary-subtle p-2"><code class="text-secondary-emphasis">.bg-secondary-subtle </code></div>
+ <div class="bg-success-subtle p-2"><code class="text-success-emphasis">.bg-success-subtle</code></div>
+ <div class="bg-danger-subtle p-2"><code class="text-danger-emphasis">.bg-danger-subtle</code></div>
+ <div class="bg-warning-subtle p-2"><code class="text-warning-emphasis">.bg-warning-subtle</code></div>
+ <div class="bg-info-subtle p-2"><code class="text-info-emphasis">.bg-info-subtle</code></div>
+ <div class="bg-light-subtle p-2"><code class="text-light-emphasis">.bg-light-subtle</code></div>
+ <div class="bg-dark-subtle p-2"><code class="text-dark-emphasis">.bg-dark-subtle</code></div>
+ </div>
+ </div>
+
+ <div class="col-lg-6">
+ <div class="d-flex flex-column gap-2">
+ <div class="bg-primary-lighten p-2"><code class="text-primary-emphasis">.text-primary-lighten</code></div>
+ <div class="bg-secondary-lighten p-2"><code class="text-secondary-emphasis">.bg-secondary-lighten </code></div>
+ <div class="bg-success-lighten p-2"><code class="text-success-emphasis">.bg-success-lighten</code></div>
+ <div class="bg-danger-lighten p-2"><code class="text-danger-emphasis">.bg-danger-lighten</code></div>
+ <div class="bg-warning-lighten p-2"><code class="text-warning-emphasis">.bg-warning-lighten</code></div>
+ <div class="bg-info-lighten p-2"><code class="text-info-emphasis">.bg-info-lighten</code></div>
+ <div class="bg-light-lighten p-2"><code class="text-light-emphasis">.bg-light-lighten</code></div>
+ <div class="bg-dark-lighten p-2"><code class="text-dark-emphasis">.bg-dark-lighten</code></div>
+ </div>
+ </div>
+ </div>
+
+
+ Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-color.
+
+ <div class="d-flex flex-column gap-2">
+ <div class="text-bg-primary p-2">Primary with contrasting color</div>
+ <div class="text-bg-secondary p-2">Secondary with contrasting color</div>
+ <div class="text-bg-success p-2">Success with contrasting color</div>
+ <div class="text-bg-danger p-2">Danger with contrasting color</div>
+ <div class="text-bg-warning p-2">Warning with contrasting color</div>
+ <div class="text-bg-info p-2">Info with contrasting color</div>
+ <div class="text-bg-light p-2">Light with contrasting color</div>
+ <div class="text-bg-dark p-2">Dark with contrasting color</div>
+ </div>
+
+
+ You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.
+
+ <a href="#" class="link-primary">Primary link</a>
+ <a href="#" class="link-secondary">Secondary link</a>
+ <a href="#" class="link-success">Success link</a>
+ <a href="#" class="link-danger">Danger link</a>
+ <a href="#" class="link-warning">Warning link</a>
+ <a href="#" class="link-info">Info link</a>
+ <a href="#" class="link-light">Light link</a>
+ <a href="#" class="link-dark">Dark link</a>
+
+
+ background-color utilities are generated with Sass using CSS variables. This
+ allows for real-time color changes without compilation and dynamic alpha transparency changes.
+
+ <div class="bg-primary p-2 text-white">This is default primary background</div>
+ <div class="bg-primary p-2 text-white bg-opacity-75">This is 75% opacity primary background</div>
+ <div class="bg-primary p-2 text-dark bg-opacity-50">This is 50% opacity primary background</div>
+ <div class="bg-primary p-2 text-dark bg-opacity-25">This is 25% opacity primary background</div>
+ <div class="bg-primary p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
+
+
+ Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover
+ and :focus states.
.text-primary
+.text-primary-emphasis
+.text-secondary
+.text-secondary-emphasis
+.text-success
+.text-success-emphasis
+.text-danger
+.text-danger-emphasis
+.text-warning
+.text-warning-emphasis
+.text-info
+.text-info-emphasis
+.text-light
+.text-light-emphasis
+.text-dark
+.text-dark-emphasis
+.text-muted
+.text-body
+.text-body-emphasis
+.text-body-secondary
+.text-body-tertiary
+.text-black
+.text-white
+.text-black-50
+.text-white-50
+
+
+ <p class="text-primary">.text-primary</p>
+ <p class="text-primary-emphasis">.text-primary-emphasis</p>
+ <p class="text-secondary">.text-secondary</p>
+ <p class="text-secondary-emphasis">.text-secondary-emphasis</p>
+ <p class="text-success">.text-success</p>
+ <p class="text-success-emphasis">.text-success-emphasis</p>
+ <p class="text-danger">.text-danger</p>
+ <p class="text-danger-emphasis">.text-danger-emphasis</p>
+ <p class="text-warning">.text-warning</p>
+ <p class="text-warning-emphasis">.text-warning-emphasis</p>
+ <p class="text-info">.text-info</p>
+ <p class="text-info-emphasis">.text-info-emphasis</p>
+ <p class="text-light bg-dark">.text-light</p>
+ <p class="text-light-emphasis">.text-light-emphasis</p>
+ <p class="text-dark">.text-dark</p>
+ <p class="text-dark-emphasis">.text-dark-emphasis</p>
+ <p class="text-muted">.text-muted</p>
+ <p class="text-body">.text-body</p>
+ <p class="text-body-emphasis">.text-body-emphasis</p>
+ <p class="text-body-secondary">.text-body-secondary</p>
+ <p class="text-body-tertiary">.text-body-tertiary</p>
+ <p class="text-black">.text-black</p>
+ <p class="text-white bg-dark">.text-white</p>
+ <p class="text-black-50">.text-black-50</p>
+ <p class="text-white-50 bg-dark">.text-white-50</p>
+
+
+ text color utilities are generated with Sass using CSS variables. This allows for real-time color + changes without compilation and dynamic alpha transparency changes.
+ + +
+
+ <div class="text-primary">This is default primary text</div>
+ <div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
+ <div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
+ <div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
+
+
+ The opacity property sets the opacity level for an element. The opacity level describes the transparency
+ level, where 1 is not transparent at all, .5 is 50% visible, and 0 is
+ completely transparent. Set the opacity of an element using .opacity-{value} utilities.
+
+ <div class="opacity-100 p-2 bg-primary text-light fw-bold rounded">100%</div>
+ <div class="opacity-75 p-2 bg-primary text-light fw-bold rounded">75%</div>
+ <div class="opacity-50 p-2 bg-primary text-light fw-bold rounded">50%</div>
+ <div class="opacity-25 p-2 bg-primary text-light fw-bold rounded">25%</div>
+
+
+ Use border utilities to add an element’s borders. Choose from all borders or one at a time.
+ + +
+
+ <span class="border"></span>
+ <span class="border-top"></span>
+ <span class="border-end"></span>
+ <span class="border-bottom"></span>
+ <span class="border-start"></span>
+
+
+ Use border utilities to remove an element’s borders. Choose from all borders or one at a time.
+ + +
+
+ <span class="border border-0"></span>
+ <span class="border border-top-0"></span>
+ <span class="border border-end-0"></span>
+ <span class="border border-bottom-0"></span>
+ <span class="border border-start-0"></span>
+
+
+ Change the border color using utilities built on our theme colors.
+ + +
+
+ <span class="border border-primary"></span>
+ <span class="border border-secondary"></span>
+ <span class="border border-success"></span>
+ <span class="border border-danger"></span>
+ <span class="border border-warning"></span>
+ <span class="border border-info"></span>
+ <span class="border border-light"></span>
+ <span class="border border-dark"></span>
+
+
+
+
+ <span class="border border-1"></span>
+ <span class="border border-2"></span>
+ <span class="border border-3"></span>
+ <span class="border border-4"></span>
+ <span class="border border-5"></span>
+
+
+ choose from any of the .border-opacity utilities:
+
+ <div class="bg-primary p-2 text-white">This is default primary background</div>
+ <div class="bg-primary p-2 text-white bg-opacity-75">This is 75% opacity primary background</div>
+ <div class="bg-primary p-2 text-dark bg-opacity-50">This is 50% opacity primary background</div>
+ <div class="bg-primary p-2 text-dark bg-opacity-25">This is 25% opacity primary background</div>
+ <div class="bg-primary p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
+
+
+ Change the border color using utilities built on our theme colors.
+ + +
+
+ <span class="border border-primary-subtle"></span>
+ <span class="border border-secondary-subtle"></span>
+ <span class="border border-success-subtle"></span>
+ <span class="border border-danger-subtle"></span>
+ <span class="border border-warning-subtle"></span>
+ <span class="border border-info-subtle"></span>
+ <span class="border border-light-subtle"></span>
+ <span class="border border-dark-subtle"></span>
+
+
+ Add classes to an element to easily round its corners.
+ + +
+
+
+
+
+
+
+
+
+ <img src="..." class="rounded" alt="...">
+ <img src="..." class="rounded-top" alt="...">
+ <img src="..." class="rounded-end" alt="...">
+ <img src="..." class="rounded-bottom" alt="...">
+ <img src="..." class="rounded-start" alt="...">
+ <img src="..." class="rounded-circle" alt="...">
+ <img src="..." class="rounded-pill" alt="...">
+
+
+ Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5.
+
+
+
+
+
+
+
+ <img src="..." class="rounded-0" alt="...">
+ <img src="..." class="rounded-1" alt="...">
+ <img src="..." class="rounded-2" alt="...">
+ <img src="..." class="rounded-3" alt="...">
+ <img src="..." class="rounded-4" alt="...">
+ <img src="..." class="rounded-5" alt="...">
+
+
+ Use user-select-all, user-select-auto, or
+ user-select-none class to the content which is selected when the user interacts with it.
+
This paragraph will be entirely selected when clicked by the user.
+This paragraph has default select behavior.
+This paragraph will not be selectable when clicked by the user.
+
+
+ <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
+ <p class="user-select-auto">This paragraph has default select behavior.</p>
+ <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
+
+
+ Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.
This link can not be clicked.
+This link can be clicked (this is default behavior).
+This link can not be clicked because the
+ pointer-events property is inherited from its parent. However, this
+ link has a pe-auto class and can be clicked.
+
+
+ <p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
+
+ <p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
+
+ <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the
+ <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this
+ link</a> has a <code>pe-auto</code> class and can be clicked.</p>
+
+
+ Adjust the overflow property on the fly with four default values and classes. These classes are not
+ responsive by default.
.overflow-auto on an element with set width and height dimensions. By
+ design, this content will vertically scroll.
+ .overflow-hidden on an element with set width and height dimensions.
+ .overflow-visible on an element with set width and height dimensions.
+ .overflow-scroll on an element with set width and height dimensions.
+
+
+ <div class="overflow-auto">...</div>
+ <div class="overflow-hidden">...</div>
+ <div class="overflow-visible">...</div>
+ <div class="overflow-scroll">...</div>
+
+
+ Arrange elements easily with the edge positioning utilities. The format is {property}-{position}.
+
+ <div class="position-relative">
+ <div class="position-absolute top-0 start-0"></div>
+ <div class="position-absolute top-0 end-0"></div>
+ <div class="position-absolute top-50 start-50"></div>
+ <div class="position-absolute bottom-50 end-50"></div>
+ <div class="position-absolute bottom-0 start-0"></div>
+ <div class="position-absolute bottom-0 end-0"></div>
+ </div>
+
+
+ In addition, you can also center the elements with the transform utility class .translate-middle.
+
+ <div class="position-relative">
+ <div class="position-absolute top-0 start-0 translate-middle"></div>
+ <div class="position-absolute top-0 start-50 translate-middle"></div>
+ <div class="position-absolute top-0 start-100 translate-middle"></div>
+ <div class="position-absolute top-50 start-0 translate-middle"></div>
+ <div class="position-absolute top-50 start-50 translate-middle"></div>
+ <div class="position-absolute top-50 start-100 translate-middle"></div>
+ <div class="position-absolute top-100 start-0 translate-middle"></div>
+ <div class="position-absolute top-100 start-50 translate-middle"></div>
+ <div class="position-absolute top-100 start-100 translate-middle"></div>
+ </div>
+
+
+ By adding .translate-middle-x or .translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.
+
+ <div class="position-relative">
+ <div class="position-absolute top-0 start-0"></div>
+ <div class="position-absolute top-0 start-50 translate-middle-x"></div>
+ <div class="position-absolute top-0 end-0"></div>
+ <div class="position-absolute top-50 start-0 translate-middle-y"></div>
+ <div class="position-absolute top-50 start-50 translate-middle"></div>
+ <div class="position-absolute top-50 end-0 translate-middle-y"></div>
+ <div class="position-absolute bottom-0 start-0"></div>
+ <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
+ <div class="position-absolute bottom-0 end-0"></div>
+ </div>
+
+
+ While shadows on components are disabled by default in Bootstrap and can be enabled via
+ $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility
+ classes. Includes support for .shadow-none and three default sizes (which have associated variables to
+ match).
+
+
+ <div class="shadow-none p-2 mb-2 bg-light rounded">No shadow</div>
+ <div class="shadow-sm p-2 mb-2 rounded">Small shadow</div>
+ <div class="shadow p-2 mb-2 rounded">Regular shadow</div>
+ <div class="shadow-lg p-2 mb-2 rounded">Larger shadow</div>
+
+
+ Width utilities are generated from the utility API in _utilities.scss. Includes support for
+ 25%, 50%, 75%, 100%, and auto by default. Modify
+ those values as you need to generate different utilities here.
+
+
+ <!-- Width -->
+ <div class="w-25 p-2 bg-light">Width 25%</div>
+
+ <div class="w-50 p-2 bg-light">Width 50%</div>
+
+ <div class="w-75 p-2 bg-light">Width 75%</div>
+
+ <div class="w-100 p-2 bg-light">Width 100%</div>
+
+ <div class="w-auto p-2 bg-light">Width auto</div>
+
+
+ Height utilities are generated from the utility API in _utilities.scss. Includes support for
+ 25%, 50%, 75%, 100%, and auto by default. Modify
+ those values as you need to generate different utilities here.
+
+
+ <!-- Height -->
+ <div class="h-25 p-2 bg-light">Height25%</div>
+
+ <div class="h-50 p-2 bg-light">Height50%</div>
+
+ <div class="h-75 p-2 bg-light">Height75%</div>
+
+ <div class="h-100 p-2 bg-light">Height100%</div>
+
+ <div class="h-auto p-2 bg-light">Height auto</div>
+
+
+ Change the value of the object-fit property with our responsive object-fit utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
+ .object-fit-contain
+ .object-fit-cover
+ .object-fit-fill
+ .object-fit-scale
+ .object-fit-none
+
+ <div class="d-flex align-items-start flex-wrap gap-3 text-center">
+ <div>
+ <img src="assets/images/small/small-1.jpg" class="object-fit-contain border rounded avatar-xl" alt="...">
+ <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-contain</code></p>
+ </div>
+ <div>
+ <img src="assets/images/small/small-1.jpg" class="object-fit-cover border rounded avatar-xl" alt="...">
+ <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-cover</code></p>
+ </div>
+ <div>
+ <img src="assets/images/small/small-1.jpg" class="object-fit-fill border rounded avatar-xl" alt="...">
+ <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-fill</code></p>
+ </div>
+ <div>
+ <img src="assets/images/small/small-1.jpg" class="object-fit-scale border rounded avatar-xl" alt="...">
+ <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-scale</code></p>
+ </div>
+ <div>
+ <img src="assets/images/small/small-1.jpg" class="object-fit-none border rounded avatar-xl" alt="...">
+ <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-none</code></p>
+ </div>
+ </div>
+
+
+ Use z-index utilities to stack elements on top of one another. Requires a position value other than static, which can be set with custom styles or using our position utilities.
+
+ <div class="position-relative" style="height: 220px;z-index: 1;">
+ <div class="z-3 position-absolute p-5 rounded-3 bg-primary-subtle"></div>
+ <div class="z-2 position-absolute p-5 m-2 rounded-3 bg-success-subtle"></div>
+ <div class="z-1 position-absolute p-5 m-3 rounded-3 bg-secondary-subtle"></div>
+ <div class="z-0 position-absolute p-5 m-4 rounded-3 bg-danger-subtle"></div>
+ <div class="z-n1 position-absolute p-5 m-5 rounded-3 bg-info-subtle"></div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ English
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Authorised Brand Seller
+ +Total Revenue
+Number of Orders
++ 3.27% +
++ 5.38% +
++ 4.87% +
++ 11.7% +
+
+ 10:00
+ + Hello! +
+
+ 10:01
+ + Hi, How are you? What about our next meeting? +
+
+ 10:01
+ + Yeah everything is fine +
+
+ 10:02
+ + Wow that's great +
+
+ + 5 minutes ago +
+
+
+