Bootstrap Flex Direction Column - CSS

Bootstrap is a popular front-end framework that provides pre-built CSS and JavaScript components for building responsive websites. One of the useful features of Bootstrap is its Flexbox layout system, which allows for flexible and responsive layouts. In this article, we will focus on using Bootstrap to create a Flex Direction Column layout.

What is Flex Direction?

Flex Direction is a CSS property that determines the direction of the main axis of a flex container. The main axis is the axis along which the flex items are laid out. There are two possible values for the Flex Direction property: row and column. The default value is row, which means that the flex items are laid out horizontally. If the value is set to column, the flex items are laid out vertically.

Using Flex Direction Column in Bootstrap

To use Flex Direction Column in Bootstrap, you can add the class .flex-column to a parent container. This will make all the child elements of that container laid out in a vertical manner.

For example, if you have a div container with several child elements, you can add the .flex-column class to the parent div as follows:

<div class="d-flex flex-column">
  <div>Child element 1</div>
  <div>Child element 2</div>
  <div>Child element 3</div>
</div>

In the above example, the three child elements will be laid out in a column instead of row.

Adding Flex Direction Column to a Bootstrap Grid

You can also use Flex Direction Column to create a vertical layout in a Bootstrap grid. To do this, you can add the .flex-column class to a grid column. For example, if you have a 3-column grid, and you want to make the second column a vertical column, you can add the .flex-column class to the second column as follows:

<div class="row">
  <div class="col-sm-4">Column 1</div>
  <div class="col-sm-4 d-flex flex-column"> <!-- Add .flex-column class to make flex direction column -->
    <div>Child element 1</div>
    <div>Child element 2</div>
    <div>Child element 3</div>
  </div>
  <div class="col-sm-4">Column 3</div>
</div>

In the above example, the second column will be laid out in a vertical column.

Conclusion

Using Flex Direction Column in Bootstrap is a useful way to create responsive and flexible layouts. By using this feature, you can easily create vertical layout for your website. If you want to learn more about Bootstrap’s Flexbox layout system, you can check out the official Bootstrap documentation.