Multi-columns
Border Left
Border Right
Interface utilisateur
.container .row .col-md-9
Bootstrap TLDR
CSS
Typography
h1 small
h3 small
h5 small
b (bold)
strong
.small
i (italic)
ins
u (underline)
codevar
samp
kbd
.pull-lft
.text-center
.pull-rght
blockquote p
blockquote.blockquote-reverse p
ul
- li
-
List item
- ul li
- List item
- List item
ol
- List item
-
List item
- List item
- List item
- List item
ul.list-unstyled
- List item
-
List item
- List item
- List item
- List item
ul.list-inline
- List item
- List item
- List item
dl
- dt
- dd
- Term
- Description
Description
dl.dl-horizontal
- Term
- Description
- Long term will be truncated
- Description
Description
Tables
table.table
| thead tr th | th | Header | Header |
|---|---|---|---|
| tbody tr td | td | Data | Data |
| Data | Data | Data | Data |
.table-striped
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
.table-bordered
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
.table-hover
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
.table-condensed
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
div.table-responsive table.table
| Header | Header | Header | Header | Header |
|---|---|---|---|---|
| td.active | td.success | td.info | td.warning | td.danger |
| tr.active td | Applies the hover color to a particular row or cell | |||
| tr.success td | Indicates a successful or positive action | |||
| tr.info td | Indicates a neutral informative change or action | |||
| tr.warning td | Indicates a warning that might need attention | |||
| tr.danger td | Indicates a dangerous or potentially negative action | |||
Forms
form
form.form-inline
form.
Validation styles on form controls
Buttons
Images
.img-rounded
.rounded-circle
.img-thumbnail
.img-fluid
Helper classes
.text-muted .text-primary .text-success .text-info .text-warning .text-danger
.bg-primary .bg-success .bg-info .bg-warning .bg-danger
button.close →
.caret
.clearfix
.center-block: Set an element to display: block and center via margin.
.show and .hidden: Showing and hiding content.
.invisible: Toggle only the visibility of an element.
.sr-only: Hide an element to all devices except screen readers.
.text-hide: Replace an Element's text content with a background image.
Components
Material Design Icons
Material Design Icons classes:
mdi mdi-*
- asterisk
- plus
- minus
- ok
- remove
- remove-circle
- ok-circle
- ban-circle
- copyright-mark
- registration-mark
- chevron-left
- chevron-right
- chevron-up
- chevron-down
- arrow-left
- arrow-right
- arrow-up
- arrow-down
- hand-left
- hand-right
- hand-up
- hand-down
- thumbs-up
- thumbs-down
- circle-arrow-left
- circle-arrow-right
- circle-arrow-up
- circle-arrow-down
- signal
- envelope
- inbox
- cloud
- cloud-download
- cloud-upload
- download-alt
- download
- upload
- transfer
- share-alt
- send
- retweet
- open
- save
- saved
- import
- export
- play
- pause
- stop
- eject
- fast-backward
- step-backward
- backward
- forward
- step-forward
- fast-forward
- zoom-in
- zoom-out
- fullscreen
- resize-full
- resize-small
- resize-vertical
- resize-horizontal
- eye-open
- eye-close
- check
- unchecked
- expand
- collapse-down
- collapse-up
- log-in
- log-out
- new-window
- edit
- share
- font
- bold
- italic
- header
- text-height
- text-width
- align-left
- align-center
- align-right
- align-justify
- indent-left
- indent-right
- list
- list-alt
- th-list
- th-large
- th
- filter
- sort
- sort-by-alphabet
- sort-by-alphabet-alt
- sort-by-order
- sort-by-order-alt
- sort-by-attributes
- sort-by-attributes-alt
- floppy-disk
- floppy-saved
- floppy-remove
- floppy-save
- floppy-open
- home
- dashboard
- tasks
- stats
- link
- comment
- calendar
- time
- user
- certificate
- qrcode
- barcode
- globe
- tower
- road
- tree-conifer
- tree-deciduous
- leaf
- heart
- heart-empty
- star
- star-empty
- flash
- fire
- search
- flag
- pencil
- wrench
- cog
- cutlery
- plane
- trash
- shopping-cart
- briefcase
- gift
- glass
- phone-alt
- earphone
- phone
- bullhorn
- bell
- hdd
- folder-close
- folder-open
- file
- tags
- tag
- book
- bookmark
- lock
- compressed
- magnet
- paperclip
- pushpin
- plus-sign
- minus-sign
- remove-sign
- ok-sign
- question-sign
- info-sign
- exclamation-sign
- warning-sign
- picture
- map-marker
- adjust
- tint
- move
- screenshot
- film
- camera
- facetime-video
- sd-video
- hd-video
- subtitles
- music
- headphones
- volume-off
- volume-down
- volume-up
- play-circle
- repeat
- record
- off
- random
- refresh
- sound-stereo
- sound-dolby
- sound-5-1
- sound-6-1
- sound-7-1
- credit-card
- euro
- usd
- gbp
Dropdowns
.dropdown ul.dropdown-menu
Button groups
.btn-group
.btn-toolbar .btn-group
.btn-group.dropup
Input groups
.input-group
.input-group-lg
.input-group-sm
Navs
ul.nav.nav-tabs
ul.nav.nav-pills
ul.nav.nav-pills.nav-stacked
ul.nav.nav-tabs.nav-justified
ul.nav.nav-pills.nav-justified
Navbar
.navbar.navbar-default .container-fluid
.navbar.navbar-inverse .container-fluid
Complex navbar with navbar-left, navbar-right and navbar-collapse.
Breadcrumbs
ol.breadcrumb
Pagination
Labels
.label.label-default .label.label-primary .label.label-success .label.label-info .label.label-warning .label.label-danger
Jumbotron
.jumbotron
Page header
.page-header h3 small
Thumbnails
.thumbnail
.thumbnail
.thumbnail
.thumbnail
Alerts
Progress bars
.progress
.progress .progress-bar.progress-bar-striped
.progress.active .progress-bar.progress-bar-striped
Media object
.media-body h4.media-heading
← a.media-left img.media-object
.media-body h4.media-heading
← a.media-left.media-middle img.media-object
.media .media-body h4.media-heading
← a.media-left img.media-object-
li.media .media-body h4.media-heading
← a.media-left.media-bottom img.media-object
.media .media-body h4.media-heading
← a.media-left img.media-object -
li.media .media-body h4.media-heading
a.media-right img.media-object →
List group
ul.list-group
- li.list-group-item
- List item #2 .badge
- List item #3
div.list-group
Javascript
Modals
Options: backdrop: true|FALSE|'static' keyboard: true|FALSE show: true|FALSE remote: FALSE|path
Methods: .modal('toggle') .modal('show') .modal('hide')
Events: show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal loaded.bs.modal
Dropdowns
Via data attributes: data-toggle="dropdown"
Via Javascript: $('.dropdown-toggle').dropdown()(data-toggle="dropdown" still required)
Methods: .dropdown('toggle')
Events: show.bs.dropdown shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown
Tabs
Via data attributes: data-toggle="tab"
Content #1: .table-content .tab-pane.active
Content #2: .table-content .tab-pane
Via Javascript: $(this).tab('show')
Content #1: .table-content .tab-pane.fade.in.active
Content #2: .table-content .tab-pane.fade
Events: show.bs.tab shown.bs.tab
Tooltips
Usage: $('[data-toggle="tooltip"]').tooltip()
Options: animation: true|FALSE html: FALSE|true selector: FALSE|string
title: ''|function container: FALSE|string
placement: top|location|auto|function
trigger: hover focus|click|manual
delay: 0|{show:500, hide:100}
Methods: .tooltip('show') .tooltip('hide') .tooltip('toggle') .tooltip('destroy')
Events: show.bs.tooltip shown.bs.tooltip hide.bs.tooltip hidden.bs.tooltip
Popovers
Usage: $('[data-toggle="popover"]').popover()
Popover
You must initialize them yourself
Options: animation: true|FALSE html: FALSE|true selector: FALSE|string
title: ''|function content: ''|function container: FALSE|string
placement: right|location|auto|function
trigger: click|hover|focus|manual
delay: 0|{show:500, hide:100}
Methods: .popover('show') .popover('hide') .popover('toggle') .popover('destroy')
Events: show.bs.popover shown.bs.popover hide.bs.popover hidden.bs.popover
Alerts
Via data attributes (close button): data-dismiss="alert"
Via Javascript: $('.alert').alert()
Methods: .alert('close')
Events: close.bs.alert closed.bs.alert
Buttons
Stateful button: data-loading-text="Loading..." data-complete-text="Completed"
Methods: .button('toggle') .button('loading') .button('reset') .button(string)
Collapse
Via data attributes: data-toggle="collapse"
#accordion.panel-group
Via Javascript: $(".collapse").collapse()
Options: parent: FALSE|selector toggle: true|FALSE
Methods: .collapse('toggle') .collapse('show') .collapse('hide')
Events: show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse
Carousel
Via data attributes: data-target="#carousel" data-slide data-slide-to data-ride
Via Javascript: $('.carousel').carousel()
Options: interval: 5000 pause: hover wrap: true|FALSE
Methods: .carousel('cycle') .carousel('pause') .carousel(number) .carousel('prev') .carousel('next')
Events: slide.bs.carousel slid.bs.carousel
