Bootstrap-style column utility classes created by TACC.
| Class | Description |
|---|---|
.col-stretch-content-y |
Increase height of content to match its height |
.col-dark |
Dark background color |
<h2>Table of Contents</h2>
<nav class="c-nav">
<ul>
<li><a href="#columns-default">Columns</a></li>
<li><a href="#columns-muted">Columns - Muted</a></li>
<li><a href="#columns-dark">Columns - Dark</a></li>
</ul>
</nav>
<dl>
<dt id="columns-default">
Columns, Content Stretched & Not
</dt>
<dd>
<section class="row">
<div class="col col-stretch-content-y">
<article class="c-card c-card--plain">
<h3>Stretched</h3>
<p>Veni, vidi, vici.
</p>
<p>Stretched columns expect only one direct child, like a card.</p>
</article>
</div>
<div class="col">
<article class="c-card c-card--plain">
<h3>Regular</h3>
<p>Veni, vidi, vici.
</p>
</article>
<p>Regular columns support many direct children.</p>
<p>Buttons can change color per section.</p>
<div class="demo-buttons"><button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</div>
</div>
<div class="col">
<article class="c-card c-card--plain">
<h3>Regular</h3>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
</article>
</div>
</section>
</dd>
<dt id="columns-muted">
Muted Columns, Content Stretched & Not
</dt>
<dd>
<section class="row">
<div class="col col-stretch-content-y col-muted">
<article class="c-card c-card--plain">
<h3>Stretched</h3>
<p>Veni, vidi, vici.
</p>
<p>Stretched columns expect only one direct child, like a card.</p>
</article>
</div>
<div class="col col-muted">
<article class="c-card c-card--plain">
<h3>Regular</h3>
<p>Veni, vidi, vici.
</p>
</article>
<p>Regular columns support many direct children.</p>
<p>Buttons can change color per section.</p>
<div class="demo-buttons"><button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</div>
</div>
<div class="col col-muted">
<article class="c-card c-card--plain">
<h3>Regular</h3>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
</article>
</div>
</section>
</dd>
<dt id="columns-dark">
Dark Columns, Content Stretched & Not
</dt>
<dd>
<section class="row">
<div class="col col-stretch-content-y col-dark">
<article class="c-card c-card--plain">
<h3>Stretched</h3>
<p>Veni, vidi, vici.
</p>
<p>Stretched columns expect only one direct child, like a card.</p>
</article>
</div>
<div class="col col-dark">
<article class="c-card c-card--plain">
<h3>(Regular)</h3>
<p>Veni, vidi, vici.
</p>
</article>
<p>Regular columns support many direct children.</p>
<p>Buttons can change color per section.</p>
<div class="demo-buttons"><button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</div>
</div>
<div class="col col-dark">
<article class="c-card c-card--plain">
<h3>Regular</h3>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
</article>
</div>
</section>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* All Bootstrap pattern library CSS loads for every component */
/* FAQ: To support legacy client imports, Bootstrap file organization is odd */
@import url("./bootstrap--form.demo.css");
@import url("./bootstrap--modal.demo.css");
@import url("./bootstrap--col.demo.css");
@import url("./bootstrap--pagination.demo.css");
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadBootstrap": true,
"supportStyles": [
"../../assets/components/c-card.css",
"../../assets/components/bootstrap.col.css"
]
}