Welcome to co.up
co.up is a 330sqm loft style space on two floors, with three large office rooms, two meeting rooms, and a lounge. It's spacious and quiet during the day when people are getting work done, but crowded and busy in the evenings when user groups meet here.
Please email us via hello@co-up.de before you sign up for any plan.
Grid system
Default grid example
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
Offsetting columns
Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
Nesting columns
To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
Fluid grids
The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.
Fluid offsetting
Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.
Fluid nesting
Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.
Thumbnails Grids of images, videos, text, and more
Default thumbnails
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
Highly customizable
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Responsive images
Media object
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
Default example
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
-
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Template for iframe holder
Short title
Fancy longlong title of this amazing iframe
Typography
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lead body copy
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body copy
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
h1. Heading 1
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h2. Heading 2
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h3. Heading 3
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h4. Heading 4
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h5. Heading 5
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h6. Heading 6
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Blockquote
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Someone famous Source Title
Right aligned blockquote
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Someone famous Source Title
Alignment classes
Left aligned text.
Center aligned text.
Right aligned text.
Abbreviations
An abbreviation of the word attribute is attr.
With .initialism an abbreviation rendered in a slightly smaller font-size: HTML is the best thing since sliced bread.
Emphasis
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Warning: Etiam porta sem malesuada magna mollis euismod.
Error: Donec ullamcorper nulla non metus auctor fringilla.
Info: Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Addresses
Upstream - Agile GmbHAdalbertstrasse 7-8
10999 Berlin
Tel: (0178) 63 19 121
Email: contact@upstre.am Alexander Lang
Tel: +49 (179) 90 12 783
alex@upstre.am
Code
Inline code
Wrap inline snippets of code with <code>.
For example, <section> should be wrapped as inline.
Basic code block
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
Lists
Unordered
A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
Ordered
A list of items in which the order does explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Unstyled
Remove the default list-style and left padding on list items (immediate children only).
- Lorem ipsum dolor sit amet
- Integer molestie lorem at massa
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Ac tristique libero volutpat at
- Eget porttitor lorem
Inline
Place all list items on a single line with inline-block and some light padding.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
- Phasellus iaculis
Description
A list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Horizontal description
Make terms and descriptions in <dl> line up side-by-side.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Hero unit
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Page header
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
Example page header Subtext for header
Tables
Bordered without thead
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
Bordered without thead, with caption
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
Bordered without thead, with colgroup
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 3 | 6 | 9 |
Bordered with thead, with colgroup
| A | B | C |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 3 | 6 | 9 |
Bordered with thead and caption
| 1 | 2 | 3 |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 3 | 6 | 9 |
Bordered with rowspan and colspan
| 1 | 2 | 3 |
|---|---|---|
| 1 and 2 | 3 | |
| 1 | 2 | 3 |
| 1 | 3 | |
| 2 and 3 | ||
Grid sizing
| 1 | 2 | 3 |
|---|---|---|
| 1 and 2 | 3 | |
| 1 | 2 | 3 |
| 1 | 3 | |
| 2 and 3 | ||
Nesting and striping
| Test | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Fluid grid sizing
| 1 | 2 | 3 |
|---|---|---|
| 1 and 2 | 3 | |
| 1 | 2 | 3 |
| 1 | 3 | |
| 2 and 3 | ||