To override and extend Bootstrap Forms.
⚠️ WARNING
Core Styles are negligible, because this is used only on Portal to extend its overrides of Bootstrap.
→ TO DO
- Either migrate Portal Bootstrap form styling to this component.
- Or return these styles to Portal (and remove form Core Styles).
<dl>
<dt>Pure Bootstrap</dt>
<dd>
<form>
<label for="field-name">Name</label>
<input type="text" class="form-control" id="field-name" name="name" placeholder="Jane Doe">
<br />
<label for="field-username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="field-username" name="username" placeholder="Username" aria-describedby="field-username-help">
</div>
<small id="field-username-help" class="form-text text-muted">
Enter your username (without the "@" prefix).
</small>
<br />
<label for="field-intro">Tell us about yourself</label>
<textarea class="form-control" id="field-intro" name="intro" rows="3"></textarea>
<br />
<button type="submit" class="c-button c-button--primary">Submit</button>
</form>
</dd>
<dd>
<dt>Bootstrap + Core Styles<br />
<small class="
c-message
c-message--type-warning
c-message--scope-inline
">
Avoid this <em>if possible</em> in favor of a Core-Styles–only solution. We plan to deprecate Bootstrap.
</small>
</dt>
<dd>
<form>
<label for="search-by-user">Best Friend</label>
<div class="input-group">
<div class="input-group-prepend">
<button class="c-button c-button--secondary">Search</button>
</div>
<input type="text" class="form-control" id="search-by-user" name="search-by-user" placeholder="Username" aria-describedby="search-by-user-help">
</div>
<small id="search-by-user-help" class="form-text text-muted">
Search for your friend by username.
</small>
</form>
</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,
"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/bootstrap.form.css"
]
}