React Bootstrap StackStacks 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: VerticalBy 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: HorizontalThe 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: We can also use margin utilities such as ms-auto and me-auto to align the layouts. Consider the below example: App.js: Output: To add margin from right, use me-auto class. App.js: Output: If you are using Bootstrap 4, you can use ml-auto and mr-auto. Let's understand a few more examples: React Bootstrap Stack ExamplesPositioning 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: To align buttons horizontally, we can use the direction="horizontal" attribute with the Stack component. App.js: Output: 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: Form with multiple fields We can also position the form elements having multiple fields using the Stack component. Consider the below example: Output: Here, we have discussed several examples of the Stack component. We can easily align different components using the Stack component.
Next TopicReact Bootstrap ListGroup
|