1660879161
RESPONSIVE Bootstrap 5 Cards. This tutorial shows how to master Bootstrap 5 cards. The secret is in the grid as the cards conform to their parent.
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin
by default, so use spacing utilities as needed.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
The building block of a card is the .card-body
. Use it whenever you need a padded section within a card.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Card titles are used by adding .card-title
to a <h*>
tag. In the same way, links are added and placed next to each other by adding .card-link
to an <a>
tag.
Subtitles are used by adding a .card-subtitle
to a <h*>
tag. If the .card-title
and the .card-subtitle
items are placed in a .card-body
item, the card title and subtitle are aligned nicely.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
.card-img-top
places an image to the top of the card. With .card-text
, text can be added to the card. Text within .card-text
can also be styled with the standard HTML tags.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<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>
Create lists of content in a card with a flush list group.
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">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>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Add an optional header and/or footer within a card.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Card headers can be styled by adding .card-header
to <h*>
elements.
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Cards assume no specific width
to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
Using the grid, wrap cards in columns and rows as needed.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
Use our handful of available sizing utilities to quickly set a card’s width.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
Use custom CSS in your stylesheets or as inline styles to set a width.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .g-0
and use .col-md-*
classes to make the card horizontal at the md
breakpoint. Further adjustments may be needed depending on your card content.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Cards include various options for customizing their backgrounds, borders, and color.
Use text color and background utilities to change the appearance of a card.
<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-dark 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-dark 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 text-dark 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>
Use border utilities to change just the border-color
of a card. Note that you can put .text-{color}
classes on the parent .card
or a subset of the card’s contents as shown below.
<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">
<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">
<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>
You can also change the borders on the card header and footer as needed, and even remove their background-color
with .bg-transparent
.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">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 class="card-footer bg-transparent border-success">Footer</div>
</div>
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex;
to become attached with uniform dimensions starting at the sm
breakpoint.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
When using card groups with footers, their content will automatically line up.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Use the Bootstrap grid system and its .row-cols
classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1
laying out the cards on one column, and .row-cols-md-2
splitting four cards to equal width across multiple rows, from the medium breakpoint up.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Change it to .row-cols-3
and you’ll see the fourth card wrap.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
When you need equal height, add .h-100
to the cards. If you want equal heights by default, you can set $card-height: 100%
in Sass.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Just like with card groups, card footers will automatically line up.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
In v4
we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5
, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;
Download the source code:
https://adesignerwhocodes.ck.page/81681f96b5
#bootstrap #html #css #webdev
1660878786
This tutorial shows 3 ways to center content, including div tags and content, in Bootstrap 5.
Download the source code:
https://adesignerwhocodes.ck.page/2b563b0f29
#bootstrap #html #css
1660878389
This tutorial shows how to build a login form in React using React Bootstrap (and a little vanilla Get Bootstrap).
Download the source code:
https://adesignerwhocodes.ck.page/3e2b80b057
#bootstrap #html #css #webdev
1660878005
This tutorial shows how to create a vertical navbar to your site using Bootstrap 5 and make it completely responsive as well.
Download the source code:
https://adesignerwhocodes.ck.page/ef7862b9ef
#bootstrap
1660877333
This tutorial shows how to make a background images responsive with Bootstrap 5 in HTML/CSS so they flex and adjust to any screen size—mobile, tablet or desktop. Also included responsive typography for mobile and tablet as well.
Download the source code:
https://adesignerwhocodes.ck.page/7efbe3cd50
#bootstrap #html #css #webdev
1660876861
This tutorial shows how to build a Responsive Contact Form using Bootstrap 5. Bootstrap 5 makes building a contact form a breeze. Build a responsive form using all of the tools bootstrap 5 provides. In addition, I'll show you how to make specific fields required vs optional as well as setting placeholder text (like I do with the phone field).
Table of Contents:
00:00 What this video is about
01:02 Setting up 2 columns
02:42 First and Last Name fields
05:02 Adding Email and Phone fields
09:10 Adding a comments section (textarea)
11:38 The submit button
14:02 The power of the Container
Download the source code:
https://adesignerwhocodes.ck.page/cf9aba092b
#bootstrap #webdev
1660374820
In this guide, we will learn how to create and use datepicker using bootstrap 5 in angular 13 apps.
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Open your terminal and navigate to your angular 13 apps directory on terminal. Then execute the following command on it to install bootstrap 5 into your angular 13 apps:
npm install bootstrap --save
Then open your angular.json file and include bootstrap css like “node_modules/bootstrap/dist/css/bootstrap.min.css”. As follows:
.....
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
.....
And, Again open your terminal and execute the following command on it to install ng bootstrap 5 into your angular 13 apps:
npm install --save @ng-bootstrap/ng-bootstrap
Visit src/app/ directory and open app.module.ts file. Then import HttpClientModule, FormsModule and ReactiveFormsModule in this file, as follows:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Create datepicker using Bootstrap 5 and ng bootstrap. So, visit src/app directory and open app.component.html file. Then update the following code into it to creating datepicker in angular apps; as follows:
<h1>Angular 13 Bootstrap 5 Datepicker Example</h1>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
<hr/>
<pre>Model: {{ model | json }}</pre>
Note that:- In the above form, have used bootstrap 5 classes. if you want to add than then; you can see the following article for that; as follow:
Visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'appBootstrap';
model:any;
constructor() {}
}
In this step, execute the following command on the terminal to start the angular app:
ng serve
Open browser, enter the below url:
http://localhost:4200
1660184460
This is an open source of Content Management System developed with Laravel framework.
Visit Documentation section in the website
Visit Installation section in the documentation for the details
Content Management System https://lavalite.org/demo.html
Products https://lavalite.org/products.html
Author: LavaLite
Source Code: https://github.com/LavaLite/cms
License: MIT license
1659862920
A set of Ruby helpers that streamlines the use of Bootstrap 3 components in HTML views.
The full documentation is available at rubydoc.info.
Bootstrap 3 is a great framework, but requires many lines of HTML code even for simple components. For instance, you need to write the following HTML to show a dismissible alert:
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
You accepted the Terms of service.
</div>
Writing this for every dismissible alert is cumbersome, repetitive, and prone to errors.
With Bh, you can achieve the same result with just one line of code:
<%= alert_box 'You accepted the Terms of service.', dismissible: true %>
alert_box
is only one of the helpers provided by Bh. The other ones are: bootstrap_css
, bootstrap_js
, bootstrap_theme_css
, button_to
, button
, dropdown
, font_awesome_css
, form_for
, icon
, modal
, navbar
, nav
, panel_row
, panel
and progress_bar
.
How to install
Bh is compatible with Rails 3.2, Rails 4, Padrino and Middleman.
To include the Bh gem in your project:
gem 'bh', '~> 1.3'
to the Gemfile
file of your Rails, Padrino or Middleman project.config.rb
and add activate :bh
.app.rb
and add register Bh
.That’s all! From now on, you will be able to use any Bh helper in your views.
A comprehensive guide to Bh helpers
All the helpers available in Bh are detailed on the Bh homepage:
Please proceed to http://fullscreen.github.io/bh for more details and examples on how to use Bh.
How to try it in your browser
The examples
folder includes three sample apps that you can rapidly run in your browser and edit as you please, in order to visually appreciate the result of Bh.
If you’d like to run the test Rails app:
cd
into the examples/rails
folderbundle install
bundle exec rails server
If you prefer to see the helpers inside a test Middleman app:
cd
into the examples/middleman
folderbundle install
bundle exec middleman
If you prefer to see the helpers inside a test Padrino app:
cd
into the examples/padrino
folderbundle install
bundle padrino start
How to update
Bh strictly follows Semantic Versioning. By indicating the version number in the '~> major.minor' format in your Gemfile, you are guaranteed that that your project won’t break when you bundle update
to a new version.
Whenever a new version is released, the CHANGELOG file will include a description of what features have changed and how to upgrade your code, if necessary.
The full history of Bh versions is also available.
To stay updated with the latest releases, to receive code examples, implementation details and announcements, please consider subscribing to the Bh mailing list:
How to release new versions
If you are a manager of this project, remember to upgrade the Bh gem whenever a new feature is added or a bug gets fixed.
Make sure all the tests are passing on Travis CI, document the changes in CHANGELOG.md and README.md, bump the version, then run
rake release
Remember that the bh gem follows Semantic Versioning.
Any new release that makes backward-compatible bug fixes should bump the patch version (1.1.x).
Any new release that adds backward-compatible features should bump the minor version (1.x.0).
Any new version that breaks compatibility should bump the major version (2.0.0)
How to contribute
Bh needs your support!
If you find that a method is missing, fork the project, add the missing code, write the appropriate tests, then submit a pull request, and it will gladly be merged!
To run the tests, simply type bundle exec rspec
on the command line.
Don’t hesitate to send code pull requests through GitHub and to spread the love. And don’t click here! Thanks! :)
Author: fullscreen
Source code: https://github.com/fullscreen/bh
License: MIT license
1659831660
Bootstrappers is the base Rails application using Bootstrap template and other goodies.
First install the bootstrappers gem:
gem install bootstrappers
gem install bootstrappers 4.0.rc1
Then run:
$ bootstrappers project_name
To see the latest and greatest gems, look at Suspenders' template/Gemfile_additions, which will be appended to the default generated projectname/Gemfile.
It includes application gems like:
config/database.yml default setting:
development: &default
adapter: mysql2
encoding: utf8
database: <%= app_name %>_development
host: localhost
username: root
password: ""
but we still ask for your preferences
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)If you have problems, please create a Github issue.
Bootstrappers is maintained and funded by @xdite
some codes of bootstrappers were borrowed from suspenders
Bootstrappers is Copyright © 2012 xdite. It is free software, and may be redistributed under the terms specified in the LICENSE file.
Author: xdite
Source code: https://github.com/xdite/bootstrappers
License: MIT license
1659657120
Responsive Framework
Responsiveness made simple
Responsive Framework adapts your UI to different screen sizes automatically. Create your UI once and have it display pixel perfect on mobile, tablet, and desktop!
Supporting multiple display sizes often means recreating the same layout multiple times. Under the traditional Bootstrap approach, building responsive UI is time consuming, frustrating and repetitive. Furthermore, getting everything pixel perfect is near impossible and simple edits take hours.
Use Responsive Framework to automatically scale your UI.
ResponsiveBreakpoint.autoScale(600);
A demo website built with the Responsive Framework. View Code
The flutter.dev website recreated in Flutter. View Code
The pub.dev website recreated in Flutter. View Code
Import this library into your project:
responsive_framework: ^latest_version
Add ResponsiveWrapper.builder
to your MaterialApp or CupertinoApp.
import 'package:responsive_framework/responsive_framework.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, child) => ResponsiveWrapper.builder(
child,
maxWidth: 1200,
minWidth: 480,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(480, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.resize(1000, name: DESKTOP),
],
background: Container(color: Color(0xFFF5F5F5))),
initialRoute: "/",
);
}
}
That's it!
AutoScale shrinks and expands your layout proportionally, preserving the exact look of your UI. This eliminates the need to manually adapt layouts to mobile, tablet, and desktop.
ResponsiveBreakpoint.autoScale(600);
Flutter's default behavior is resize which Responsive Framework respects. AutoScale is off by default and can be enabled at breakpoints by setting autoScale
to true
.
Breakpoints control responsive behavior at different screen sizes.
ResponsiveWrapper(
child,
breakpoints: [
ResponsiveBreakpoint.resize(600, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.autoScale(1200, name: DESKTOP),
],
)
Breakpoints give you fine-grained control over how your UI displays.
These concepts helps you start using the Responsive Framework and build an responsive app quickly.
Flutter's default behavior is to resize your layout when the screen dimensions change. Resizing a layout stretches it in the direction of an unconstrained width or height. Any constrained dimension stays fixed which is why mobile app UIs look tiny on desktop. The following example illustrates the difference between resizing and scaling.
An AppBar widget looks correct on a phone. When viewed on a desktop however, the AppBar is too short and the title looks too small. Here is what happens under each behavior:
ResponsiveBreakpoint
. As the width increases, the height increases proportionally.When scaled, the AppBar looks correct on desktop, up to a certain size. Once the screen becomes too wide, the AppBar starts to appear too large. This is where breakpoints come in.
To adapt to a wide variety of screen sizes, set breakpoints to control responsive behavior.
ResponsiveWrapper(
child,
maxWidth: 1200,
minWidth: 480,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(480, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.resize(1000, name: DESKTOP),
ResponsiveBreakpoint.autoScale(2460, name: '4K'),
],
)
An arbitrary number of breakpoints can be set. Resizing/scaling behavior can be mixed and matched.
The wonderful people at Resocoder created a great tutorial video and article walking through the usage of the Responsive Framework at the link below.
View Responsive Framework Tutorial
No project wiki exists yet unfortunately. That means this is an opportunity for you to create and maintain the wiki for one of the most popular Flutter packages. This package needs your help with documentation!
Please reach out via the contact links below if you are interested.
Responsive Framework was created out of a desire for a better way to manage responsiveness. The ability to automatically adapt UI to different sizes opens up a world of possibilities. Here at Codelessly, we're building a Flutter app UI and website builder, development tools, and UI templates to increase productivity. If that sounds interesting, you'll want to subscribe to updates below 😎
Responsive Framework is licensed under Zero-Clause BSD and released as Emailware. If you like this project or it helped you, please subscribe to updates. Although it is not required, you might miss the goodies we share!
Now you can proudly display the time and headache saved by using Responsive Framework with a supporter's badge.
[](https://github.com/Codelessly/ResponsiveFramework)
<a href="https://github.com/Codelessly/ResponsiveFramework">
<img alt="Built Responsive"
src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20Responsive%20Badge.png"/>
</a>
<a href="https://github.com/Codelessly/ResponsiveFramework">
<img alt="Built with Responsive Framework"
src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20with%20Responsive%20Badge.png"/>
</a>
Run this command:
With Flutter:
$ flutter pub add responsive_framework
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
responsive_framework: ^0.2.0
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:responsive_framework/responsive_framework.dart';
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:minimal/pages/pages.dart';
import 'package:minimal/routes.dart';
import 'package:responsive_framework/responsive_framework.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, child) => ResponsiveWrapper.builder(
BouncingScrollWrapper.builder(context, child!),
maxWidth: 1200,
minWidth: 450,
defaultScale: true,
breakpoints: [
const ResponsiveBreakpoint.resize(450, name: MOBILE),
const ResponsiveBreakpoint.autoScale(800, name: TABLET),
const ResponsiveBreakpoint.autoScale(1000, name: TABLET),
const ResponsiveBreakpoint.resize(1200, name: DESKTOP),
const ResponsiveBreakpoint.autoScale(2460, name: "4K"),
],
background: Container(color: const Color(0xFFF5F5F5))),
initialRoute: Routes.home,
onGenerateRoute: (RouteSettings settings) {
return Routes.fadeThrough(settings, (context) {
switch (settings.name) {
case Routes.home:
return const ListPage();
case Routes.post:
return const PostPage();
case Routes.style:
return const TypographyPage();
default:
return const SizedBox.shrink();
}
});
},
debugShowCheckedModeBanner: false,
);
}
}
Design:
Development:
Sponsor: Codelessly - Flutter App UI and Website Builder
Flutter is a game-changing technology that will revolutionize not just development, but software itself. A big thank you to the Flutter team for building such an amazing platform 💙
Author: Codelessly
Source Code: https://github.com/Codelessly/ResponsiveFramework
License: 0BSD license
1659534262
In this bootstrap progress bar, we used jquery with a javascript method. For increment, we used the javascript setTimeout method, and also we used some basic javascript DOM to change value dynamically.
Also Read:- Cookies Notifications In Tailwind CSS
We used bootstrap 4 animated and background progress bar components. Also, we used some background classes for the progress bar with different colours.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.
1659485220
bootstrap_form
is a Rails form builder that makes it super easy to integrate Bootstrap v5-style forms into your Rails application. It provides form helpers that augment the Rails form helpers. bootstrap_forms
's form helpers generate the form field and its label and all the Bootstrap mark-up required for proper Bootstrap display. bootstrap_form
also provides:
bootstrap_form
's validation error handling and do it yourself. Note that this applies to Rails-generated validation messages. HTML 5 client-side validation and Rails validation out of the box don't really work well together. One discussion of the challenges and some solutions is hererequired
attribute on required fields.bootstrap_form
can't do.Some other nice things that bootstrap_form
does for you are:
.erb
files.bootstrap_form
works like the standard Rails form helpers, and this README assumes you know how they work. You start a form with one of bootstrap_form_with
, bootstrap_form_for
, or bootstrap_form_tag
in a view file. You get a form builder that calls the bootstrap_form
helpers instead of the standard Rails helpers. You use that form builder in the view file to render one or more form fields.
bootstrap_form
supports at a minimum the currently supported versions of Ruby and Rails:
Install Bootstrap 5. There are many ways to do this, depending on the asset pipeline you're using in your Rails application. One way is to use the gem that works with Sprockets. To do so, in a brand new Rails 7.0 application created without the --webpacker
option, add the bootstrap
gem to your Gemfile
:
gem "bootstrap", "~> 5.0"
And follow the remaining instructions in the official bootstrap installation guide for setting up application.scss
and application.js
.
Add the bootstrap_form
gem to your Gemfile
:
gem "bootstrap_form", "~> 5.1"
Then:
bundle install
Depending on which CSS pre-processor you are using, adding the bootstrap form styles differs slightly. If you use Rails in the default mode without any pre-processor, you'll have to add the following line to your application.css
file:
*= require rails_bootstrap_forms
If you followed the official bootstrap installation guide, you'll probably have switched to SCSS. In this case add the following line to your application.scss
:
@import "rails_bootstrap_forms";
To get started, use the bootstrap_form_for
helper in place of the Rails form_for
helper. Here's an example:
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %>
This generates the following HTML:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3">
<label class="form-label required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
<div class="form-check mb-3">
<input autocomplete="off" name="user[remember_me]" type="hidden" value="0">
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="form-check-label" for="user_remember_me">Remember me</label>
</div>
<input class="btn btn-secondary" data-disable-with="Log In" name="commit" type="submit" value="Log In">
</form>
If your form is not backed by a model, use the bootstrap_form_tag
. Usage of this helper is the same as bootstrap_form_for
, except no model object is passed in as the first argument. Here's an example:
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
<%= f.email_field :email, value: 'name@example.com' %>
<%= f.submit %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/subscribe" method="post">
<div class="mb-3">
<label class="form-label" for="email">Email</label>
<input class="form-control" id="email" name="email" type="email" value="name@example.com">
</div>
<input class="btn btn-secondary" data-disable-with="Save " name="commit" type="submit" value="Save ">
</form>
Note that form_with
in Rails 5.1 does not add IDs to form elements and labels by default, which are both important to Bootstrap markup. This behaviour is corrected in Rails 5.2.
To get started, just use the bootstrap_form_with
helper in place of form_with
. Here's an example:
<%= bootstrap_form_with(model: @user, local: true) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password, help: 'A good password should be at least six characters long' %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" method="post">
<div class="mb-3">
<label class="form-label required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
<small class="form-text text-muted">A good password should be at least six characters long</small>
</div>
<div class="form-check mb-3">
<input autocomplete="off" name="user[remember_me]" type="hidden" value="0">
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="form-check-label" for="user_remember_me">Remember me</label>
</div>
<input class="btn btn-secondary" data-disable-with="Log In" name="commit" type="submit" value="Log In">
</form>
bootstrap_form_with
supports both the model:
and url:
use cases in form_with
.
form_with
has some important differences compared to form_for
and form_tag
, and these differences apply to bootstrap_form_with
. A good summary of the differences can be found at: https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a, or in the Rails documentation.
bootstrap_form
can be used out-of-the-box without any configuration. However, bootstrap_form
does have an optional configuration file at config/initializers/bootstrap_form.rb
for setting options that affect all generated forms in an application.
The current configuration options are:
Option | Default value | Description |
---|---|---|
default_form_attributes | bootstrap_form versions 3 and 4 added a role="form" attribute to all forms. The W3C validator will raise a warning on forms with a role="form" attribute. bootstrap_form version 5 drops this attribute by default. Set this option to { role: "form" } to make forms non-compliant with W3C, but generate the role="form" attribute like bootstrap_form versions 3 and 4. |
Example:
# config/initializers/bootstrap_form.rb
BootstrapForm.configure do |c|
c.default_form_attributes = { role: "form" } # to make forms non-compliant with W3C.
end
bootstrap_form
provides its own version of the following Rails form helpers:
button email_field search_field
check_box file_field select
collection_check_boxes grouped_collection_select submit
collection_radio_buttons hidden_field (not wrapped, but supported) telephone_field
collection_select month_field text_area
color_field number_field text_field
date_field password_field time_field
date_select phone_field time_select
datetime_field radio_button time_zone_select
datetime_local_field range_field url_field
datetime_select rich_text_area (Rails 6+) week_field
By default, the helpers generate a label
tag, and an input
, select
, or textarea
tag, by calling the Rails label
helper, and then the Rails helper with the same name as the bootstrap_form
helper.
The bootstrap_form
helpers accept the same options as the standard Rails form helpers, and pass those options through to the Rails helper. They also accept additional options, described in the following section.
Many of the helpers accept the same options. The exceptions are:
button, check_box, collection_check_boxes, collection_radio_buttons, collection_select, date_select, datetime_select, file_field, grouped_collection_select, hidden_field, radio_button, rich_text_area, select, submit, time_select, time_zone_select
The options for the form helpers that aren't in the exceptions list are described in the following sub-sections:
Use the label
option if you want to specify the field's label text:
<%= f.password_field :password_confirmation, label: "Confirm Password" %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_password_confirmation">Confirm Password</label>
<input class="form-control" id="user_password_confirmation" name="user[password_confirmation]" type="password">
</div>
To hide a label, use the hide_label: true
option. This adds the visually-hidden
class, which keeps your labels accessible to those using screen readers.
<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>
This generates:
<div class="mb-3">
<label class="form-label visually-hidden" for="user_comment">Comment</label>
<textarea class="form-control" id="user_comment" name="user[comment]" placeholder="Leave a comment...">
</textarea>
</div>
To add custom classes to the field's label:
<%= f.text_field :email, label_class: "custom-class" %>
This generates:
<div class="mb-3">
<label class="form-label custom-class required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com">
</div>
Or you can add the label as input placeholder instead (this automatically hides the label):
<%= f.text_field :email, label_as_placeholder: true %>
This generates:
<div class="mb-3">
<label class="form-label visually-hidden required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" placeholder="Email" type="text" value="steve@example.com">
</div>
To specify the class of the generated input tag, use the control_class
option:
<%= f.text_field :email, control_class: "custom-class" %>
This generates:
<div class="mb-3">
<label class="form-label required" for="user_email">Email</label>
<input class="custom-class" id="user_email" name="user[email]" type="text" value="steve@example.com">
</div>
To add help text, use the help
option:
<%= f.password_field :password, help: "Must be at least 6 characters long" %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
<small class="form-text text-muted">Must be at least 6 characters long</small>
</div>
This gem is also aware of help messages in locale translation files (i18n):
en:
activerecord:
help:
user:
password: "A good password should be at least six characters long"
Help translations containing HTML should follow the convention of appending _html
to the name:
en:
activerecord:
help:
user:
password_html: "A <strong>good</strong> password should be at least six characters long"
If your model name has multiple words (like SuperUser
), the key on the translation file should be underscored (super_user
).
You can override help translations for a particular field by passing the help
option or turn them off completely by passing help: false
.
You can pass prepend
and/or append
options to input fields:
<%= f.text_field :price, prepend: "$", append: ".00" %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_price">Price</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input class="form-control" id="user_price" name="user[price]" type="text">
<span class="input-group-text">.00</span>
</div>
</div>
If you want to attach multiple items to the input, pass them as an array:
<%= f.text_field :price, prepend: ['Net', '$'], append: ['.00', 'per day'] %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_price">Price</label>
<div class="input-group">
<span class="input-group-text">Net</span>
<span class="input-group-text">$</span>
<input class="form-control" id="user_price" name="user[price]" type="text">
<span class="input-group-text">.00</span>
<span class="input-group-text">per day</span>
</div>
</div>
You can also prepend and append buttons. Note: The buttons must contain the btn
class to generate the correct markup.
<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_search">Search</label>
<div class="input-group">
<input class="form-control" id="user_search" name="user[search]" type="text">
<a class="btn btn-secondary" href="#">Go</a>
</div>
</div>
To add a class to the input group wrapper, use the :input_group_class
option.
<%= f.email_field :email, append: f.primary('Subscribe'), input_group_class: 'input-group-lg' %>
This generates:
<div class="mb-3">
<label class="form-label required" for="user_email">Email</label>
<div class="input-group input-group-lg">
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
<input class="btn btn-primary" data-disable-with="Subscribe" name="commit" type="submit" value="Subscribe">
</div>
</div>
Bootstrap mark-up dictates that most input field types have the label and input wrapped in a div.mb-3
.
If you want to change the CSS class or any other attribute to the form group div, you can use the wrapper: { class: 'mb-3 additional-class', data: { foo: 'bar' } }
option.
<%= f.text_field :name, wrapper: { class: 'mb-3 has-warning', data: { foo: 'bar' } } %>
This generates:
<div class="mb-3 has-warning" data-foo="bar">
<label class="form-label" for="user_name">Name</label>
<input class="form-control" id="user_name" name="user[name]" type="text">
</div>
Which produces the following output:
<div class="mb-3 has-warning" data-foo="bar">
<label class="form-label form-control-label" for="user_name">Id</label>
<input class="form-control" id="user_name" name="user[name]" type="text">
</div>
This generates:
<div class="mb-3 has-warning" data-foo="bar">
<label class="form-label form-control-label" for="user_name">Id</label>
<input class="form-control" id="user_name" name="user[name]" type="text">
</div>
If you only want to set the class on the form group div, you can use the wrapper_class
option: wrapper_class: 'mb-3 additional-class'
. It's just a short form of wrapper: { class: 'mb-3 additional-class' }
.
If you don't want any class on the form group div, you can set it to false
: wrapper_class: false
.
You may want to define your own form group div around a field. To do so, add the option wrapper: false
to the input field. For example:
<%= f.form_group :user do %>
<%= f.email_field :email, wrapper: false %>
<% end %>
Generated HTML:
<div class="mb-3">
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
Note that Bootstrap relies on the form group div to correctly format most fields, so if you use the wrapper: false
option, you should provide your own form group div around the input field. You can write your own HTML, or use the form_group
helper.
Our select helper accepts the same arguments as the default Rails helper. Here's an example of how you pass both options and html_options hashes:
<%= f.select :product, [["Apple", 1], ["Grape", 2]], { label: "Choose your favorite fruit:", wrapper: { class: 'has-warning', data: { foo: 'bar' } } }, { class: "selectpicker" } %>
This generates:
<div class="has-warning" data-foo="bar">
<label class="form-label" for="user_product">Choose your favorite fruit:</label>
<select class="form-select selectpicker" id="user_product" name="user[product]">
<option value="1">Apple</option>
<option value="2">Grape</option>
</select>
</div>
Checkboxes and radios should be placed inside of a form_group
to render properly. The following example ensures that the entire form group will display an error if an associated validations fails:
<%= f.form_group :skill_level, label: { text: "Skill" }, help: "Optional Help Text" do %>
<%= f.radio_button :skill_level, 0, label: "Novice", checked: true %>
<%= f.radio_button :skill_level, 1, label: "Intermediate" %>
<%= f.radio_button :skill_level, 2, label: "Advanced" %>
<% end %>
<%= f.form_group :terms do %>
<%= f.check_box :terms, label: "I agree to the Terms of Service" %>
<% end %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_skill_level">Skill</label>
<div class="form-check">
<input checked class="form-check-input" id="user_skill_level_0" name="user[skill_level]" type="radio" value="0">
<label class="form-check-label" for="user_skill_level_0">Novice</label>
</div>
<div class="form-check">
<input class="form-check-input" id="user_skill_level_1" name="user[skill_level]" type="radio" value="1">
<label class="form-check-label" for="user_skill_level_1">Intermediate</label>
</div>
<div class="form-check">
<input class="form-check-input" id="user_skill_level_2" name="user[skill_level]" type="radio" value="2">
<label class="form-check-label" for="user_skill_level_2">Advanced</label>
</div>
<small class="form-text text-muted">Optional Help Text</small>
</div>
<div class="mb-3">
<div class="form-check mb-3">
<input autocomplete="off" name="user[terms]" type="hidden" value="0">
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1">
<label class="form-check-label" for="user_terms">I agree to the Terms of Service</label>
</div>
</div>
You can also create a checkbox using a block:
<%= f.form_group :terms, label: { text: "Optional Label" } do %>
<%= f.check_box :terms do %>
You need to check this box to accept our terms of service and privacy policy
<% end %>
<% end %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_terms">Optional Label</label>
<div class="form-check mb-3">
<input autocomplete="off" name="user[terms]" type="hidden" value="0">
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1">
<label class="form-check-label" for="user_terms">
You need to check this box to accept our terms of service and privacy policy
</label>
</div>
</div>
To display checkboxes and radios inline, pass the inline: true
option:
<%= f.form_group :skill_level, label: { text: "Skill" } do %>
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true %>
<%= f.radio_button :skill_level, 1, label: "Intermediate", inline: true %>
<%= f.radio_button :skill_level, 2, label: "Advanced", inline: true %>
<% end %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_skill_level">Skill</label>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_skill_level_0" name="user[skill_level]" type="radio" value="0">
<label class="form-check-label" for="user_skill_level_0">Novice</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_skill_level_1" name="user[skill_level]" type="radio" value="1">
<label class="form-check-label" for="user_skill_level_1">Intermediate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="user_skill_level_2" name="user[skill_level]" type="radio" value="2">
<label class="form-check-label" for="user_skill_level_2">Advanced</label>
</div>
</div>
Check boxes and radio buttons are wrapped in a div.form-check
. You can add classes to this div
with the :wrapper_class
option:
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper_class: "w-auto" %>
This generates:
<div class="form-check form-check-inline w-auto">
<input class="form-check-input" id="user_skill_level_0" name="user[skill_level]" type="radio" value="0">
<label class="form-check-label" for="user_skill_level_0">Novice</label>
</div>
You can also add a style to the tag using the wrapper
option:
<%= f.check_box :skilled, inline: true, wrapper: {style: "color: green"} %>
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper: {class: 'w-auto', style: "color: red"} %>
This generates:
<div class="form-check form-check-inline mb-3" style="color: green">
<input autocomplete="off" name="user[skilled]" type="hidden" value="0">
<input class="form-check-input" id="user_skilled" name="user[skilled]" type="checkbox" value="1">
<label class="form-check-label" for="user_skilled">Skilled</label>
</div>
<div class="form-check form-check-inline w-auto" style="color: red">
<input class="form-check-input" id="user_skill_level_0" name="user[skill_level]" type="radio" value="0">
<label class="form-check-label" for="user_skill_level_0">Novice</label>
</div>
To render checkboxes as switches with Bootstrap 4.2+, use switch: true
:
<%= f.check_box :remember_me, switch: true %>
This generates:
<div class="form-check mb-3 form-switch">
<input autocomplete="off" name="user[remember_me]" type="hidden" value="0">
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="form-check-label" for="user_remember_me">Remember me</label>
</div>
bootstrap_form
also provides helpers that automatically create the form_group
and the radio_button
s or check_box
es for you:
<%= f.collection_radio_buttons :skill_level, Skill.all, :id, :name %>
<%= f.collection_check_boxes :skills, Skill.all, :id, :name %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_skill_level">Skill level</label>
<div class="form-check">
<input class="form-check-input" id="user_skill_level_1" name="user[skill_level]" type="radio" value="1">
<label class="form-check-label" for="user_skill_level_1">Mind reading</label>
</div>
<div class="form-check">
<input class="form-check-input" id="user_skill_level_2" name="user[skill_level]" type="radio" value="2">
<label class="form-check-label" for="user_skill_level_2">Farming</label>
</div>
</div>
<input autocomplete="off" id="user_skills" multiple name="user[skills][]" type="hidden" value="">
<div class="mb-3">
<label class="form-label" for="user_skills">Skills</label>
<div class="form-check">
<input class="form-check-input" id="user_skills_1" name="user[skills][]" type="checkbox" value="1">
<label class="form-check-label" for="user_skills_1">Mind reading</label>
</div>
<div class="form-check">
<input class="form-check-input" id="user_skills_2" name="user[skills][]" type="checkbox" value="2">
<label class="form-check-label" for="user_skills_2">Farming</label>
</div>
</div>
NOTE: These helpers do not currently support a block, unlike their equivalent Rails helpers. See issue #477. If you need to use the block syntax, use collection_check_boxes_without_bootstrap
or collection_radio_buttons_without_bootstrap
for now.
Collection methods accept these options:
:label
: Customize the form_group
's label:hide_label
: Pass true to hide the form_group
's label:help
: Add a help span to the form_group
radio_button
/check_box
methodYou can create a range control like this:
<%= f.range_field :excellence %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_excellence">Excellence</label>
<input class="form-control" id="user_excellence" name="user[excellence]" type="range">
</div>
You can create a static control like this:
<%= f.static_control :email %>
This generates:
<div class="mb-3">
<label class="form-label required" for="user_email">Email</label>
<input class="form-control-plaintext" id="user_email" name="user[email]" readonly type="text" value="steve@example.com">
</div>
Here's the output for a horizontal layout:
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
<%= f.static_control :email %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input class="form-control-plaintext" id="user_email" name="user[email]" readonly type="text" value="steve@example.com">
</div>
</div>
</form>
You can also create a static control that isn't based on a model attribute:
<%= f.static_control :field_name, label: "Custom Static Control", value: "Content Here" %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_field_name">Custom Static Control</label>
<input class="form-control-plaintext" id="user_field_name" name="user[field_name]" readonly type="text" value="Content Here">
</div>
field_name
may be any name that isn't already used in the form. Note that you may get "unpermitted parameter" messages in your log file with this approach.
You can also create the static control the following way, if you don't need to get the value of the static control as a parameter when the form is submitted:
<%= f.static_control label: "Custom Static Control", value: "Content Here", name: nil %>
This generates:
<div class="mb-3">
<label class="form-label" for="user_">Custom Static Control</label>
<input class="form-control-plaintext" id="user_" readonly type="text" value="Content Here">
</div>
(If you neither provide a field name nor name: nil
, the Rails code that submits the form will give a JavaScript error.)
Prior to version 4 of bootstrap_form
, you could pass a block to the static_control
method. The value of the block would be used for the content of the static "control". Bootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the value:
option. Passing a block to static_control
no longer has any effect.
The multiple selects that the date and time helpers (date_select
, time_select
, datetime_select
) generate are wrapped inside a div.rails-bootstrap-forms-[date|time|datetime]-select
tag. This is because Bootstrap automatically styles our controls as block
s. This wrapper fixes this defining these selects as inline-block
and a width of auto
.
The btn btn-secondary
CSS classes are automatically added to your submit buttons.
<%= f.submit %>
This generates:
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
You can also use the primary
helper, which adds btn btn-primary
to your submit button:
<%= f.primary "Optional Label" %>
This generates:
<input class="btn btn-primary" data-disable-with="Optional Label" name="commit" type="submit" value="Optional Label">
You can specify your own classes like this:
<%= f.submit "Log In", class: "btn btn-success" %>
This generates:
<input class="btn btn-success" data-disable-with="Log In" name="commit" type="submit" value="Log In">
If the primary
helper receives a render_as_button: true
option or a block, it will be rendered as an HTML button, instead of an input tag. This allows you to specify HTML content and styling for your buttons (such as adding illustrative icons to them). For example, the following statements
<%= f.primary "Save changes <span class='fa fa-save'></span>".html_safe, render_as_button: true %>
<%= f.primary do
concat 'Save changes '
concat content_tag(:span, nil, class: 'fa fa-save')
end %>
This generates:
<button class="btn btn-primary" name="button" type="submit">Save changes <span class="fa fa-save">
</span>
</button>
<button class="btn btn-primary" name="button" type="submit">Save changes <span class="fa fa-save">
</span>
</button>
are equivalent, and each of them both be rendered as:
<button name="button" type="submit" class="btn btn-primary">Save changes <span class="fa fa-save"></span></button>
If you wish to add additional CSS classes to your button, while keeping the default ones, you can use the extra_class
option. This is particularly useful for adding extra details to buttons (without forcing you to repeat the Bootstrap classes), or for element targeting via CSS classes. Be aware, however, that using the class
option will discard any extra classes you add. As an example, the following button declarations
<%= f.primary "My Nice Button", extra_class: 'my-button' %>
<%= f.primary "My Button", class: 'my-button' %>
will be rendered as
<input class="btn btn-primary my-button" data-disable-with="My Nice Button" name="commit" type="submit" value="My Nice Button">
<input class="my-button" data-disable-with="My Button" name="commit" type="submit" value="My Button">
(some unimportant HTML attributes have been removed for simplicity)
If you're using Rails 6, bootstrap_form
supports the rich_text_area
helper.
<%= f.rich_text_area(:life_story) %>
will be rendered as:
<div class="mb-3">
<label class="form-label" for="user_life_story">Life story</label>
<input autocomplete="off" id="user_life_story_trix_input_user" name="user[life_story]" type="hidden">
<trix-toolbar id="trix-toolbar-1">
<div class="trix-button-row">
<span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
<button class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" tabindex="-1" title="Bold" type="button">Bold</button>
<button class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" tabindex="-1" title="Italic" type="button">Italic</button>
<button class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" tabindex="-1" title="Strikethrough" type="button">Strikethrough</button>
<button class="trix-button trix-button--icon trix-button--icon-link" data-trix-action="link" data-trix-attribute="href" data-trix-key="k" tabindex="-1" title="Link" type="button">Link</button>
</span>
<span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
<button class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading1" tabindex="-1" title="Heading" type="button">Heading</button>
<button class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" tabindex="-1" title="Quote" type="button">Quote</button>
<button class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" tabindex="-1" title="Code" type="button">Code</button>
<button class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" tabindex="-1" title="Bullets" type="button">Bullets</button>
<button class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" tabindex="-1" title="Numbers" type="button">Numbers</button>
<button class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" tabindex="-1" title="Decrease Level" type="button">Decrease Level</button>
<button class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" tabindex="-1" title="Increase Level" type="button">Increase Level</button>
</span>
<span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
<button class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" tabindex="-1" title="Attach Files" type="button">Attach Files</button>
</span>
<span class="trix-button-group-spacer">
</span>
<span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
<button class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" tabindex="-1" title="Undo" type="button">Undo</button>
<button class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" tabindex="-1" title="Redo" type="button">Redo</button>
</span>
</div>
<div class="trix-dialogs" data-trix-dialogs="">
<div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
<div class="trix-dialog__link-fields">
<input aria-label="URL" class="trix-input trix-input--dialog" data-trix-input="" disabled name="href" placeholder="Enter a URL…" required="" type="url">
<div class="trix-button-group">
<input class="trix-button trix-button--dialog" data-trix-method="setAttribute" type="button" value="Link">
<input class="trix-button trix-button--dialog" data-trix-method="removeAttribute" type="button" value="Unlink">
</div>
</div>
</div>
</div>
</trix-toolbar>
<trix-editor aria-label="Life story" class="trix-content form-control" contenteditable="" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" id="user_life_story" input="user_life_story_trix_input_user" role="textbox" toolbar="trix-toolbar-1" trix-id="1">
</trix-editor>
</div>
The file_field
helper generates mark-up for a Bootstrap 4 custom file field entry. It takes the options for text_field
, minus append
and prepend
.
The hidden_field
helper in bootstrap_form
calls the Rails helper directly, and does no additional mark-up.
If you want to use the original Rails form helpers for a particular field, append _without_bootstrap
to the helper:
<%= f.text_field_without_bootstrap :email %>
This generates:
<input id="user_email" name="user[email]" type="text" value="steve@example.com">
By default, your forms will stack labels on top of controls and your controls will grow to 100 percent of the available width. This is consistent with Bootstrap's "mobile first" approach.
To use an inline-layout form, use the layout: :inline
option. To hide labels, use the hide_label: true
option, which keeps your labels accessible to those using screen readers.
<%= bootstrap_form_for(@user, layout: :inline) do |f| %>
<%= f.email_field :email, hide_label: true %>
<%= f.password_field :password, hide_label: true %>
<%= f.check_box :remember_me %>
<%= f.submit %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user row row-cols-auto g-3 align-items-center" id="new_user" method="post">
<div class="col">
<label class="form-label visually-hidden mr-sm-2 required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
<div class="col">
<label class="form-label visually-hidden mr-sm-2" for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
<div class="form-check form-check-inline mb-3">
<input autocomplete="off" name="user[remember_me]" type="hidden" value="0">
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="form-check-label" for="user_remember_me">Remember me</label>
</div>
<div class="col">
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
</div>
</form>
To skip label rendering at all, use skip_label: true
option.
<%= f.password_field :password, skip_label: true %>
This generates:
<div class="mb-3">
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
To use a horizontal-layout form with labels to the left of the control, use the layout: :horizontal
option. You should specify both label_col
and control_col
css classes as well (they default to col-sm-2
and col-sm-10
).
In the example below, the checkbox and submit button have been wrapped in a form_group
to keep them properly aligned.
<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.form_group do %>
<%= f.check_box :remember_me %>
<% end %>
<%= f.form_group do %>
<%= f.submit %>
<% end %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
</div>
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_password">Password</label>
<div class="col-sm-10">
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input autocomplete="off" name="user[remember_me]" type="hidden" value="0">
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="form-check-label" for="user_remember_me">Remember me</label>
</div>
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-10 offset-sm-2">
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
</div>
</div>
</form>
The label_col
and control_col
css classes can also be changed per control:
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
<%= f.email_field :email %>
<%= f.text_field :age, control_col: "col-sm-3" %>
<%= f.form_group do %>
<%= f.submit %>
<% end %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
</div>
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_age">Age</label>
<div class="col-sm-3">
<input class="form-control" id="user_age" name="user[age]" type="text" value="42">
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-10 offset-sm-2">
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
</div>
</div>
</form>
or default value can be changed in initializer:
# config/initializers/bootstrap_form.rb
module BootstrapForm
class FormBuilder
def default_label_col
'col-sm-4'
end
def default_control_col
'col-sm-8'
end
def default_layout
# :default, :horizontal or :inline
:horizontal
end
end
end
Control col wrapper class can be modified with add_control_col_class
. This option will preserve column definition:
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
<%= f.email_field :email %>
<%= f.text_field :age, add_control_col_class: "additional-control-col-class" %>
<%= f.form_group do %>
<%= f.submit %>
<% end %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
</div>
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2" for="user_age">Age</label>
<div class="col-sm-10 additional-control-col-class">
<input class="form-control" id="user_age" name="user[age]" type="text" value="42">
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-10 offset-sm-2">
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
</div>
</div>
</form>
The form-level layout
can be overridden per field, unless the form-level layout was inline
:
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
<%= f.email_field :email %>
<%= f.text_field :feet, layout: :default %>
<%= f.text_field :inches, layout: :default %>
<%= f.form_group do %>
<%= f.submit %>
<% end %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 row">
<label class="form-label col-form-label col-sm-2 required" for="user_email">Email</label>
<div class="col-sm-10">
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="user_feet">Feet</label>
<input class="form-control" id="user_feet" name="user[feet]" type="text" value="5">
</div>
<div class="mb-3">
<label class="form-label" for="user_inches">Inches</label>
<input class="form-control" id="user_inches" name="user[inches]" type="text" value="7">
</div>
<div class="mb-3 row">
<div class="col-sm-10 offset-sm-2">
<input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
</div>
</div>
</form>
A form-level layout: :inline
can't be overridden because of the way Bootstrap 4 implements in-line layouts. One possible work-around is to leave the form-level layout as default, and specify the individual fields as layout: :inline
, except for the fields(s) that should be other than in-line.
The custom
option can be used to replace the browser default styles for check boxes and radio buttons with dedicated Bootstrap styled form elements. Here's an example:
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me, custom: true %>
<%= f.submit "Log In" %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3">
<label class="form-label required" for="user_email">Email</label>
<input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
<div class="form-check mb-3">
<input autocomplete="off" name="user[remember_me]" type="hidden" value="0">
<input class="form-check-input" custom="true" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="form-check-label" for="user_remember_me">Remember me</label>
</div>
<input class="btn btn-secondary" data-disable-with="Log In" name="commit" type="submit" value="Log In">
</form>
The floating
option can be used to enable Bootstrap 5's floating labels. This option is supported on text fields and dropdowns. Here's an example:
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email, floating: true %>
<%= f.password_field :password, floating: true %>
<%= f.password_field :password, floating: true %>
<%= f.select :status, [["Active", 1], ["Inactive", 2]], include_blank: "Select a value", floating: true %>
<%= f.submit "Log In" %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="mb-3 form-floating">
<input class="form-control" id="user_email" name="user[email]" placeholder="Email" type="email" value="steve@example.com">
<label class="form-label required" for="user_email">Email</label>
</div>
<div class="mb-3 form-floating">
<input class="form-control" id="user_password" name="user[password]" placeholder="Password" type="password">
<label class="form-label" for="user_password">Password</label>
</div>
<div class="mb-3 form-floating">
<input class="form-control" id="user_password" name="user[password]" placeholder="Password" type="password">
<label class="form-label" for="user_password">Password</label>
</div>
<div class="mb-3 form-floating">
<select class="form-select" id="user_status" name="user[status]">
<option value="">Select a value</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
<label class="form-label" for="user_status">Status</label>
</div>
<input class="btn btn-secondary" data-disable-with="Log In" name="commit" type="submit" value="Log In">
</form>
Rails normally wraps fields with validation errors in a div.field_with_errors
, but this behaviour isn't consistent with Bootstrap 4 styling. By default, bootstrap_form
generations in-line errors which appear below the field. But it can also generate errors on the label, or not display any errors, leaving it up to you.
By default, fields that have validation errors will be outlined in red and the error will be displayed below the field. Here's an example:
<div class="mb-3">
<label class="form-label form-control-label" for="user_email">Email</label>
<input class="form-control is-invalid" id="user_email" name="user[email]" type="email" value="">
<small class="invalid-feedback">can't be blank</small>
</div>
You can turn off inline errors for the entire form like this:
<%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
...
<% end %>
You can also display validation errors in the field's label; just turn on the :label_errors
option. Here's an example:
<%= bootstrap_form_for(@user, label_errors: true) do |f| %>
...
<% end %>
By default, turning on :label_errors
will also turn off :inline_errors
. If you want both turned on, you can do that too:
<%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %>
...
<% end %>
To display an error message with an error summary, you can use the alert_message
helper. This won't output anything unless a model validation has failed.
<%= bootstrap_form_for @user_with_error do |f| %>
<%= f.alert_message "Please fix the errors below." %>
<% end %>
Which outputs:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="alert alert-danger">
<p>Please fix the errors below.</p>
<ul class="rails-bootstrap-forms-error-summary">
<li>Email is invalid</li>
<li>Misc is invalid</li>
</ul>
</div>
</form>
You can turn off the error summary like this:
<%= bootstrap_form_for @user_with_error do |f| %>
<%= f.alert_message "Please fix the errors below.", error_summary: false %>
<% end %>
This generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="alert alert-danger">Please fix the errors below.</div>
</form>
To output a simple unordered list of errors, use the error_summary
helper.
<%= bootstrap_form_for @user_with_error do |f| %>
<%= f.error_summary %>
<% end %>
Which outputs:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<ul class="rails-bootstrap-forms-error-summary">
<li>Email is invalid</li>
<li>Misc is invalid</li>
</ul>
</form>
If you want to display a custom inline error for a specific attribute not represented by a form field, use the errors_on
helper.
<%= bootstrap_form_for @user_with_error do |f| %>
<%= f.errors_on :email %>
<% end %>
Which outputs:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="invalid-feedback">Email is invalid</div>
</form>
You can hide the attribute name like this:
<%= bootstrap_form_for @user_with_error do |f| %>
<%= f.errors_on :email, hide_attribute_name: true %>
<% end %>
Which outputs:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="invalid-feedback">is invalid</div>
</form>
You can also use a custom class for the wrapping div, like this:
<%= bootstrap_form_for @user_with_error do |f| %>
<%= f.errors_on :email, custom_class: 'custom-error' %>
<% end %>
Which outputs:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div class="custom-error">Email is invalid</div>
</form>
A label that is associated with a required field is automatically annotated with a required
CSS class. bootstrap_form
doesn't provide any styling for required fields. You're free to add any appropriate CSS to style required fields as desired. One example would be to automatically add an asterisk to the end of the label:
label.required:after {
content:" *";
}
The label required
class is determined based on the definition of a presence validator with the associated model attribute. Presently this is one of: ActiveRecord::Validations::PresenceValidator or ActiveModel::Validations::PresenceValidator.
In cases where this behaviour is undesirable, use the required
option to force the class to be present or absent:
<%= f.password_field :login, label: "New Username", required: true %>
<%= f.password_field :password, label: "New Password", required: false %>
This generates:
<div class="mb-3">
<label class="form-label required" for="user_login">New Username</label>
<input class="form-control" id="user_login" name="user[login]" required="required" type="password">
</div>
<div class="mb-3">
<label class="form-label" for="user_password">New Password</label>
<input class="form-control" id="user_password" name="user[password]" type="password">
</div>
bootstrap_form follows standard rails conventions so it's i18n-ready. See more here: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models
The Rails team has suggested that form_for
and form_tag
may be deprecated and then removed in future versions of Rails. bootstrap_form
will continue to support bootstrap_form_for
and bootstrap_form_tag
as long as Rails supports form_for
and form_tag
.
By their very nature, forms are extremely diverse. It would be extremely difficult to provide a gem that could handle every need. Here are some tips for handling edge cases.
Some third party plug-ins require an empty but visible label on an input control. The hide_label
option generates a label that won't appear on the screen, but it's considered invisible and therefore doesn't work with such a plug-in. An empty label (e.g. ""
) causes the underlying Rails helper to generate a label based on the field's attribute's name.
The solution is to use a zero-width character for the label, or some other "empty" HTML. For example:
label: "​".html_safe
or
label: "<span></span>".html_safe
We welcome contributions. If you're considering contributing to bootstrap_form, please review the Contributing document first.
If you're looking for bootstrap_form
for Bootstrap 4, go here.
Author: bootstrap-ruby
Source code: https://github.com/bootstrap-ruby/bootstrap_form
License: MIT license
1659330325
An implementation of the excellent Bootstrap framework using the Dojo Toolkit. This project replaces the Bootstrap JavaScript components with AMD-compatible Dojo modules. Tested with Dojo 1.9.3 and Bootstrap 3.1.1.
git clone git://github.com/xsokev/Dojo-Bootstrap.git
vendor/dojo
by running bower install
.http://host/path/to/Dojo-bootstrap/tests/index.html
See examples in test/test_*.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojo-Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/bootstrap/styles.css">
</head>
<body>
<button type="button" id="loading-button" class="btn btn-primary" data-loading-text="Loading...">Load</button>
<script>
var dojoConfig = {
async: 1,
packages: [
{ name: "bootstrap", location: "path/to/Dojo-Bootstrap" }
]
};
</script>
<script type="text/javascript" src="path/to/dojo/dojo/dojo.js"></script>
<script>
require(["bootstrap/Button", "dojo/query"], function (Button, query) {
query("#loading-button").on("click", function(e){
query(e.target).button('loading');
setTimeout(function(){
query(e.target).button('reset');
}, 2000);
});
});
</script>
</body>
</html>
See the Tests wiki page for info on running and writing Dojo Bootstrap tests.
Author: xsokev
Source Code: https://github.com/xsokev/Dojo-Bootstrap
License: Apache-2.0 license
1659319140
Dojo Bootstrap
Bootstrap theme for Dojo.
Just want the theme for your project? Grab the latest built version from the releases page:
Download and unzip the relevant zip file.
Copy (or link) the folder dbootstrap into the appropriate location in your project and ensure you notify Dojo about the location. One way to do this is through the Dojo config:
'packages': [
...,
{
location: '/path/to/dbootstrap',
name: 'dbootstrap'
}
]
Add a require call for dbootstrap. You must require dbootstrap before any Dijit widgets are loaded for the icons to work correctly:
require(['dbootstrap', ...], function(dbootstrap) {
// Start application.
});
Add dbootstrap as a css class to your <body> element:
<body class='dbootstrap'>
View your project as normal.
$ git clone --recursive git://github.com/martinpengellyphillips/dbootstrap.git
To build the project locally you will need the following installed:
All other requirements are bundled as git submodules so make sure you have initialised them (the default when using --recursive with git clone)
To build the demo locally:
Navigate to your clone of the repo:
$ cd /path/to/dbootstrap
Build it:
$ python build.py demo
Note
If you like to see what is going on under the hood, run with a lower logging level:
$ python build.py -v debug demo
Fire up a server:
$ cd build/demo
$ python -m SimpleHTTPServer 8000
Take a look:
Point your browser at http://localhost:8000/
Useful if you just want a quick play of the theme with your project. For a better solution see the integrated build below.
Navigate to your clone of the repo:
$ cd /path/to/dbootstrap
Build just the theme:
$ python build.py theme
Note
If you like to see what is going on under the hood, run with a lower logging level:
$ python build.py -v debug theme
Copy (or link) the resulting package dbootstrap/build/theme/dbootstrap into the appropriate location in your project and ensure you notify Dojo about the location. One way to do this is through the Dojo config:
'packages': [
...,
{
location: '/path/to/dbootstrap',
name: 'dbootstrap'
}
]
Add a require call for dbootstrap. You must require dbootstrap before any Dijit widgets are loaded for the icons to work correctly:
require(['dbootstrap', ...], function(dbootstrap) {
// Start application.
});
Add dbootstrap as a css class to your <body> element:
<body class='dbootstrap'>
View your project as normal.
Copy or link the dbootstrap/source/dbootstrap folder into your project (typically so that it is a sibling to your Dojo and Dijit packages). You will also need to link the xstyle and nib packages if you don't already have them.
Note
Only tested with Dojo 1.8+
Add the following to your build profile.js to include dbootstrap as a package and separate build layer:
packages: [
...
'dbootstrap',
'xstyle'
],
layers: {
...
'dbootstrap/main': {
include: [
'dbootstrap/main',
'xstyle/load-css'
],
}
}
Note
If you have placed your dbootstrap package somewhere that isn't directly accessible as a child directory of your basePath then you must use the fuller package syntax in the packages list:
{
location: '/path/to/dbootstrap',
name: 'dbootstrap'
}
In your main application entry point (or index.html) require the dbootstrap package before any Dijit widgets are loaded:
require(['dbootstrap', ...], function(dbootstrap) {
// Start application.
});
Add dbootstrap as a css class to your <body> element:
<body class='dbootstrap'>
Add to your build process relevant calls to Stylus to compile the CSS files into one dbootstrap.css file:
$ stylus --include path/to/dbootstrap/nib/lib \
--include path/to/dbootstrap/theme/dbootstrap \
path/to/dbootstrap/theme/dbootstrap/index.styl
$ mv path/to/dbootstrap/theme/dbootstrap/index.css \
path/to/dbootstrap/theme/dbootstrap/dbootstrap.css
Note
The CSS build must happen before the Dojo build is performed as the generated css file is required as part of the build. Therefore, the css file is built in the source tree to be copied to the build directory during the Dojo build step.
Build your project and view as normal.
Bugs or enhancements can be reported by opening an issue at https://github.com/martinpengellyphillips/dbootstrap/issues.
When reporting a bug, please try to provide the following information:
- Affected browsers and Dojo versions.
- A clear list of steps to reproduce the problem.
- If the problem cannot be easily reproduced then please include an example reduced test case (for example, as a Gist).
If you would like to propose a fix for a particular issue then you are welcome to fork dbootstrap, create a branch and submit a pull request. Please note that a Dojo CLA is required for any non-trivial modifications.
The icons are provided by the excellent Font-Awesome team at http://fortawesome.github.com/Font-Awesome/
Author: Atoha
Source Code: https://github.com/atoha/dbootstrap
License: View license