TACC UI Pattern Library

Bootstrap 4: Row

Bootstrap-style row utility classes created by TACC.

Class Description
.row-col-stretch-content-y Increase height of column content to match column height 
<section class="row row-col-stretch-content-y">
    <div class="col">
        <article class="c-card c-card--plain">
            <p>Veni, vidi, vici.
            </p>
        </article>
    </div>
    <div class="col">
        <article class="c-card c-card--plain">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
            </p>
        </article>
    </div>
    <div class="col">
        <article class="c-card c-card--plain">
            <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>
  • Content: 
    /* 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");
  • URL: /components/raw/bootstrap/demo.css
  • Filesystem Path: src/lib/_imports/components/bootstrap/demo.css
  • Size: 405 Bytes 
{
  "shouldSkipPattern": true,
  "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.row.css"
  ]
}