--- title: "What is the use of Flexbox? How it will be used with the help of Bootstrap Library?" description: "What is the use of Flexbox? How it will be used with the help of Bootstrap Library?" author: "Ethan Karla" published: 2021-07-28 canonical: https://answers.mindstick.com/qa/93878/what-is-the-use-of-flexbox-how-it-will-be-used-with-the-help-of-bootstrap-library category: "web application" tags: ["web development", "web application development"] reading_time: 4 minutes --- # What is the use of Flexbox? How it will be used with the help of Bootstrap Library? What is the use of [Flexbox](https://www.mindstick.com/forum/156629/use-of-bootstrap-flexbox-how-to-use-it-with-the-help-of-bootstrap-library)? How it will be used with the help of [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming) [Library](https://www.mindstick.com/blog/25/class-library)? ## Answers ### Answer by Ravi Vishwakarma When we create 2 boxes on our website, by default the second box comes below the first box, they both do not come in the same line. If we want to bring a box on the same line i.e. from left to right, we use display flex. We can also use inline flex instead of display flex. so that all the boxes are on the same line, flex always works on the parent div eg - there is a big box, inside that box there are 3 small boxes, the big box is the parent div and all the small boxes are the child div. can write together. after which we don't need to write CSS, in HTML we use d-flex inside class, another way we can give display: flex from CSS to boxing class. **What is CSS flex-direction?** **Flex direction row** If we want to start the box from the left side in the same line, then we use the flex-direction row. To give flex-direction by HTML only, in HTML class we use the row with **.d-flex**. After which we do not need to write CSS, another way we can use CSS to flex-direction: row; makes use of. **Flex direction row reverse** If we want to start the box from the right side instead of the left side in the same line, then we use flex-direction row reverse. To give flex direction row reverse by HTML only, we use row-reverse with flex in HTML class **.d-flex-reverse**, after which we do not need to write CSS. If we want to give row reverse through CSS then we can do flex-direction: row-reverse; in CSS with HTML class. give. **Flex direction column** If we want to keep another box after one box in the next line i.e. from top to bottom side then we use a flex-direction column. Use flex-column in HTML class to provide flex-direction column only by HTML flex-direction: column; make use of. **Flex direction column reverse** If a box has to be placed after one line, that is, to keep it from top to bottom, then we use a flex-direction column. To give flex-direction column only by HTML, flex-column is used in HTML class to give flex-direction column by CSS flex-direction: column; makes use of. **CSS Justify Content** Through Justify Content in CSS, we can give any box left, center, right align and the equal gap between many boxes and same gap around the box. **Justify Content Start** Through Justify content start, we can align any box to the left side. To align the box to the left only by HTML we use **justify-content-start** with d-flex in the HTML class To align the box to the left by CSS justify-content: flex-start; makes use of. **Justify Content Center** Through the justify-content center, we can place many boxes in the center of the page, to center align the box only by HTML we write **justify-content-center** with d-flex in HTML class. To center-align the box with CSS justify-content: center; make use of. **Justify content Flex end** Through flex-end, we can place any box on the right side of the page or on the last of the page. Use **justify-content-end** with d-flex in the HTML class to keep the box in right alignment or last by HTML only. and justify-content: flex-end; make use of. **Justify content space between** If we want an equal gap between many boxes, for that we use justify-content space between. To give an equal gap inbox only by HTML use **justify-content-between** with d-flex in HTML class to give an equal gap inbox by CSS justify-content: space-between; make use of. \ --- Original Source: https://answers.mindstick.com/qa/93878/what-is-the-use-of-flexbox-how-it-will-be-used-with-the-help-of-bootstrap-library Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.