---
title: "Use of Bootstrap Flexbox? How to use it with the help of Bootstrap library?"  
description: "Use of Bootstrap Flexbox? How to use it with the help of Bootstrap library?"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156629/use-of-bootstrap-flexbox-how-to-use-it-with-the-help-of-bootstrap-library  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Use of Bootstrap Flexbox? How to use it with the help of Bootstrap library?

What is the use of [Flexbox](https://www.mindstick.com/interview/33880/explain-css-grid-and-flexbox-with-an-example)? How to use it with the help of [Bootstrap library](https://answers.mindstick.com/qa/93859/how-to-make-a-button-groups-in-bootstrap-with-dropdown-menu-with-help-of-bootstrap-library)?

## Replies

### Reply by Anonymous User

To center an element vertically and horizontally with the help of an Bootstrap is very simple with the help of an Bootstrap Flexbox :

```
<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='align-content-center align-items-center d-flex justify-content-center mb-3'>
        <div class='p-2 bg-secondary text-light'>Vertically and Horizontally Centered Container</div>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</body>
</html>
```

Hope this will help you.

Happy Coding!

### Reply by Anonymous User

Flexbox is a layout model that helps to align an element in a container and it helps to distribute the element within a container. Simply changing the container to flexbox makes it easy to arrange and fill the element as per your requirement. These are very helpful in building a responsive website.

Let's have an example to demonstrate the flexbox in [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) [Library](https://www.mindstick.com/forum/34615/software-framework-vs-library) :

```
<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='d-flex flex-row bd-highlight mb-3'>
        <div class='p-2 bg-secondary text-light'>Flex item 1</div>
        <div class='p-2 bg-secondary text-light'>Flex item 2</div>
        <div class='p-2 bg-secondary text-light'>Flex item 3</div>
    </div>
    <div class='d-flex flex-column bd-highlight'>
        <div class='p-2 bg-secondary text-light'>Flex item 1</div>
        <div class='p-2 bg-secondary text-light'>Flex item 2</div>
        <div class='p-2 bg-secondary text-light'>Flex item 3</div>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</body>
</html>
```

Hope this will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156629/use-of-bootstrap-flexbox-how-to-use-it-with-the-help-of-bootstrap-library

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
