CREBSLConseil régional de l’environnement du Bas-Saint-Laurent
17 mars 2021

Recherche
Bootstrap 5

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

.f_pale
.f_base
.f_foncee
.f_pfoncee
.f_second_pale
.f_second_base
.f_second_foncee
.f_second_pfoncee

Couleurs

Background
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
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é
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient

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.
Alerts with buttons
Alerts with actions.

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 Group
Button group components.
Horizontal button group


Button toolbar
Vertical button group

Cards

Unsplash
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
Unsplash
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
Unsplash
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 link
Card with 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 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 somewhere
Card with tabs

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card with tabs

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card with pills

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card with pills

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card with pills

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

General

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Breadcrumbs
Indicate the current page’s location within a navigational hierarchy.
Images
Lightweight styles for images.
Placeholder Placeholder Placeholder
Popovers
Examples for adding Bootstrap popovers.
Tooltips
Examples for adding custom Bootstrap tooltips.
Badges
Examples for badges.
Primary Secondary Success Danger Warning Info
Primary Secondary Success Danger Warning Info
Dropdowns
Toggle contextual overlays for displaying lists of links.
Pagination
Examples for showing pagination.
Progress Bars
Examples for using Bootstrap custom progress bars.
Default
Striped
Animated
Stacked
15%
30%
20%
Spinners
Indicate the loading state of a component with Bootstrap spinners.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

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.

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.
Example block-level help text here.
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
@
@example.com
https://example.com/users/
$ .00
$ 0.00
Checkbox and radio addons
Sizing
@
@
@
Select addons
Button addons

Font Awesome Icons

The web’s most popular icon set and toolkit
Solid icons
ad
address-book
address-card
adjust
air-freshener
align-center
align-justify
align-left
align-right
allergies
ambulance
american-sign-language-interpreting
anchor
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
angry
ankh
apple-alt
archive
archway
arrow-alt-circle-down
arrow-alt-circle-left
arrow-alt-circle-right
arrow-alt-circle-up
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows-alt
arrows-alt-h
arrows-alt-v
assistive-listening-systems
asterisk
at
atlas
atom
audio-description
award
backspace
backward
balance-scale
ban
band-aid
barcode
bars
baseball-ball
basketball-ball
bath
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
bed
beer
bell
bell-slash
bezier-curve
bible
bicycle
binoculars
birthday-cake
blender
blind
bold
bolt
bomb
bone
bong
book
book-open
book-reader
bookmark
bowling-ball
box
box-open
boxes
braille
brain
briefcase
briefcase-medical
broadcast-tower
broom
brush
bug
building
bullhorn
bullseye
burn
bus
bus-alt
business-time
calculator
calendar
calendar-alt
calendar-check
calendar-minus
calendar-plus
calendar-times
camera
camera-retro
cannabis
capsules
car
car-alt
car-battery
car-crash
car-side
caret-down
caret-left
caret-right
caret-square-down
caret-square-left
caret-square-right
caret-square-up
caret-up
cart-arrow-down
cart-plus
certificate
chalkboard
chalkboard-teacher
charging-station
chart-area
chart-bar
chart-line
chart-pie
check
check-circle
check-double
check-square
chess
chess-bishop
chess-board
chess-king
chess-knight
chess-pawn
chess-queen
chess-rook
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
child
church
circle
circle-notch
city
clipboard
clipboard-check
clipboard-list
clock
clone
closed-captioning
cloud
cloud-download-alt
cloud-upload-alt
cocktail
code
code-branch
coffee
cog
cogs
coins
columns
comment
comment-alt
comment-dollar
comment-dots
comment-slash
comments
comments-dollar
compact-disc
compass
compress
concierge-bell
cookie
cookie-bite
copy
copyright
couch
credit-card
crop
crop-alt
cross
crosshairs
crow
crown
cube
cubes
cut
database
deaf
desktop
dharmachakra
diagnoses
dice
dice-five
dice-four
dice-one
dice-six
dice-three
dice-two
digital-tachograph
directions
divide
dizzy
dna
dollar-sign
dolly
dolly-flatbed
donate
door-closed
door-open
dot-circle
dove
download
drafting-compass
draw-polygon
drum
drum-steelpan
dumbbell
edit
eject
ellipsis-h
ellipsis-v
envelope
envelope-open
envelope-open-text
envelope-square
equals
eraser
euro-sign
exchange-alt
exclamation
exclamation-circle
exclamation-triangle
expand
expand-arrows-alt
external-link-alt
external-link-square-alt
eye
eye-dropper
eye-slash
fast-backward
fast-forward
fax
feather
feather-alt
female
fighter-jet
file
file-alt
file-archive
file-audio
file-code
file-contract
file-download
file-excel
file-export
file-image
file-import
file-invoice
file-invoice-dollar
file-medical
file-medical-alt
file-pdf
file-powerpoint
file-prescription
file-signature
file-upload
file-video
file-word
fill
fill-drip
film
filter
fingerprint
fire
fire-extinguisher
first-aid
fish
flag
flag-checkered
flask
flushed
folder
folder-minus
folder-open
folder-plus
font
font-awesome-logo-full
football-ball
forward
frog
frown
frown-open
funnel-dollar
futbol
gamepad
gas-pump
gavel
gem
genderless
gift
glass-martini
glass-martini-alt
glasses
globe
globe-africa
globe-americas
globe-asia
golf-ball
gopuram
graduation-cap
greater-than
greater-than-equal
grimace
grin
grin-alt
grin-beam
grin-beam-sweat
grin-hearts
grin-squint
grin-squint-tears
grin-stars
grin-tears
grin-tongue
grin-tongue-squint
grin-tongue-wink
grin-wink
grip-horizontal
grip-vertical
h-square
hamsa
hand-holding
hand-holding-heart
hand-holding-usd
hand-lizard
hand-paper
hand-peace
hand-point-down
hand-point-left
hand-point-right
hand-point-up
hand-pointer
hand-rock
hand-scissors
hand-spock
hands
hands-helping
handshake
hashtag
hdd
heading
headphones
headphones-alt
italic
joint
key
keyboard
kiss
kiss-beam
kiss-wink-heart
kiwi-bird
language
laptop
laugh
laugh-beam
laugh-squint
laugh-wink
leaf
lemon
less-than
less-than-equal
level-down-alt
level-up-alt
life-ring
lightbulb
link
lira-sign
list
list-alt
list-ol
list-ul
location-arrow
lock
lock-open
long-arrow-alt-down
long-arrow-alt-left
long-arrow-alt-right
long-arrow-alt-up
low-vision
luggage-cart
magic
magnet
male
map
map-marked
map-marked-alt
map-marker
map-marker-alt
map-pin
map-signs
marker
mars
mars-double
mars-stroke
mars-stroke-h
mars-stroke-v
medal
medkit
meh
meh-blank
meh-rolling-eyes
memory
mercury
microchip
microphone
microphone-alt
microphone-alt-slash
microphone-slash
minus
minus-circle
minus-square
mobile
mobile-alt
money-bill
money-bill-alt
money-bill-wave
money-bill-wave-alt
money-check
money-check-alt
monument
moon
mortar-pestle
motorcycle
mouse-pointer
music
neuter
newspaper
not-equal
notes-medical
object-group
object-ungroup
outdent
paint-brush
paint-roller
palette
pallet
paper-plane
paperclip
parachute-box
paragraph
parking
passport
paste
pause
pause-circle
paw
pen
pen-alt
pen-fancy
pen-nib
pen-square
pencil-alt
pencil-ruler
people-carry
percent
percentage
phone
phone-slash
phone-square
phone-volume
piggy-bank
pills
plane
plane-arrival
plane-departure
play
play-circle
plug
plus
plus-circle
plus-square
podcast
poo
portrait
pound-sign
power-off
prescription
prescription-bottle
prescription-bottle-alt
print
procedures
project-diagram
puzzle-piece
qrcode
question
question-circle
quidditch
quote-left
quote-right
random
receipt
recycle
redo
redo-alt
registered
reply
reply-all
retweet
ribbon
road
robot
rocket
rss
rss-square
ruble-sign
ruler
ruler-combined
ruler-horizontal
ruler-vertical
rupee-sign
sad-cry
sad-tear
save
school
screwdriver
search
search-minus
search-plus
seedling
server
share
share-alt
share-alt-square
share-square
shekel-sign
shield-alt
ship
shipping-fast
shoe-prints
shopping-bag
shopping-basket
shopping-cart
shower
shuttle-van
sign
sign-in-alt
sign-language
sign-out-alt
signal
signature
sitemap
skull
sliders-h
smile
smile-beam
smile-wink
smoking
smoking-ban
snowflake
solar-panel
sort
sort-alpha-down
sort-alpha-up
sort-amount-down
sort-amount-up
sort-down
sort-numeric-down
sort-numeric-up
sort-up
spa
space-shuttle
spinner
splotch
spray-can
square
square-full
stamp
star
star-half
star-half-alt
step-backward
step-forward
stethoscope
sticky-note
stop
stop-circle
stopwatch
store
store-alt
stream
street-view
strikethrough
stroopwafel
subscript
subway
suitcase
suitcase-rolling
sun
superscript
surprise
swatchbook
swimmer
swimming-pool
sync
sync-alt
syringe
table
table-tennis
tablet
tablet-alt
tablets
tachometer-alt
tag
tags
tape
tasks
taxi
terminal
text-height
text-width
th
th-large
th-list
thermometer
thermometer-empty
thermometer-full
thermometer-half
thermometer-quarter
thermometer-three-quarters
thumbs-down
thumbs-up
thumbtack
ticket-alt
times
times-circle
tint
tint-slash
tired
toggle-off
toggle-on
toolbox
tooth
trademark
train
transgender
transgender-alt
trash
trash-alt
tree
trophy
truck
truck-loading
truck-moving
tshirt
tty
tv
umbrella
umbrella-beach
underline
undo
undo-alt
universal-access
university
unlink
unlock
unlock-alt
upload
user
user-alt
user-alt-slash
user-astronaut
user-check
user-circle
user-clock
user-cog
user-edit
user-friends
user-graduate
user-lock
user-md
user-minus
user-ninja
user-plus
user-secret
user-shield
user-slash
user-tag
user-tie
user-times
users
users-cog
utensil-spoon
utensils
vector-square
venus
venus-double
venus-mars
vial
vials
video
video-slash
volleyball-ball
volume-down
volume-off
volume-up
walking
wallet
warehouse
weight
weight-hanging
wheelchair
wifi
window-close
window-maximize
window-minimize
window-restore
wine-glass
wine-glass-alt
won-sign
wrench
x-ray
yen-sign
yin-yang

Regular icons
address-book
address-card
angry
arrow-alt-circle-down
arrow-alt-circle-left
arrow-alt-circle-right
arrow-alt-circle-up
bell
bell-slash
bookmark
building
calendar
calendar-alt
calendar-check
calendar-minus
calendar-plus
calendar-times
caret-square-down
caret-square-left
caret-square-right
caret-square-up
chart-bar
check-circle
check-square
circle
clipboard
clock
clone
closed-captioning
comment
comment-alt
comment-dots
comments
compass
copy
copyright
credit-card
dizzy
dot-circle
edit
envelope
envelope-open
eye
eye-slash
file
file-alt
file-archive
file-audio
file-code
file-excel
file-image
file-pdf
file-powerpoint
file-video
file-word
flag
flushed
folder
folder-open
font-awesome-logo-full
frown
frown-open
futbol
gem
grimace
grin
grin-alt
grin-beam
grin-beam-sweat
grin-hearts
grin-squint
grin-squint-tears
grin-stars
grin-tears
grin-tongue
grin-tongue-squint
grin-tongue-wink
grin-wink
hand-lizard
hand-paper
hand-peace
hand-point-down
hand-point-left
hand-point-right
hand-point-up
hand-pointer
hand-rock
hand-scissors
hand-spock
handshake
hdd
heart
hospital
hourglass
id-badge
id-card
image
images
keyboard
kiss
kiss-beam
kiss-wink-heart
laugh
laugh-beam
laugh-squint
laugh-wink
lemon
life-ring
lightbulb
list-alt
map
meh
meh-blank
meh-rolling-eyes
minus-square
money-bill-alt
moon
newspaper
object-group
object-ungroup
paper-plane
pause-circle
play-circle
plus-square
question-circle
registered
sad-cry
sad-tear
save
share-square
smile
smile-beam
smile-wink
snowflake
square
star
star-half
sticky-note
stop-circle
sun
surprise
thumbs-down
thumbs-up
times-circle
tired
trash-alt
user
user-circle
window-close
window-maximize
window-minimize
window-restore

Brand icons
500px
accessible-icon
accusoft
adn
adversal
affiliatetheme
algolia
alipay
amazon
amazon-pay
amilia
android
angellist
angrycreative
angular
app-store
app-store-ios
apper
apple
apple-pay
asymmetrik
audible
autoprefixer
avianex
aviato
aws
bandcamp
behance
behance-square
bimobject
bitbucket
bitcoin
bity
black-tie
blackberry
blogger
blogger-b
bluetooth
bluetooth-b
btc
buromobelexperte
cc-amazon-pay
cc-amex
cc-apple-pay
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
centercode
chrome
cloudscale
cloudsmith
cloudversify
codepen
codiepie
connectdevelop
contao
cpanel
creative-commons
creative-commons-by
creative-commons-nc
creative-commons-nc-eu
creative-commons-nc-jp
creative-commons-nd
creative-commons-pd
creative-commons-pd-alt
creative-commons-remix
creative-commons-sa
creative-commons-sampling
creative-commons-sampling-plus
creative-commons-share
css3
css3-alt
cuttlefish
d-and-d
dashcube
delicious
deploydog
deskpro
deviantart
digg
digital-ocean
discord
discourse
dochub
docker
draft2digital
dribbble
dribbble-square
dropbox
drupal
dyalog
earlybirds
ebay
edge
elementor
ello
ember
empire
envira
erlang
ethereum
etsy
expeditedssl
facebook
facebook-f
facebook-messenger
facebook-square
firefox
first-order
first-order-alt
firstdraft
flickr
flipboard
fly
font-awesome
font-awesome-alt
font-awesome-flag
font-awesome-logo-full
fonticons
fonticons-fi
fort-awesome
fort-awesome-alt
forumbee
foursquare
free-code-camp
freebsd
fulcrum
galactic-republic
galactic-senate
get-pocket
gg
gg-circle
git
git-square
github
github-alt
github-square
gitkraken
gitlab
gitter
glide
glide-g
gofore
goodreads
goodreads-g
google
google-drive
google-play
google-plus
google-plus-g
google-plus-square
google-wallet
gratipay
grav
gripfire
grunt
gulp
hacker-news
hacker-news-square
hackerrank
hips
hire-a-helper
hooli
hornbill
hotjar
houzz
html5
hubspot
imdb
instagram
internet-explorer
ioxhost
itunes
itunes-note
java
jedi-order
jenkins
joget
joomla
js
js-square
jsfiddle
kaggle
keybase
keycdn
kickstarter
kickstarter-k
korvue
laravel
lastfm
lastfm-square
leanpub
less
line
linkedin
linkedin-in
linode
linux
lyft
magento
mailchimp
mandalorian
markdown
mastodon
maxcdn
medapps
medium
medium-m
medrt
meetup
megaport
microsoft
mix
mixcloud
mizuni
modx
monero
napster
neos
nimblr
nintendo-switch
node
node-js
npm
ns8
nutritionix
odnoklassniki
odnoklassniki-square
old-republic
opencart
openid
opera
optin-monster
osi
page4
pagelines
palfed
patreon
paypal
periscope
phabricator
phoenix-framework
phoenix-squadron
php
pied-piper
pied-piper-alt
pied-piper-hat
pied-piper-pp
pinterest
pinterest-p
pinterest-square
playstation
product-hunt
pushed
python
qq
quinscape
quora
r-project
ravelry
react
readme
rebel
red-river
reddit
reddit-alien
reddit-square
renren
replyd
researchgate
resolving
rev
rocketchat
rockrms
safari
sass
schlix
scribd
searchengin
sellcast
sellsy
servicestack
shirtsinbulk
shopware
simplybuilt
sistrix
sith
skyatlas
skype
slack
slack-hash
slideshare
snapchat
snapchat-ghost
snapchat-square
soundcloud
speakap
spotify
squarespace
stack-exchange
stack-overflow
staylinked
steam
steam-square
steam-symbol
sticker-mule
strava
stripe
stripe-s
studiovinari
stumbleupon
stumbleupon-circle
superpowers
supple
teamspeak
telegram
telegram-plane
tencent-weibo
the-red-yeti
themeco
themeisle
trade-federation
trello
tripadvisor
tumblr
tumblr-square
twitch
twitter
twitter-square
typo3
uber
uikit
uniregistry
untappd
usb
ussunnah
vaadin
viacoin
viadeo
viadeo-square
viber
vimeo
vimeo-square
vimeo-v
vine
vk
vnv
vuejs
weebly
weibo
weixin
whatsapp
whatsapp-square
whmcs
wikipedia-w
windows
wix
wolf-pack-battalion
wordpress
wordpress-simple
wpbeginner
wpexplorer
wpforms
xbox
xing
xing-square
y-combinator
yahoo
yandex
yandex-international
yelp
yoast
youtube
youtube-square
zhihu

Feather

Feather Icons

Simply beautiful open source icons
activity
airplay
alert-circle
alert-octagon
alert-triangle
align-center
align-justify
align-left
align-right
anchor
aperture
arrow-down
arrow-down-circle
arrow-down-left
arrow-down-right
arrow-left
arrow-left-circle
arrow-right
arrow-right-circle
arrow-up
arrow-up-circle
arrow-up-left
arrow-up-right
at-sign
award
bar-chart
bar-chart-2
battery
battery-charging
bell
bell-off
bluetooth
bold
book
book-open
bookmark
box
briefcase
calendar
camera
camera-off
cast
check
check-circle
check-square
chevron-down
chevron-left
chevron-right
chevron-up
chevrons-down
chevrons-left
chevrons-right
chevrons-up
chrome
circle
clipboard
clock
cloud
cloud-drizzle
cloud-lightning
cloud-off
cloud-rain
cloud-snow
code
codepen
command
compass
copy
corner-down-left
corner-down-right
corner-left-down
corner-left-up
corner-right-down
corner-right-up
corner-up-left
corner-up-right
cpu
credit-card
crop
crosshair
database
delete
disc
dollar-sign
download
download-cloud
droplet
edit
edit-2
edit-3
external-link
eye
eye-off
facebook
fast-forward
feather
file
file-minus
file-plus
file-text
film
filter
flag
folder
folder-minus
folder-plus
git-branch
git-commit
git-merge
git-pull-request
github
gitlab
globe
grid
hard-drive
hash
headphones
heart
help-circle
home
image
inbox
info
instagram
italic
layers
layout
link
link-2
linkedin
list
loader
lock
log-in
log-out
mail
map
map-pin
maximize
maximize-2
menu
message-circle
message-square
mic
mic-off
minimize
minimize-2
minus
minus-circle
minus-square
monitor
moon
more-horizontal
more-vertical
move
music
navigation
navigation-2
octagon
package
paperclip
pause
pause-circle
percent
phone
phone-call
phone-forwarded
phone-incoming
phone-missed
phone-off
phone-outgoing
pie-chart
play
play-circle
plus
plus-circle
plus-square
pocket
power
printer
radio
refresh-ccw
refresh-cw
repeat
rewind
rotate-ccw
rotate-cw
rss
save
scissors
search
send
server
settings
share
share-2
shield
shield-off
shopping-bag
shopping-cart
shuffle
sidebar
skip-back
skip-forward
slack
slash
sliders
smartphone
speaker
square
star
stop-circle
sun
sunrise
sunset
tablet
tag
target
terminal
thermometer
thumbs-down
thumbs-up
toggle-left
toggle-right
trash
trash-2
trending-down
trending-up
triangle
truck
tv
twitter
type
umbrella
underline
unlock
upload
upload-cloud
user
user-check
user-minus
user-plus
user-x
users
video
video-off
voicemail
volume
volume-1
volume-2
volume-x
watch
wifi
wifi-off
wind
x
x-circle
x-square
zap
zap-off
zoom-in
zoom-out
Custom validation
Bootstrap form validation messages. See official documentation here.
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
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.
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
Landing page redesign
Finished

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Avatar Avatar Avatar
  • Progress 100%

Company posters
In progress

Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa.

Avatar Avatar Avatar
  • Progress 75%

Product page design
Finished

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Avatar Avatar Avatar
  • Progress 100%

Upgrade CRM software
In progress

Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.

Avatar Avatar Avatar
  • Progress 50%

Unsplash
Fix form validation
In progress

Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.

Avatar Avatar Avatar
  • Progress 65%

Unsplash
New company logo
On hold

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Avatar Avatar Avatar
  • Progress 20%

Unsplash TTTTTTTTTTTTTTTTTTEEEEEEEEEEEEEEEESSSSSSSSSSSSSSSSSSSSTTTTTTTTTTTTTTT
Upgrade to latest Maps API
Finished

Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.

Avatar Avatar Avatar
  • Progress 100%

Unsplash
Refactor backend templates
On hold

Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa.

Avatar Avatar Avatar
  • Progress 0%

# Nom Compagnie Courriel Statut
Avatar Garrett Winters Good Guys garrett@winters.com Active
Avatar Ashton Cox Levitz Furniture ashton@cox.com Active
Avatar Sonya Frost Child World sonya@frost.com Deleted
Avatar Jena Gaines Helping Hand jena@gaines.com Inactive
Avatar Charde Marshall Price Savers charde@marshall.com Active
Avatar Haley Kennedy Helping Hand haley@kennedy.com Deleted
Avatar Tatyana Fitzpatrick Good Guys tatyana@fitzpatrick.com Active
Avatar Michael Silva Red Robin Stores michael@silva.com Active
Avatar Angelica Ramos The Wiz angelica@ramos.com Active
Avatar Jennifer Chang Helping Hand jennifer@chang.com Inactive
Avatar Brenden Wagner The Wiz brenden@wagner.com Inactive
Avatar Fiona Green The Sample fiona@green.com Inactive
Avatar Prescott Bartlett The Sample prescott@bartlett.com Active
Avatar Gavin Cortez Red Robin Stores gavin@cortez.com Active
Avatar Howard Hatfield Price Savers howard@hatfield.com Inactive
Angelica Ramos
About me

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
Email angelica@ramos.com
Phone +1234123123123
Status Active
Activity
  • 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

Profile Details
Christina Mason
Christina Mason
Lead Developer


About

Activities
Vanessa Tucker
5m ago Vanessa Tucker started following Christina Mason
Today 7:51 pm

Charles Hall
30m ago Charles Hall posted something on Christina Mason's timeline
Today 7:21 pm
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 venenatis faucibus. Nullam quis ante.
Like

Christina Mason
1h ago Christina Mason posted a new blog
Today 6:35 pm

William Harris
3h ago William Harris posted two photos on Christina Mason's timeline
Today 5:12 pm
Unsplash
Unsplash
Like

William Harris
1d ago William Harris started following Christina Mason
Yesterday 3:12 pm
Christina Mason
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Christina Mason
1d ago Christina Mason posted a new blog
Yesterday 2:43 pm

Charles Hall
1d ago Charles Hall started following Christina Mason
Yesterdag 1:51 pm

Load more

Invoice

Hello Charles Hall,
This is the receipt for a payment of $268.00 (USD) you made to AdminKit Demo.
Payment No.
741037024
Payment Date
October 2, 2018 - 03:45 pm

Client
Charles Hall

4183 Forest Avenue
New York City
10011
USA
chris.wood@gmail.com

Payment To
AdminKit Demo LLC

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 receipt

Tables

Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
Name Phone Number Date of Birth Actions
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
Robin Schneiders 202-672-1407 October 12, 1966
Striped Rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Name Phone Number Date of Birth Actions
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
Robin Schneiders 202-672-1407 October 12, 1966
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
Avatar Vanessa Tucker 864-348-0485 June 21, 1961
Avatar William Harris 914-939-2458 May 15, 1948
Avatar Sharon Lessman 704-993-5435 September 14, 1965
Avatar Christina Mason 765-382-8195 April 2, 1971
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
Name Phone Number Date of Birth Actions
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
Robin Schneiders 202-672-1407 October 12, 1966
Contextual Classes
Use contextual classes to color table rows or individual cells.
Name Phone Number Date of Birth Actions
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
Robin Schneiders 202-672-1407 October 12, 1966
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.

Someone famous in Source Title

Add .blockquote-reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
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.
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
  4. Phasellus iaculis neque
  5. Eget porttitor lorem

Copyright © 2011-2023 Conseil régional de l’environnement du Bas-Saint-Laurent CREBSL - Tous droits réservés.