React Bootstrap Stacks Examples
Example 1: This example implements the following approach,
- In this approach, we will use Vertical Stack layout, every element will be aligned vertically and will utilize full width by default. It is the default alignment of React Bootstrap stacks.
- Open the App.js file and write the below code to render a vertical stack using react bootstrap.
- Inside the Stack component, insert your HTML elements, the stack component will display the elements vertically.
- Specify the gap value to separate the elements ranging from 1 to 5.
// App.js
import "./App.css";
import { Stack } from "react-bootstrap";
function App() {
return (
<div>
<h1>React Bootstrap Stacks</h1>
<h3>Vertical Stack</h3>
<hr />
<Stack gap={3}>
<div className="p-2 h4 bg-info">Stack Item 1</div>
<div className="p-2 h4 bg-info">Stack Item 2</div>
<div className="p-2 h4 bg-info">Stack Item 3</div>
<div className="p-2 h4 bg-info">Stack Item 4</div>
</Stack>
</div>
);
}
export default App;
Output:
Example 2: This example will implement the following approach:
- In this, we will use the horizontal layout of Stack to display the elements in the horizontal fashion.
- For this we will utilize the direction property of Stack Component and pass the horizontal argument for the Component.
- Open the App.js file and write the below code to render a vertical stack using react bootstrap.
- Inside the Stack component, insert your HTML elements, the stack component will display the elements, pass the horizontal value to the string to display the elements horizontally.
- Specify the gap value to separate the elements ranging from 1 to 5.
- Add some vertical lines to visualize the separation of the HTML elements.
// App.js
import "./App.css";
import { Stack } from "react-bootstrap";
function App() {
return (
<div>
<h1>React Bootstrap Stacks</h1>
<h3>Horizontal Stack</h3>
<hr />
<Stack direction="horizontal" gap={3}>
<div className="p-2 h4 bg-primary">Stack Item 1</div>
<div className="p-2 h4 bg-primary">Stack Item 2</div>
<div className="p-2 h4 bg-primary">Stack Item 3</div>
<div className="p-2 h4 bg-primary">Stack Item 4</div>
</Stack>
</div>
);
}
export default App;
Output:
React Bootstrap Stacks
React Bootstrap Stacks are a type of layout in React Bootstrap that follows the style of a stack arranging elements one over another or one after another. It is a helper utility built on top of the existing flexbox layout to make it easier to create component-based layouts.
Syntax:
import { Stack } from "react-bootstrap";
<Stack ...>
...
</Stack>
Stacks API properties
Name | Type | Default | Description |
---|---|---|---|
bsPrefix | string | “hstack | vstack” | Changes the underlying component base class name, defaults to hstack if the direction is horizontal, vstack incase of vertical. |
direction | string | “vertical” | Modifies the direction of stack, defaults to vertical also supports horizontal layout. |
gap | custom | Configures the gap between the elements of stack. | |
as | <div> | Changes the underlying HTML tag, defaults to use div tag. |