Accordion Item

This is the accordion item's body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item Collapsed

This is the accordion item's body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item Left

This is the accordion item's body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item Left Collapsed

This is the accordion item's body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Button Badged

Badged button

Positioned badge

Marker badge

Button Group Nested

Nested with dropdown

Vertical

Button Groups

Mixed styles

Outlined styles

Checkbox button group

Radio button group

Vertical radio button group

Sizing

Button Toolbar

Booking

Northern Ancient Philosophy Reading Group
Tue 30 Sep
09:21

Booking Large

Northern Ancient Philosophy Reading Group
Tue 30 Sep
09:21

Booking Muted

Northern Ancient Philosophy Reading Group
Tue 30 Sep
09:21

Event Card Head Date

Event 3 with a very long title that should wrap in at least some viewports in at least some viewports to show vertical centring of the date even without an image

Event Card Head Date Range

-

Event 4

Event Card Head Datetime Range

-

Event 2

Event Card Head Image

-

Event 1 with a very long title that should wrap in at least some viewports to show vertical centring of the date

Event Card Head Time Range

Dec 25 2017 -

Event 5 with a very long title that should wrap in at least some viewports in at least some viewports to show vertical centring of the date even without an image

Badged List Group

  • A list item 14
  • A second list item 2
  • A third list item 1

Checked List Group

  • First checkbox
  • Second checkbox
  • Third checkbox
  • Fourth checkbox
  • Fifth checkbox

Contextual List Group

Contextual classes

  • A simple default list group item
  • A simple brand list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

Contextual action classes

A simple default list group item A simple brand list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

Custom List Group

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.

Flush List Group

  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one

Horizontal List Group

  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one
  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one
  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one
  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one
  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one
  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one

List Group

List group

  • An active item
  • A second item
  • A third item
  • A fourth item (disabled)
  • And a fifth one

Link list group

The current link item A second link item A third link item A fourth link item A disabled link item

Button list group

Numbered List Group

Numbered List Group

  1. A list item
  2. A list item
  3. A list item

Numbered List group with custom content

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14

Ratios

4x3 iframe

16x9 iframe

Allow expansion for text in narrow viewports

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet est placerat in egestas erat imperdiet sed euismod. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. At augue eget arcu dictum varius duis. Ut enim blandit volutpat maecenas volutpat blandit. Posuere morbi leo urna molestie at. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Pellentesque dignissim enim sit amet venenatis urna cursus. Phasellus egestas tellus rutrum tellus. Risus viverra adipiscing at in tellus integer. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Purus sit amet luctus venenatis. Sit amet justo donec enim diam vulputate. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Pellentesque habitant morbi tristique senectus et netus et. In aliquam sem fringilla ut morbi tincidunt augue interdum. Risus in hendrerit gravida rutrum.

Cursus in hac habitasse platea dictumst. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Erat pellentesque adipiscing commodo elit at imperdiet dui. Ac auctor augue mauris augue neque gravida in. Eu facilisis sed odio morbi quis commodo odio aenean. Et netus et malesuada fames ac turpis. Enim ut sem viverra aliquet. Vel orci porta non pulvinar neque. Ut tellus elementum sagittis vitae et leo duis. Turpis egestas sed tempus urna et pharetra. Nisl nunc mi ipsum faucibus vitae. Mauris pellentesque pulvinar pellentesque habitant morbi tristique.

Ipsum suspendisse ultrices gravida dictum. Cras fermentum odio eu feugiat pretium. Morbi enim nunc faucibus a pellentesque sit. Tristique magna sit amet purus gravida. Felis eget nunc lobortis mattis aliquam. Risus commodo viverra maecenas accumsan. Velit ut tortor pretium viverra. Porttitor eget dolor morbi non arcu risus quis varius quam. Molestie at elementum eu facilisis sed odio. Nisi vitae suscipit tellus mauris a diam maecenas sed. Ac felis donec et odio pellentesque diam volutpat commodo sed. Euismod in pellentesque massa placerat duis ultricies lacus. Nunc vel risus commodo viverra maecenas. Nisi quis eleifend quam adipiscing. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Feugiat nibh sed pulvinar proin.

Pharetra sit amet aliquam id diam. Et sollicitudin ac orci phasellus egestas. Pellentesque adipiscing commodo elit at. Nulla at volutpat diam ut venenatis tellus. Ultricies tristique nulla aliquet enim tortor at. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Velit euismod in pellentesque massa. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Ultrices dui sapien eget mi proin. Imperdiet sed euismod nisi porta. Metus aliquam eleifend mi in nulla. Cras semper auctor neque vitae tempus quam pellentesque nec nam. Aliquam ultrices sagittis orci a. Accumsan lacus vel facilisis volutpat est velit egestas dui id.

Ac feugiat sed lectus vestibulum mattis ullamcorper. Morbi tristique senectus et netus et malesuada fames ac turpis. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Vulputate enim nulla aliquet porttitor lacus. Est placerat in egestas erat. Quis hendrerit dolor magna eget est lorem ipsum. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Convallis tellus id interdum velit. Tincidunt arcu non sodales neque sodales ut etiam. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Ut porttitor leo a diam sollicitudin tempor. Massa vitae tortor condimentum lacinia quis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Orci dapibus ultrices in iaculis nunc sed augue. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Cursus sit amet dictum sit amet justo donec enim diam. Sagittis purus sit amet volutpat consequat. Non odio euismod lacinia at quis risus sed vulputate odio.

Tables

.table-responsive

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell

.table-responsive-sm

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell

.table-responsive-md

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell

.table-responsive-lg

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell

.table-responsive-xl

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell

.table-responsive-xxl

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell

Body Search

Search Result

Search result 1

www.ed.ac.uk/website-programme

Cras et aliquet metus. Duis sit amet diam et lacus auctor viverra. Vestibulum faucibus, tortor rhoncus ullamcorper sodales, eros metus pulvinar ante, in cursus nibh felis et tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ullamcorper fermentum nulla id scelerisque. Etiam eu ex felis. Suspendisse potenti.

Search Result Person Image

Professor Jane Smith

www.ed.ac.uk/website-programme

Search Result Person No Image

Professor Jane Smith

www.ed.ac.uk/website-programme

Search Result Video Image

Search result 2

www.ed.ac.uk/website-programme

Cras et aliquet metus. Duis sit amet diam et lacus auctor viverra. With a link

Search Result Video No Image

Another search result

www.ed.ac.uk/website-programme

Cras et aliquet metus. Duis sit amet diam et lacus auctor viverra. With a link

Banner with landscape branding logo

Branding logo

Banner with portrait branding logo

Branding logo

Hero Title Block

The title block is a navigation item to identify a section home and an optional related "umbrella" section. For example, for a School, the section title would be the name of the School and the umbrella section title would be a link to the College.

Although this is a navigation item, it is not a navigation landmark region and should not be marked up with <nav> or role="navigation"

The title block is required if there is a hero banner image, otherwise it can be omitted.

The title block should not be used if the page h1 is elsewhere in the masthead.

The two links can either be <h1> and <h2> tags, or spans styled with classes .h1 and .h2. If you have a page heading in the main content region, this should use the <h1> tag, and so you should not have an <h1> in the title block, instead you should use spans and classes.

If there is no page title in the main content region, such as a panel layout for the section homepage, then the page's <h1> should be in the title block.

Both the section title and umbrella section title should be links, except for where the <h1> section title would link to the current page, in which case it would not be appropriate to include <a> tags.

Note, although semantically the section title needs to be <h1> with the umbrella section being a subtitle (<h2>) to this, the CSS will reverse the display order so the umbrella section title visually appears above the section title.

Hero Title

Section title

Umbrella title

Hero Title Heading

Section title

Hero Title Headings

School name

College name

Hero Title Styling

Section title

Hero Title Stylings

School name College name

Admin Primary Tasks

Admin Secondary Tasks

Locator bar

Locator No Contact

Primary Nav

Tree Menu

Tree Menu Short

Wide Dropdown

Content menu

Content menu short

Button dropdown

Pagination

Pagination Large

Pagination Small

Navbar

Cards

Card title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Outline button

Card Feature

Feature pane

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Card Feature Image

Feature image

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Card Feature Video

Feature video

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

With a link

Card Featurebox

Featurebox

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Card Featurebox Primary

Primary Featurebox

This is the "medium" card.

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Card High

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Card High Image

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

With a link

Card High Video

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Card Low

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

With a link

Card Low Image

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Card Low Video

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

With a link

Card Medium

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

With a link

Card Medium Image

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Card Medium Video

Pane title

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

With a link

Hero blocks

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Full Brand

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Hero Full Brand Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Full Dark

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Hero Full Dark Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Full Light

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Hero Full Light Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Left Brand

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Hero Left Brand Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Left Dark

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Left Dark Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Left Light

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Hero Left Light Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Right Brand Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Right Dark

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Call to action

Hero Right Dark Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Right Light

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Hero Right Light Opaque

Hero block

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Overview Medium

Overview panel (medium)

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Overview High

Overview panel (high)

Sed pellentesque eu dui in auctor. Ut nec lacus mollis, aliquam diamvel, ornare erat.

Overview Low

Overview panel

Subsite footer content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus ornare tristique. Duis at efficitur libero, vel tincidunt diam.

Sed cursus diam nec condimentum euismod.

  1. Donec non magna ut purus venenatis molestie.

Cras fringilla consequat sem, eu posuere nulla ornare eget. Vestibulum ante ipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam vel nisl orci. Donec facilisis ultricies est nec rhoncus. Eg. Phasellus suscipit, magna eu convallis faucibus, mauris dui posuere justo, a scelerisque nulla ligula at elit.

Sed cursus diam nec condimentum euismod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus ornare tristique. Duis at efficitur libero, vel tincidunt diam.

  1. Donec non magna ut purus venenatis molestie.

Cras fringilla consequat sem, eu posuere nulla ornare eget. Vestibulum ante ipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam vel nisl orci. Donec facilisis ultricies est nec rhoncus. Eg. Phasellus suscipit, magna eu convallis faucibus, mauris dui posuere justo, a scelerisque nulla ligula at elit.

Contact us

Discover title

The University of Edinburgh

Footer login link

Home

21 Buccleuch Pl
The University of Edinburgh
Edinburgh

Location

Street

The University of Edinburgh

33 Buccleuch Place

City
Edinburgh
Post Code
EH8 9JS

Organisation

Student Recruitment and Admissions

Contact details

Address

Street

The University of Edinburgh

33 Buccleuch Place

City
Edinburgh
Post Code
EH8 9JS

Availability

  • Monday - Friday
    9am - 5pm

Person Contact

Prof Fred Bloggs (PhD MSc BA)

Role title

  • University Website Programme
  • Applications Division

Contact details

Address

Street

21, Buccleuch Place

3rd Floor

City
Edinburgh
Post Code
EH8 9AL

Availability

  • Mon-Wed 10am-4pm
  • Thur 10am-4pm
  • Fri 9am-11am, 3pm-5pm

Profile Contact

  • University Website Programme
  • Applications Division

Contact details

Time

  • Mon-Fri 9:30-5:30
  • Sat-Sun 10:00-14:00

Offcanvas Open

Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Offcanvas Right

Offcanvas right
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.