Κωστής Τσαρπαλής > Typography

Jumbotron! (and then some)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sed risus non aliquam. Aenean interdum, tellus eget consectetur sodales, sapien neque faucibus nunc, in ullamcorper enim ex sit amet enim. Integer molestie et ante a blandit. Donec rhoncus ultrices neque vel pulvinar. Donec lacus nulla, pharetra eget pulvinar eu, lobortis quis mi. Fusce ultricies nibh felis, at eleifend quam porta a. Integer suscipit laoreet condimentum.

Heading 1 subheading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sed risus non aliquam. Aenean interdum, tellus eget consectetur sodales, sapien neque faucibus nunc, in ullamcorper enim ex sit amet enim.

Heading 2 subheading

Heading 3 subheading

Heading 4 subheading

Heading 5 subheading

Heading 6 subheading

Unordered list

Felis ut ultricies lacinia.
Mauris nec eros at ex luctus.
Suspendisse fringilla.
Lacinia porta vel eget erat.

Ordered list

Felis ut ultricies lacinia.
Mauris nec eros at ex luctus.
Suspendisse fringilla.
Lacinia porta vel eget erat.

Blockquote

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

Someone famous in Source Title

3 columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is bold and this is strong. This text is italic and this is emphasized. Nunc laoreet nisl eget metus elementum egestas. Duis vulputate, risus quis tristique luctus, dolor sem sodales massa, vel porttitor diam mauris vel justo. In hac habitasse platea dictumst. Nullam lorem justo, pellentesque eu pellentesque a, aliquet vel sem. Read more

4 columns with linked headings

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is bold and this is strong. This text is italic and this is emphasized. Read more

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is bold and this is strong. This text is italic and this is emphasized. Read more

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is bold and this is strong. This text is italic and this is emphasized. Read more

Column 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This text is bold and this is strong. This text is italic and this is emphasized. Read more

Table

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Definition list

This definition list has a class of .dl-horizontal; starts up stacked like normal definition lists, but expands when the navbar does. Try resizing this window to see it in action.

Ale: Top-fermented beer. The best beers in the world fall in this category.
Lager: Bottom-fermented beer. The most wide-spread beers in the world fall in this category.
The Local Pub: The best place in Athens, Greece, to enjoy tasty beer from Greece and all over the craft beer world.

Form

This is a typical form. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sed risus non aliquam. Aenean interdum, tellus eget consectetur sodales, sapien neque faucibus nunc, in ullamcorper enim ex sit amet enim.

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

Inline form

This is an inline form. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sed risus non aliquam. Aenean interdum, tellus eget consectetur sodales, sapien neque faucibus nunc, in ullamcorper enim ex sit amet enim.

More forms at getboostrap.com.