Municipalité
Alertes Municipales | Pour vous inscrire, cliquez ici Bootstrap 5.3.1
Couleurs perso
.c_pale
.c_base
.c_foncee
.c_pfoncee
.c_second_pale
.c_second_base
.c_second_foncee
.c_second_pfoncee
Couleurs de fond perso
Couleurs
Background
Texte
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
Dégradé
Alerts
Default alerts
Alerts with contextual background color.
Icon alerts
Alerts with icon and background color.
Outline alerts
Alerts with contextual icon background.
Colored outline alerts
Alerts with contextual outline color.
Alerts with additonal content
Alerts with large contents.
Well done!
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.
Well done!
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.
Alerts with buttons
Alerts with actions.
Well done!
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.
Well done!
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.
Buttons
Basic Buttons
Default Bootstrap buttons style.
Rounded Buttons
Rounded Bootstrap buttons.
Outline Buttons
Buttons without background color.
Square Buttons
Buttons without border radius.
Icon Buttons
Default Bootstrap buttons with icons.
Social Buttons
Social buttons with icons.
Button Sizes
Fancy larger or smaller buttons.
Button Dropdown
Dropdowns styles with buttons.
Button Group
Button group components.
Horizontal button group
Button toolbar
Vertical button group
Cards
Card with image and links
Card subtitle
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link
Card with image and button
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card with image and list
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card with links
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkCard with button
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with list
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card with tabs
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with tabs
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with tabs
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with pills
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with pills
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with pills
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereGeneral
Breadcrumbs
Indicate the current page’s location within a navigational hierarchy.
Images
Lightweight styles for images.
Popovers
Examples for adding Bootstrap popovers.
Tooltips
Examples for adding custom Bootstrap tooltips.
Badges
Examples for badges.
Dropdowns
Toggle contextual overlays for displaying lists of links.
Foncé:
Bouton :
Basic:
Active:
Disabled:
Header:
Dividers:
Text:
Pagination
Examples for showing pagination.
Progress Bars
Examples for using Bootstrap custom progress bars.
Spinners
Indicate the loading state of a component with Bootstrap spinners.
Modals
Default modal
Default Bootstrap modal.
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Colored modal
Colored Bootstrap modal.
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Centered modal
Vertically centered modal.
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal sizes
These sizes kick in at certain breakpoints to avoid scrollbars on smaller viewports.
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Default tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Another one
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
One more
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Colored tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Another one
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
One more
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Icon tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Another one
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
One more
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Colored icon tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Another one
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
One more
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque 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.
Vertical icon tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque dis parturient montes, nascetur ridiculus mus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
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.
Another one
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque dis parturient montes, nascetur ridiculus mus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
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.
One more
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque dis parturient montes, nascetur ridiculus mus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
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.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Colored vertical icon tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque dis parturient montes, nascetur ridiculus mus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
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.
Another one
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque dis parturient montes, nascetur ridiculus mus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
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.
One more
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor tellus eget condimentum rhoncus. Aenean massa. Cum sociis natoque penatibus et magnis neque dis parturient montes, nascetur ridiculus mus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
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.
Form Layouts
Basic form
Default Bootstrap form layout.
Horizontal form
Horizontal Bootstrap layout.
Form row
Bootstrap column layout.
Inline form
Single horizontal row.
Basic Inputs
Input
Textarea
Checkboxes
Sizes
Radios
Switches
Selects
Disabled
Read only
Default
Checkbox and radio addons
Sizing
Select addons
Button addons
Buttons with dropdowns
Segmented buttons
Font Awesome Icons
The web’s most popular icon set and toolkit
Solid icons
Regular icons
Brand icons
Feather
Feather Icons
Simply beautiful open source icons
Custom validation
Bootstrap form validation messages. See official documentation here.
Browser validation
If you're not interested in writing JavaScript to change form behaviors. See official documentation here.
Server side validation
In case you want to use server-side validation, you can use .is-invalid
and .is-valid. See official documentation here.
| # | Nom | Compagnie | Courriel | Statut |
|---|---|---|---|---|
 |
Garrett Winters | Good Guys | garrett@winters.com | Active |
|
Ashton Cox | Levitz Furniture | ashton@cox.com | Active |
|
Sonya Frost | Child World | sonya@frost.com | Deleted |
|
Jena Gaines | Helping Hand | jena@gaines.com | Inactive |
|
Charde Marshall | Price Savers | charde@marshall.com | Active |
|
Haley Kennedy | Helping Hand | haley@kennedy.com | Deleted |
|
Tatyana Fitzpatrick | Good Guys | tatyana@fitzpatrick.com | Active |
|
Michael Silva | Red Robin Stores | michael@silva.com | Active |
|
Angelica Ramos | The Wiz | angelica@ramos.com | Active |
|
Jennifer Chang | Helping Hand | jennifer@chang.com | Inactive |
|
Brenden Wagner | The Wiz | brenden@wagner.com | Inactive |
|
Fiona Green | The Sample | fiona@green.com | Inactive |
|
Prescott Bartlett | The Sample | prescott@bartlett.com | Active |
|
Gavin Cortez | Red Robin Stores | gavin@cortez.com | Active |
|
Howard Hatfield | Price Savers | howard@hatfield.com | Inactive |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
| Name | Angelica Ramos |
|---|---|
| Company | The Wiz |
| angelica@ramos.com | |
| Phone | +1234123123123 |
| Status | Active |
-
Signed out
30m ago
Nam pretium turpis et arcu. Duis arcu tortor, suscipit...
-
Created invoice #1204
2h ago
Sed aliquam ultrices mauris. Integer ante arcu...
-
Discarded invoice #1147
3h ago
Nam pretium turpis et arcu. Duis arcu tortor, suscipit...
-
Signed in
3h ago
Curabitur ligula sapien, tincidunt non, euismod vitae...
-
Signed up
2d ago
Sed aliquam ultrices mauris. Integer ante arcu...
Profile
Activities
Today 7:51 pm
Today 7:21 pm
Today 6:35 pm
Yesterday 3:12 pm
Yesterday 2:43 pm
Yesterdag 1:51 pm
Load more
Invoice
This is the receipt for a payment of $268.00 (USD) you made to AdminKit Demo.
4183 Forest Avenue
New York City
10011
USA
chris.wood@gmail.com
354 Roy Alley
Denver
80202
USA
info@adminkit.com
| Description | Quantity | Amount |
|---|---|---|
| AdminKit Demo Theme Customization | 2 | $150.00 |
| Monthly Subscription | 3 | $25.00 |
| Additional Service | 1 | $100.00 |
| Subtotal | $275.00 | |
| Shipping | $8.00 | |
| Discount | 5% | |
| Total | $268.85 |
Extra note: Please send all items at the same time to the shipping address. Thanks in advance.
Print this receiptTables
Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
Striped Rows
Use .table-striped to add zebra-striping to any table row within the
<tbody>.
Condensed Table
Add .table-sm to make tables more compact by cutting cell padding in half.
| Operation System | Users | Share |
|---|---|---|
| Windows | 8.232 | 40% |
| Mac OS | 3.322 | 20% |
| Linux | 4.232 | 34% |
| FreeBSD | 1.121 | 12% |
| Chrome OS | 1.331 | 15% |
| Android | 2.301 | 20% |
| iOS | 1.162 | 14% |
| Windows Phone | 562 | 7% |
| Other | 1.181 | 14% |
Hoverable Rows
Add .table-hover to enable a hover state on table rows within a
<tbody>.
| Name | Phone Number | Date of Birth |
|---|---|---|
|
Vanessa
Tucker
|
864-348-0485 | June 21, 1961 |
|
William
Harris
|
914-939-2458 | May 15, 1948 |
|
Sharon
Lessman
|
704-993-5435 | September 14, 1965 |
|
Christina
Mason
|
765-382-8195 | April 2, 1971 |
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
Contextual Classes
Use contextual classes to color table rows or individual cells.
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling
tables.
| # | 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 |
Typography
Headings
All HTML headings, <h4> through <h6>, are
available.
This is a heading h4
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero.
This is a heading h2
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
This is a heading h3
Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, vel.
This is a heading h4
Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, vel.
This is a heading h5
Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.
This is a heading h6
Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.
Coloured text
Contextual text classes.
This line of text contains the text-primary class.
This line of text contains the text-secondary class.
This line of text contains the text-success class.
This line of text contains the text-danger class.
This line of text contains the text-warning class.
This line of text contains the text-info class.
Inline text
Styling for common inline HTML5 elements.
You can use the mark-tag to highlight text.
This line of text can be treated as deleted text.
This line of text can be treated as an addition to the document.
Bold text using the strong-tag
Italicized text using the em-tag
Blockquotes
For quoting blocks of content from another source within your document.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Add .blockquote-reverse
for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
List unordered
The unordered list items will are marked with bullets.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Eget porttitor lorem
List ordered
The ordered list items will are marked with numbers.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Eget porttitor lorem
Municipalité de Saint-Pacôme - Tous droits réservés.
