How to put items underneath each other flex box in Bootstrap 4 ?

How to put items underneath each other flex box in Bootstrap 4 ?

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

Flexbox in Bootstrap 4: From bootstrap 3 to bootstrap 4 amazing change has occurred that bootstrap 4 can utilize flexbox to handle the layout of content. The FlexBox Layout Module makes it easier to design a flexible responsive layout structure.

Approach: Place the direction of flex items in a flex container with direction utilities. In most cases, you will be able to exclude the horizontal class as the browser default is a row. In any case, you will experience circumstances where you required to explicitly set this esteem (like responsive layouts).

The following Examples represent different ways to put items underneath each other in a Flex-Box.

Example 1: **Use .flex-column **class to put items underneath each other.

<div class="d-flex flex-column"></div>
  • HTML

<!DOCTYPE html>

<``**html** lang``=``"en"``>

<``**head**``>

<!-- Required meta tags -->

<``**meta** charset``=``"utf-8"``>

<``**meta** name``=``"viewport" content=

"``width``=``device``-width, initial-scale``=``1``, 

shrink-to-fit``=``no``">

<!-- Bootstrap CSS -->

<``**link** rel``=``"stylesheet" href``=

"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"

integrity``=

"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"

crossorigin``=``"anonymous"``>

</``**head**``>

<``**body**``>

<``**center**``>

<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>

<``**div** class``=``"d-flex flex-column bd-highlight mb-3"``>

<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>

</``**div**``>

</``**center**``>

</``**body**``>

</``**html**``>

Output:

Example 2: *You can also use the *.flex-column-reverse class to put items underneath each other in reverse order. Displaying flex-box in reverse order.

  • HTML

<!DOCTYPE html>

<``**html** lang``=``"en"``>

<``**head**``>

<!-- Required meta tags -->

<``**meta** charset``=``"utf-8"``>

<``**meta** name``=``"viewport" content="``width``=``device``-width,

initial-scale``=``1``, shrink-to-fit``=``no``">

<!-- Bootstrap CSS -->

<``**link** rel``=``"stylesheet" href``=

"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"

integrity``=

"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"

crossorigin``=``"anonymous"``>

<``**title**``>flexbox | bootstrap4</``**title**``>

</``**head**``>

<``**body**``>

<``**center**``>

<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>

<``**div** class``=``"d-flex flex-column-reverse bd-highlight mb-3"``>

<``**div** class``=``"p-2 bd-highlight"``>Content 1</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 2</``**div**``>

<``**div** class``=``"p-2 bd-highlight"``>Content 3</``**div**``>

</``**div**``>

</``**center**``>

</``**body**``>

</``**html**``>

Output:

Example 3: **By using flex-direction: column; and align-items: center; **you can place items underneath each other in the center. Thus, as shown below, we can place icons or images underneath each other using flexbox in bootstrap 4.

  • HTML

<!DOCTYPE html>

<``**html** lang``=``"en"``>

<``**head**``>

<!-- Required meta tags -->

<``**meta** charset``=``"utf-8"``>

<``**meta** name``=``"viewport" content="``width``=``device``-width,

initial-scale``=``1``, shrink-to-fit``=``no``">

<!-- Bootstrap CSS -->

<``**link** rel``=``"stylesheet" href``=

"[https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css)"

integrity``=

"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"

crossorigin``=``"anonymous"``>

<``**script** src``=``"[https://kit.fontawesome.com/577845f6a5.js](https://kit.fontawesome.com/577845f6a5.js)"

crossorigin``=``"anonymous"``>

</``**script**``>

<``**title**``>flexbox | bootstrap4</``**title**``>

<``**style** type``=``"text/css"``>

.my_content {

flex-grow: 1;

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

}

.my_options {

border: 1px solid green;

display: flex;

align-items: center;

justify-content: center;

}

</``**style**``>

</``**head**``>

<``**body**``>

<``**center**``>

<``**h1** style``=``"color: green"``>GeeksforGeeks</``**h1**``>

</``**center**``>

<``**div** class``=``"my_content"``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-down fa-2x"

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-down</``**h3**``>

</``**div**``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-left fa-2x" 

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-left</``**h3**``>

</``**div**``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-right fa-2x" 

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-right</``**h3**``>

</``**div**``>

<``**div** class``=``"my_options col-xs-6"``>

<``**div**``><``**i** class``=``"fa fa-hand-o-up fa-2x" 

aria-hidden``=``"true"``></``**i**``></``**div**``>

<``**h3**``> fa-hand-o-up</``**h3**``>

</``**div**``>

</``**div**``>

</``**body**``>

</``**html**``>

bootstrap web technologies web technologies questions bootstrap-4 bootstrap-misc picked

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to set div with left image and button at bottom using bootstrap?

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

whatsapp web-w app web-webs whatsapp »

whatsapp web-w app web-webs whatsapp-web.whatsapp.com-wsp web-web.whatsapp.com qr-whats up online-whatsappwebsite

4 Development Tips to Follow While Developing WooCommerce Stores - World Web Technology

World Web Technology, A Qualified WooCommerce Development Company Shares 4 Development Tips to Follow While Developing WooCommerce Stores. Read More...

Bootstrap Cards Design | Bootstrap 4 Tutorial for Beginners

Bootstrap Cards Design | Bootstrap 4 Tutorial for Beginners Source Code: https://bit.ly/31d8xXp -------------------------------------------------------------...

How to get The Height of Scroll Bar Using JavaScript ?

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.