Skip to content Skip to navigation
EPFL Homepage
Search

EPFL Bootstrap Style Guide

  1. EPFL
  2. 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:

Publication list

Based on the Scholarly Article Schema and the Media module.

Publication Thumbnail
Image

Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve.

M. Andersen, J. M. L. Gagne and S. Kleindienst —  in Automation in Construction, vol. 35, p. 338-352, 2013
Detailed record for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve." Full text for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve."
Publication Thumbnail
Image

Modelling 'non-visual' effects of daylighting in a residential environment.

M. Andersen, S. J. Gochenour and S. W. Lockley —  in Building and Environment, vol. 70, p. 138-149, 2013
Detailed record for "Modelling 'non-visual' effects of daylighting in a residential environment." Full text for "Modelling 'non-visual' effects of daylighting in a residential environment."
Publication Thumbnail
Image

A framework for predicting the non-visual effects of daylight – Part II: The simulation model.

J. Mardaljevic, M. Andersen, N. Roy and J. Christoffersen —  in Lighting Research and Technology, 2013
Detailed record for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model." Full text for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model."
  • 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

Related links

  • Bootstrap Blog
  • Bootstrap GitHub Repository
  • JavaScript Documentation
  • Atelier Web
  • Back to top
  • Sitemap
  • Webmaster
  • Everything on a single page
  • Accessibility
  • Updated 18 Mar 2019
  • © EPFL 2017 All rights reserved