Example 1

1. Add .d-flex to the parent element to create a flexbox container and transform into flex items.

2. Add .align-items-center to the parent element to center its content vertically.

3. Add .justify-content-center to the parent element to center its content horizontally.

                        <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
                                <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
                                <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
                                <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
                        </div>

                        

More Examples

                        <div class="d-flex justify-content-start">...</div>
                        <div class="d-flex justify-content-end">...</div>
                        <div class="d-flex justify-content-center">...</div>
                        <div class="d-flex justify-content-between">...</div>
                        <div class="d-flex justify-content-around">...</div>