# Labels

<span class="badge badge-primary">Primary</span><span class="badge badge-secondary">Secondary</span><span class="badge badge-success">Success</span><span class="badge badge-info">Info</span><span class="badge badge-warning">Warning</span><span class="badge badge-danger">Danger</span><span class="badge badge-light text-dark">Light</span><span class="badge badge-dark">Dark</span>

<span class="badge badge-blue">Blue</span><span class="badge badge-indigo">Indigo</span><span class="badge badge-purple">Purple</span><span class="badge badge-pink">Pink</span><span class="badge badge-red">Red</span><span class="badge badge-orange">Orange</span><span class="badge badge-yellow">Yellow</span><span class="badge badge-green">Green</span><span class="badge badge-teal">Teal</span><span class="badge badge-cyan">Cyan</span>


# Alerts

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light text-dark" role="alert">
  This is a light alert with <a href="#" class="alert-link text-dark">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

# Cards

<div class="d-flex">

<div class="mr-3">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
</div>

<div>
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
</div>

</div>

# Wells

## Default well

<div class="card card-body">Look, I'm in a well! </div>

## Optional classes

<div class="card card-body bg-primary text-light p-2">Look, I'm in a well! </div>

# Typography

## Lead body copy

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

## Marked text

You can use the mark tag to <mark>highlight</mark> text.

## Small text

<small>This line of text is meant to be treated as fine print.</small>

## Alignment classes

<div class="card">
  <div class="card-body">
    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">Justified text.</p>
    <p class="text-nowrap">No wrap text.</p>
  </div>
</div>

## Transformation classes

<div class="card">
  <div class="card-body">
    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>
  </div>
</div>


# Helper classes

## Contextual colors

<div class="card">
  <div class="card-body">
    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="text-secondary">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
    <p class="text-dark">Ut vel lorem aliquet, rhoncus libero at, condimentum mi. Fusce pellentesque quam nec magna maximus porta.</p>
    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>

## Contextual backgrounds

<div class="card">
  <div class="card-body">
    <p class="bg-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="bg-secondary text-white">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
    <p class="bg-dark text-white">Ut vel lorem aliquet, rhoncus libero at, condimentum mi.</p>
    <p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
</div>


---

## Page Navigation

- Canonical URL: https://demo.growi.org/Sandbox/Bootstrap4
- Permalink: https://demo.growi.org/5a8b15576cf1e900242e0f43
- Parent: [Sandbox](/5a6eee6b6e451000259030c4.md)
- Children: 3 total
  - [__template](/6430fdb2d6bd9e0d4efbdfa2.md)
  - [hoge](/64310552d6bd9e0d4efbeea8.md)
  - [test](/65971417bdad555b68d4dcc2.md)
- Total descendants: 3
- Siblings: 27 total
  - [Bootstrap3](/5f6d466c2d73df0048881f75.md)
  - [Diagrams](/5ed46e05df07e700484389f1.md)
  - [GUI for Table](/5bd2f39bf515a1003efcde54.md)
  - [HachMD](/5d4a553a4dc19b0044efe4ba.md)
  - [Math](/5ed46e05df07e700484389f4.md)
  - [Playground](/63d703bf36fd83995cdaae2d.md)
  - [Restricted page](/59378296a8600d00183d7ab4.md)
  - [SharedPage1](/5f31449b9c39330048375177.md)
  - [Untitled-1](/66cbe4d99bcdc42f9dc40010.md)
  - [Youtube動画を中央表示](/60a7f95f2d5aa40049c30154.md)
  - [__template](/637356833e38e2684997df23.md)
  - [_template](/637356663e38e2684997dca4.md)
  - [aannn](/645a3b4e4be73a5db39b9eb4.md)
  - [crowi と GrowiのMarkdown互換性テスト](/5acc7a569b81eb0024a7b2cc.md)
  - [diagrams.net 数式組版](/63189b3c5a4a0b3a50d595d4.md)
  - [emoji](/60a7f8cf2d5aa40049c30077.md)
  - [growi-plugin-attachment-refs](/60a888a95e88b400492d82fc.md)
  - [highlightjs-latex](/61f4eb41885ab8fb50376f68.md)
  - [plantuml_test](/5a8bec226cf1e900242e0f7b.md)
  - [sequence-diag-xss](/5ad69c33087ab40027fe598f.md)
  - [toc_test](/67822a741b385d2d08b14644.md)
  - [スタッフロール](/5d7a3cc84dc19b0044efe6c4.md)
  - [ファイルアップロードテスト2](/592ff9847f616a0019f77e93.md)
  - [リダイレクトテスト_to](/594bc54f149d740018d73870.md)
  - [新しいNotFoundページテスト](/625fd656760a41736ba1a767.md)
  - [閲覧制限ページ通知テスト](/5ef2ae4bdad9690048f1973e.md)
  - [階層テスト1](/61711bde7c95df220dc2f773.md)
- Last updated: 2024-01-04T20:24:26.696Z by admin1
- Full page listing (all children regardless of count): https://demo.growi.org/_api/v3/page-listing/children?id=5a8b15576cf1e900242e0f43
