Javatpoint Logo
Javatpoint Logo

React Bootstrap Stack

Stacks are shorthand helpers created on the top of the flexbox properties to make the element layout faster and easier.

It provides an easy way to apply several flexbox properties to create desired layouts using Bootstrap. The concept and implementation of the Stack are based on the open-source Pylon Project.

Stacks are of two types: vertical and horizontal.

To use the Stack Component, define it as traditional components <Stack></Stack> and import it as follows:

Vertical

By default, Stacks are vertical and full width. In React Bootstrap, the <Stack></Stack> component is used to define a stack. The gap prop defines the space between items. In the traditional Bootstrap, we use .vstack and .gap classes for defining the Stack and gap between stacks.

Consider the below example of the Stack:

App.js:

Output:

React Bootstrap Stack

Horizontal

The direction attribute is used with the Stack component to define the direction of the Stack. For positioning the stacks horizontally, use the direction="horizontal" value. It will align the layouts horizontally. The horizontal stacks take the necessary width according to the content. The gap prop is used to define the space between layouts.

Consider the below example:

App.js:

Output:

React Bootstrap Stack

We can also use margin utilities such as ms-auto and me-auto to align the layouts.

Consider the below example:

App.js:

Output:

React Bootstrap Stack

To add margin from right, use me-auto class.

App.js:

Output:

React Bootstrap Stack

If you are using Bootstrap 4, you can use ml-auto and mr-auto.

Let's understand a few more examples:

React Bootstrap Stack Examples

Positioning buttons using Stack

The Stacks are also useful for positioning buttons. To align the buttons vertically, we can use the vertical Stack.

Consider the below example:

App.js:

Output:

React Bootstrap Stack

To align buttons horizontally, we can use the direction="horizontal" attribute with the Stack component.

App.js:

Output:

React Bootstrap Stack

Form Using Stack

We can position the form elements using the Stack.

Inline form:

Let's create an inline form using the Form and Button components. We will align the form elements using the Stack component.

App.js:

Output:

React Bootstrap Stack

Form with multiple fields

We can also position the form elements having multiple fields using the Stack component.

Consider the below example:

Output:

React Bootstrap Stack

Here, we have discussed several examples of the Stack component. We can easily align different components using the Stack component.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA