- Accordion
- Alert
- Avatar PRO
- Avatar Group PRO
- Badge
- Blank Slate PRO
- Breadcrumb
- Breakpoint Debug PRO
- Button
- Button Group
- Callout PRO
- Card
- Carousel
- Close Button
- Container
- Copy to Clipboard PRO
- Divider PRO
- Dropdown
- Errors PRO
- Feed PRO
- Flash PRO
- Form Field PRO
- Header PRO
- Heading
- Heading with Anchor PRO
- List Group
- Modal
- Nav
- Navbar
- Offcanvas
- Pagination
- Pricing Panel PRO
- Progress
- Progress Circular PRO
- Rating Group PRO
- Ribbon PRO
- Spinner
- Stat PRO
- Stepper PRO
- Table
- Table of Contents PRO
- Team Member PRO
- Testimonial PRO
- Toast
Container
Description
Use Bootstrap's basic layout element for the grid system and embedd any arbitry content inside them.
FREE
This component is available for free.
It implements the Bootstrap Container component.
See the installation instructions below for more details.
Arguments
| Name | Default | Type | Description |
|---|---|---|---|
html_attributes
|
{}
|
Hash
|
Any attributes for the used html wrapper tag |
Examples
Default
<%= render Railsboot::ContainerComponent.new do %>
Inside the container component
<% end %>
<div class="container">
Inside the container component
</div>Breakpoints
<%= render Railsboot::ContainerComponent.new(breakpoint: "sm", class: "mb-2").with_content("Inside the sm-container component") %>
<%= render Railsboot::ContainerComponent.new(breakpoint: "md", class: "mb-2").with_content("Inside the md-container component") %>
<%= render Railsboot::ContainerComponent.new(breakpoint: "lg", class: "mb-2").with_content("Inside the lg-container component") %>
<%= render Railsboot::ContainerComponent.new(breakpoint: "xl", class: "mb-2").with_content("Inside the xl-container component") %>
<%= render Railsboot::ContainerComponent.new(breakpoint: "xxl", class: "mb-2").with_content("Inside the xxl-container component") %>
<div class="container-sm mb-2">Inside the sm-container component</div>
<div class="container-md mb-2">Inside the md-container component</div>
<div class="container-lg mb-2">Inside the lg-container component</div>
<div class="container-xl mb-2">Inside the xl-container component</div>
<div class="container-xxl mb-2">Inside the xxl-container component</div>Fluid
<%= render Railsboot::ContainerComponent.new(fluid: true) do %>
Inside the fluid container component
<% end %>
<div class="container-fluid">
Inside the fluid container component
</div>Installation
Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:
- A parent component class (
app/components/railsboot/component.rb) of which all components inherit from. - A base component class (
app/components/railsboot/base_component.rb) which is used for rendering internally. - The desired component itself (
app/components/railsboot/container_component.rb). - A view template (
app/components/railsboot/container_component.html.erb) for the component unless it's rendered inline. - Any other dependent components such as Slots (just if the component needs those)
- Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
- A test file for the components (
test/components/railsboot/container_component_test.rb) including potential slot or dependency tests.
For more information please refer to the installation section.
Download
Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.