Text elements
Headings
Heading 1 with link
Heading 2 with link
Heading 3 with link
Heading 4 with link
Heading 5 with link
Heading 6 with link
Paragraphs with headings utilities
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Inline text elements
The a element example
The abbr element and
abbr element with title examples
The b element example
The cite element example
The code element
example
The del element example
The dfn element and
dfn element with title
examples
The em element example
The i element example
The img element
example
The ins element example
The kbd element example
The mark element example
The q element
exampleinside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example
Paragraphs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable.
hidden attribute
This should be hidden in all browsers (apart from IE6)
Template content
{{title}}
Address
Address: somewhere, worldhr
pre (383 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
code (526 characters)
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em
0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline
dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
pre code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title >...</title>
<link rel="stylesheet" href="bullframe.css">
</head>
<body>
<main>...</div>
</body>
</html>
blockquotes
Some sort of famous witty quote marked up with a
Tom Whatever<blockquote>
and a child<p>
element.
Even better philosophical quote marked up with just a
<blockquote>
element.
Ordered list
- list item 1
-
list item 1
- list item 2
-
list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
Unordered list
- list item 1
-
list item 1
- list item 2
-
list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
Definition list
- Description name
- Description value
- Description name
- Description value
- Description name
- Description value
Unstyled list
- list item 1
-
list item 1
- list item 2
-
list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
Navigation list
Embedded content
Linked figure with an image and a caption
SVG
HTML5 video with controls
Audio with controls
YouTube iframe 16:9 (default)
Progress
Meter
Details with a summary
Click to Open
Something small enough to escape casual notice.Click to Hide
Something small enough to escape casual notice.Forms
Inputs
Textareas
Textareas (disabled)
Clickable inputs
Buttons
Buttons (.bf-disabled)
Tables
Unstyled tabular data
Album | Year | Price |
---|---|---|
Are You Experienced | 1967 | $1.00 |
Axis: Bold as Love | 1967 | $12.00 |
Electric Ladyland | 1968 | $1.00 |
Band of Gypsys | 1970 | $12.00 |
Album | Year | Price |
Styled tabular data
Album | Year | Price |
---|---|---|
Are You Experienced | 1967 | $1.00 |
Axis: Bold as Love | 1967 | $12.00 |
Electric Ladyland | 1968 | $1.00 |
Band of Gypsys | 1970 | $12.00 |
Album | Year | Price |
Styled responsive tabular data
Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 |
---|---|---|---|---|---|---|---|
row1_cell1 | row1_cell2 | row1_cell3 | row1_cell4 | row1_cell5 | row1_cell6 | row1_cell7 | row1_cell8 |
row2_cell1 | row2_cell2 | row2_cell3 | row2_cell4 | row2_cell5 | row2_cell6 | row2_cell7 | row2_cell8 |
row3_cell1 | row3_cell2 | row3_cell3 | row3_cell4 | row3_cell5 | row3_cell6 | row3_cell7 | row3_cell8 |
row4_cell1 | row4_cell2 | row4_cell3 | row4_cell4 | row4_cell5 | row4_cell6 | row4_cell7 | row4_cell8 |
row5_cell1 | row5_cell2 | row5_cell3 | row5_cell4 | row5_cell5 | row5_cell6 | row5_cell7 | row5_cell8 |
Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 |
Styled tabular data + zebra striping
Album | Year | Price |
---|---|---|
Are You Experienced | 1967 | $1.00 |
Axis: Bold as Love | 1967 | $12.00 |
Electric Ladyland | 1968 | $1.00 |
Band of Gypsys | 1970 | $12.00 |
Album | Year | Price |
Styled responsive tabular data + zebra striping
Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 |
---|---|---|---|---|---|---|---|
row1_cell1 | row1_cell2 | row1_cell3 | row1_cell4 | row1_cell5 | row1_cell6 | row1_cell7 | row1_cell8 |
row2_cell1 | row2_cell2 | row2_cell3 | row2_cell4 | row2_cell5 | row2_cell6 | row2_cell7 | row2_cell8 |
row3_cell1 | row3_cell2 | row3_cell3 | row3_cell4 | row3_cell5 | row3_cell6 | row3_cell7 | row3_cell8 |
row4_cell1 | row4_cell2 | row4_cell3 | row4_cell4 | row4_cell5 | row4_cell6 | row4_cell7 | row4_cell8 |
row5_cell1 | row5_cell2 | row5_cell3 | row5_cell4 | row5_cell5 | row5_cell6 | row5_cell7 | row5_cell8 |
Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 |
Grid System
12 columns fluid Grid System with containers, rows and columns.
At 575, 768 or 991 pixels the columns could be 100% of the row's
width.
The default container .bf-container
has a
max-width
set to 1140 pixels by default.
The custom container .bf-container--fluid
doesn't
have a max-width
.
This is a default container with a
bf-container--break-md
class and a set a columns
combinations.
No gutters between columns (.bf-no-gutters
)