mirror of
https://github.com/papercss/papercss
synced 2024-06-01 13:32:42 +02:00
54 lines
2 KiB
Markdown
54 lines
2 KiB
Markdown
---
|
|
title: Container
|
|
description: PaperCSS Container
|
|
---
|
|
|
|
The container is usually at the root of the HTML and holds all of the content in a fixed size. PaperCSS supports a few
|
|
different sizes to make setting your content within a certain max-width easy. Don't forget to add the `.paper` class to
|
|
give you site some extra paper flair!
|
|
|
|
<div class='paper container margin-bottom-large'>
|
|
<h4>Responsive Container!</h4>
|
|
<p>The default</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
|
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
|
</p>
|
|
</div>
|
|
|
|
<div class='paper container container-lg margin-bottom-large'>
|
|
<h4>Large Container!</h4>
|
|
<p>Using <code>container-lg</code><p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
|
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
|
</p>
|
|
</div>
|
|
|
|
<div class='paper container container-md margin-bottom-large'>
|
|
<h4>Medium Container!</h4>
|
|
<p>Using <code>container-md</code><p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
|
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
|
</p>
|
|
</div>
|
|
|
|
<div class='paper container container-sm margin-bottom-large'>
|
|
<h4>Small Container!</h4>
|
|
<p>Using <code>container-sm</code><p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
|
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
|
</p>
|
|
</div>
|
|
|
|
<div class='paper container container-xs margin-bottom-large'>
|
|
<h4>Extra Small Container!</h4>
|
|
<p>Using <code>container-xs</code><p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
|
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
|
</p>
|
|
</div>
|