Skip to content
Skip to navigation
EPFL Homepage
Search
Search query
Search
EPFL Bootstrap
Style Guide
EPFL
Styleguide
Current language:
English
Main navigation
Homepage
about
Accessibility
Web Content Accessibility Guidelines (WCAG) 2.0
WAI-ARIA
Access keys
Installation
Optimized head/foot files
All-in-one head files
Integration of the EPFL banner in a site
Dynamically load the global header
Local search
Global search
Custom Scripts
Load a custom jQuery plugin
Load [datatables script](http://cdn.datatables.net)
Load a jQuery plug-in different from epfl-jquery
Load a custom script
Analytics
Browser support
3rd-party libraries
Packaged libraries
CDN libraries
Changelog
v0.28.0 - 2018.08.28
v0.27.5 - 2018.08.22
v0.27.4 - 2018.07.18
v0.27.3 - 2018.07.02
v0.27.2 - 2018.06.11
v0.27.1 - 2018.04.04
v0.27.0 - 2018.04.03
v0.26.1 - 2017.11.21
v0.26.0 - 2017.10.18
v0.25.0 - 2017.10.11
v0.24.0 - 2017.08.29
v0.23.1 - 2017.06.13
v0.23.0 - 2017.03.20
v0.22.12 - 2016.04.27
v0.22.9 - 2016.04.14
v0.22.8 - 2016.03.18
v0.22.6 - 2016.08.01
v0.22.2 - 2015.10.30
v0.22.0 - 2015.10.12
v0.21.3 - 2015.09.03
v0.20.3 - 2015.06.22
v0.20.2 - 2015.06.18
v0.20.1 - 2015.06.16
v0.20.0 - 2015.06.15
v0.19.1 - 2015.06.06
v0.19.0 - 2015.06.04
v0.18.0 - 2015.05.20
v0.17.0 - 2015.05.12
v0.16.0 - 2015.05.04
v0.15.0 - 2015.04.17
v0.14.0 - 2014.11.09
v0.13.4 - 2014.11.01
v0.13.3 - 2014.09.03
v0.13.2 - 2014.07.15
v0.13.1 - 2014.07.09
v0.13.0 - 2014.07.03
v0.12.1 - 2014.06.25
v0.12.0 - 2014.06.25
v0.11.0 – 2014.06.06
v0.10.2 – 2014.06.04
v0.10.1 – 2014.05.28
v0.10.0 – 2014.05.27
v0.9.0 – 2014.05.09
base
Page Structure
Grid
Grid horizontal classes
Cell width
Cell horizontal offset
Convenience classes
Grid vertical classes
Cell height
Cell vertical offset
Nested grids
Overwrite grid in tablet layout
Fixed vs fluid layout
Font size adjustments
Visibility
Hiding
Hidden
Visually hidden
Hidden from screen readers
Visible
Colors
Base
Information
Themes
Theme classes
Typography
Fonts
Headings
Common content
Themed content
Code blocks
Images
Positioning images
Images with a fixed proportion
Images with a forced size
Showing different images for different screen sizes
Using CSS classes
Using the HTML5 picture element
Lists
Ordered lists
Unordered lists
Definition lists
Unstyled lists
Tables
Styled table
Narrow table
Smaller table
Stroked table
Striped table
Hoverable table
Responsive table
Quotes
Block quotes
Inline quotes
Forms
Styled form
Inline form
Vertical form
Horizontal form
Input group
modules
Icons
Default icons
Button icons
Themed icons
Inline icons
Bigger icons
Buttons
Default buttons
Icon buttons
Operations
Data manipulation
Information notification
Long buttons
Trigger button
Split button
Badges
Default badge
Information badges
Action badges
Messages
The message module structure
Various message types
Navigation
The navigation module structure
Inline navigation
Horizontal navigation
Vertical navigation
Pagination navigation
Horizontal block navigation
Vertical block navigation
Themed horizontal navigation
Themed vertical navigation
Panels
The panel module structure
Default panels
Themed panels
Cell panels
Panel buttons
Media
The media module structure
Media list
Media list (auto-truncated)
Minimal list
Media grid
A media list with the first element emphasized
Responsive Embeds
All supported aspect ratios
widgets
Collapse
Collapse overview
The collapse widget structure
Options for the collapse widget
Events for the collapse widget
Default collapse
Collapse with custom targets
Collapse the content
Collapse the link target
Collapse targets specified in the target option
Collapse targets specified in the controls option
Collapse with overlay
Collapse on mouseenter/mouseleave
Tooltip
Tooltip overview
The tooltip widget structure
Options for the tooltip widget
Default tooltip
Tooltip on specific events
Click tooltip
Double-click tooltip
Tooltip with custom targets
Via aria-describedby with a list of target ids
Via data-tooltip
Via data-target with a css selector to the targets (relative to parent)
Via href with reference to element id (single target only)
Overlay tooltip
Menu, Menubar & Toolbar
Menu widget
The menu widget structure
Simple menu
Multi-level menu
Tool bar widget
The toolbar widget structure
Simple toolbar example
Menu bar
The menubar widget structure
Simple menubar example
Accordions
Accordions overview
The accordion widget structure
Options for the accordion widget
Default accordions (top positioned)
Bottom positioned accordions
Tabs
Tabs overview
The tabs widget structure
Options for the tabs widget
Default tabs (top)
Left tabs
Right tabs
Bottom tabs
Nested tabs (horizontal-vertical)
Nested tabs (vertical-horizontal)
Tree
Tree overview
The tree widget structure
Options for the tree widget
In-line tree
Default in-line tree
In-line tree with auto-collapsing branches
Block tree
Default block tree
Block tree with auto-collapse of branches
Dialog
Dialog overview
The dialog widget structure
Options for the dialog widget
Simple dialog
Modal dialog
Standard Popup Image
Popup Image click for downloading
Carousel & Slideshow
Carousel overview
The carousel widget structure
Options for the carousel widget
Events for the carousel widget
Default carousel
With inline preview
With controls
Vertical with controls
With custom controls
With custom controls and cycleItems=True
Slideshow
The slideshow widget structure
Options for the slideshow widget
Events for the slideshow widget
Default slideshow
With controls (no selectors)
Slideshow with custom controls
Alerts & Notifications
Alert
Notification
Filter
Sort
List
Table
plugins
Markdown
Maths
Tex Example
MathML
AsciiMath
Syntax Highlighting
Java
Python
JavaScript
PHP
Perl
Other
examples
Page templates
Accessibility links template
Minimal global header
Website name template
Breadcrumb navigation template
Language navigation template
Tool bar template
Main navigation template
Secondary navigation template
Article list
Fixed height articles (auto-truncate)
Paginated news list
Minimal article list
News list with emphasized first item
Course list
Event list
Event-list (auto-truncated)
Agenda version
People list
Condensed people grid layout (2 columns)
People grid layout
3 columns
4 columns
Condensed people list
Publication list
Study plan
Organigramme
Responsive Image
image sans attributs
image avec attributs width et height
image avec l'attribut style
max-width: 100%
width: 100%
Image entièrement visible sur l'écran
Image qui remplit tout l'écran
Différentes solutions
Share:
Sitemap
Accessibility
Web Content Accessibility Guidelines (WCAG) 2.0
WAI-ARIA
Access keys
Installation
Optimized head/foot files
All-in-one head files
Integration of the EPFL banner in a site
Dynamically load the global header
Local search
Global search
Custom Scripts
Load a custom jQuery plugin
Load [datatables script](http://cdn.datatables.net)
Load a jQuery plug-in different from epfl-jquery
Load a custom script
Analytics
Browser support
3rd-party libraries
Packaged libraries
CDN libraries
Changelog
v0.28.0 - 2018.08.28
v0.27.5 - 2018.08.22
v0.27.4 - 2018.07.18
v0.27.3 - 2018.07.02
v0.27.2 - 2018.06.11
v0.27.1 - 2018.04.04
v0.27.0 - 2018.04.03
v0.26.1 - 2017.11.21
v0.26.0 - 2017.10.18
v0.25.0 - 2017.10.11
v0.24.0 - 2017.08.29
v0.23.1 - 2017.06.13
v0.23.0 - 2017.03.20
v0.22.12 - 2016.04.27
v0.22.9 - 2016.04.14
v0.22.8 - 2016.03.18
v0.22.6 - 2016.08.01
v0.22.2 - 2015.10.30
v0.22.0 - 2015.10.12
v0.21.3 - 2015.09.03
v0.20.3 - 2015.06.22
v0.20.2 - 2015.06.18
v0.20.1 - 2015.06.16
v0.20.0 - 2015.06.15
v0.19.1 - 2015.06.06
v0.19.0 - 2015.06.04
v0.18.0 - 2015.05.20
v0.17.0 - 2015.05.12
v0.16.0 - 2015.05.04
v0.15.0 - 2015.04.17
v0.14.0 - 2014.11.09
v0.13.4 - 2014.11.01
v0.13.3 - 2014.09.03
v0.13.2 - 2014.07.15
v0.13.1 - 2014.07.09
v0.13.0 - 2014.07.03
v0.12.1 - 2014.06.25
v0.12.0 - 2014.06.25
v0.11.0 – 2014.06.06
v0.10.2 – 2014.06.04
v0.10.1 – 2014.05.28
v0.10.0 – 2014.05.27
v0.9.0 – 2014.05.09
Page Structure
Grid
Grid horizontal classes
Cell width
Cell horizontal offset
Convenience classes
Grid vertical classes
Cell height
Cell vertical offset
Nested grids
Overwrite grid in tablet layout
Fixed vs fluid layout
Font size adjustments
Visibility
Hiding
Hidden
Visually hidden
Hidden from screen readers
Visible
Colors
Base
Information
Themes
Theme classes
Typography
Fonts
Headings
Common content
Themed content
Code blocks
Images
Positioning images
Images with a fixed proportion
Images with a forced size
Showing different images for different screen sizes
Using CSS classes
Using the HTML5 picture element
Lists
Ordered lists
Unordered lists
Definition lists
Unstyled lists
Tables
Styled table
Narrow table
Smaller table
Stroked table
Striped table
Hoverable table
Responsive table
Quotes
Block quotes
Inline quotes
Forms
Styled form
Inline form
Vertical form
Horizontal form
Input group
Icons
Default icons
Button icons
Themed icons
Inline icons
Bigger icons
Buttons
Default buttons
Icon buttons
Operations
Data manipulation
Information notification
Long buttons
Trigger button
Split button
Badges
Default badge
Information badges
Action badges
Messages
The message module structure
Various message types
Navigation
The navigation module structure
Inline navigation
Horizontal navigation
Vertical navigation
Pagination navigation
Horizontal block navigation
Vertical block navigation
Themed horizontal navigation
Themed vertical navigation
Panels
The panel module structure
Default panels
Themed panels
Cell panels
Panel buttons
Media
The media module structure
Media list
Media list (auto-truncated)
Minimal list
Media grid
A media list with the first element emphasized
Responsive Embeds
All supported aspect ratios
Collapse
Collapse overview
The collapse widget structure
Options for the collapse widget
Events for the collapse widget
Default collapse
Collapse with custom targets
Collapse the content
Collapse the link target
Collapse targets specified in the target option
Collapse targets specified in the controls option
Collapse with overlay
Collapse on mouseenter/mouseleave
Tooltip
Tooltip overview
The tooltip widget structure
Options for the tooltip widget
Default tooltip
Tooltip on specific events
Click tooltip
Double-click tooltip
Tooltip with custom targets
Via aria-describedby with a list of target ids
Via data-tooltip
Via data-target with a css selector to the targets (relative to parent)
Via href with reference to element id (single target only)
Overlay tooltip
Menu, Menubar & Toolbar
Menu widget
The menu widget structure
Simple menu
Multi-level menu
Tool bar widget
The toolbar widget structure
Simple toolbar example
Menu bar
The menubar widget structure
Simple menubar example
Accordions
Accordions overview
The accordion widget structure
Options for the accordion widget
Default accordions (top positioned)
Bottom positioned accordions
Tabs
Tabs overview
The tabs widget structure
Options for the tabs widget
Default tabs (top)
Left tabs
Right tabs
Bottom tabs
Nested tabs (horizontal-vertical)
Nested tabs (vertical-horizontal)
Tree
Tree overview
The tree widget structure
Options for the tree widget
In-line tree
Default in-line tree
In-line tree with auto-collapsing branches
Block tree
Default block tree
Block tree with auto-collapse of branches
Dialog
Dialog overview
The dialog widget structure
Options for the dialog widget
Simple dialog
Modal dialog
Standard Popup Image
Popup Image click for downloading
Carousel & Slideshow
Carousel overview
The carousel widget structure
Options for the carousel widget
Events for the carousel widget
Default carousel
With inline preview
With controls
Vertical with controls
With custom controls
With custom controls and cycleItems=True
Slideshow
The slideshow widget structure
Options for the slideshow widget
Events for the slideshow widget
Default slideshow
With controls (no selectors)
Slideshow with custom controls
Alerts & Notifications
Alert
Notification
Filter
Sort
List
Table
Markdown
Maths
Tex Example
MathML
AsciiMath
Syntax Highlighting
Java
Python
JavaScript
PHP
Perl
Other
Page templates
Accessibility links template
Minimal global header
Website name template
Breadcrumb navigation template
Language navigation template
Tool bar template
Main navigation template
Secondary navigation template
Article list
Fixed height articles (auto-truncate)
Paginated news list
Minimal article list
News list with emphasized first item
Course list
Event list
Event-list (auto-truncated)
Agenda version
People list
Condensed people grid layout (2 columns)
People grid layout
3 columns
4 columns
Condensed people list
Publication list
Study plan
Organigramme
Responsive Image
image sans attributs
image avec attributs width et height
image avec l'attribut style
max-width: 100%
width: 100%
Image entièrement visible sur l'écran
Image qui remplit tout l'écran
Différentes solutions