Skip to content
Related Articles

Related Articles

Flexbox utilities in bootstrap with examples
  • Last Updated : 31 Jan, 2019

The Flexible Box Layout Module in bootstrap is used for designing the flexible and responsive layout structure. It is used in Bootstrap 4.

  • The d-flex class is used to create a simple flexbox container
    Syntax:

    <div class="d-flex p-2"></div>
    
  • The d-inline-flex class is used to create an inline flexbox container
    Syntax:

    <div class="d-inline-flex p-2"></div>
    
  • .d-flex and .d-inline-flex can be used for all breakpoints(sm, md, lg, xl) like .d-sm-flex, .d-sm-inline-flex, etc.
    Syntax:

    <div class="d-sm-flex p-2"></div>
    
    <div class="d-sm-inline-flex p-2"></div>

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" 
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
  
<body>
  
    <div class="container mt-3">
        <h2>Flex</h2>
        <div class="d-flex p-3 bg-success text-white">
            <div class="p-2 bg-success">Geeks 1</div>
            <div class="p-2 bg-success ">Geeks 2</div>
            <div class="p-2 bg-success">Geeks 3</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  
</body>
  
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" 
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
  
<body>
  
    <div class="container mt-3">
        <h2>Inline Flex</h2>
        <div class="d-inline-flex p-3 bg-success text-white">
            <div class="p-2 bg-success">Geeks 1</div>
            <div class="p-2 bg-success ">Geeks 2</div>
            <div class="p-2 bg-success">Geeks 3</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  
</body>
  
</html>

chevron_right


Output:

Horizontal And Vertical Direction of Flexbox:

Direction of flex items can be positioned in a flex container.

  • To set a horizontal direction (the browser default) use .flex-row.
    Syntax:

    <div class="d-flex flex-row"></div>
  • To start the horizontal direction from the opposite side use .flex-row-reverse.
    Syntax:

    <div class="d-flex flex-row-reverse"></div>
  • To set a vertical direction use .flex-column.
    Syntax:



    <div class="d-flex flex-column"></div>
  • To start the vertical direction from the opposite side use .flex-column-reverse.
    Syntax:

    <div class="d-flex flex-column-reverse"></div>
  • Flex-direction can be used for all breakpoints(sm, md, lg, xl) like .flex-sm-row, flex-sm-row-reverse, etc.
    Syntax:

    <div class="d-flex flex-column-reverse"></div>
    
    <div class="d-flex flex-column"></div>

Example 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" 
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
  
<body>
  
    <div class="container mt-3">
        <h2>Horizontal Direction Flex</h2>
        <br>
        <div class="d-flex flex-row bg-success mb-3 text-white">
            <div class="p-2 bg-success">Geeks 1</div>
            <div class="p-2 bg-success ">Geeks 2</div>
            <div class="p-2 bg-success">Geeks 3</div>
        </div>
        <br>
        <div class="d-flex flex-row-reverse bg-success text-white">
            <div class="p-2 bg-success">Geeks 1</div>
            <div class="p-2 bg-success">Geeks 2</div>
            <div class="p-2 bg-success">Geeks 3</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  
</body>
  
</html>

chevron_right


Output:

Example 4:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" 
    <title>GeeksForGeeks Bootstrap Example</title>
</head>
  
<body>
  
    <div class="container mt-3">
        <h2>Vertical Direction Flex</h2>
        <br>
        <div class="d-flex flex-column bg-success mb-3 text-white">
            <div class="p-2 bg-success">Geeks 1</div>
            <div class="p-2 bg-success ">Geeks 2</div>
            <div class="p-2 bg-success">Geeks 3</div>
        </div>
        <br>
        <div class="d-flex flex-column-reverse bg-success text-white">
            <div class="p-2 bg-success">Geeks 1</div>
            <div class="p-2 bg-success">Geeks 2</div>
            <div class="p-2 bg-success">Geeks 3</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  
</body>
  
</html>

chevron_right


Output:

Justify Content:

In order to change the alignment of flex items, one can use the .justify-content-* classes.
* can be any one of them start (default), end, center, between or around.
Similarly justify-content can be used for all breakpoints(sm, md, lg, xl) like .justify-content-sm-start, .justify-content-sm-end, etc.

  • Syntax:
    <div class="d-flex justify-content-start"></div>
  • Example 5:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" 
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
      
        <div class="container mt-3">
            <h2>Justify Content</h2>
            <br>
            <div class="d-flex justify-content-start bg-success mb-3 text-white">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success ">Geeks 2</div>
                <div class="p-2 bg-success">Geeks 3</div>
            </div>
            <div class="d-flex justify-content-end bg-success text-white">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success">Geeks 2</div>
                <div class="p-2 bg-success">Geeks 3</div>
            </div>
            <br>
            <div class="d-flex justify-content-center bg-success text-white">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success">Geeks 2</div>
                <div class="p-2 bg-success">Geeks 3</div>
            </div>
            <br>
            <div class="d-flex justify-content-between bg-success text-white">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success">Geeks 2</div>
                <div class="p-2 bg-success">Geeks 3</div>
            </div>
            <br>
            <div class="d-flex justify-content-around bg-success text-white">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success">Geeks 2</div>
                <div class="p-2 bg-success">Geeks 3</div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Filling of Widths of flex items:

    Flex items can be forced into equal widths by using .flex-fill class.
    .flex-fill can be used for all breakpoints(sm, md, lg, xl) like .flex-sm-fill, etc.

  • Syntax:
    <div class="p-2 flex-fill"></div>
  • Example 6:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" 
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Fill / Equal Widths</h2>
            <p>Use .flex-fill on flex items to force them into equal widths:</p>
            <div class="d-flex bg-success mb-3 text-white">
                <div class="p-2 flex-fill bg-success">Geeks 1</div>
                <div class="p-2 flex-fill bg-success">Geeks 2</div>
                <div class="p-2 flex-fill bg-success">Geeks 3</div>
            </div>
            <p>Example without .flex-fill:</p>
            <div class="d-flex bg-success mb-3 text-white">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success">Geeks 2</div>
                <div class="p-2 bg-success">Geeks 3</div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Order:

    .order classes are used for changing the visualization order of a flex item.
    Ordering is done on number basis from 0 to 12.
    0 has highest priority.
    .order can be used for all breakpoints(sm, md, lg, xl) like .order-sm-0 to .order-sm-12, etc.

  • Syntax:
    <div class="p-2 order-4"></div>
  • Example 7:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet"
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Order</h2>
            <div class="d-flex  mb-3 text-white">
                <div class="p-2 order-3 bg-success">Geeks 1</div>
                <div class="p-2 order-2 bg-success">Geeks 2</div>
                <div class="p-2 order-1 bg-success">Geeks 3</div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Automation of margins:

    • .mr-auto used to push items to the right.
    • .ml-auto used to push items to the left
    • Syntax:
      <div class="p-2 mr-auto"></div>

    .

    Example 8:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" 
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Auto Margins</h2>
            <div class="d-flex  mb-3  bg-success text-white">
                <div class="p-2 mr-auto bg-success">Geeks 1</div>
                <div class="p-2  bg-success">Geeks 2</div>
                <div class="p-2  bg-success">Geeks 3</div>
            </div>
            <div class="d-flex  mb-3  bg-success text-white">
                <div class="p-2  bg-success">Geeks 1</div>
                <div class="p-2  bg-success">Geeks 2</div>
                <div class="p-2  ml-auto bg-success">Geeks 3</div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Wrapping of flex item:

    .flex-nowrap (default), .flex-wrap and .flex-wrap-reverse are used for wrapping the flex items in a flex container.
    .flex-wrap can be used for all breakpoints(sm, md, lg, xl) like .flex-sm-nowrap, .flex-sm-wrap, etc.

  • Syntax:
    <div class="p-2 border"></div>
  • Example 9:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" 
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Wrap</h2>
            <p><code>.flex-wrap:</code></p>
            <div class="d-flex flex-wrap text-white bg-light">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
                <div class="p-2 border bg-success">Geeks 4</div>
                <div class="p-2 border bg-success">Geeks 5</div>
                <div class="p-2 border bg-success">Geeks 6</div>
                <div class="p-2 border bg-success">Geeks 7</div>
                <div class="p-2 border bg-success">Geeks 8</div>
                <div class="p-2 border bg-success">Geeks 9</div>
            </div>
            <br>
            <p><code>.flex-wrap-reverse:</code></p>
            <div class="d-flex flex-wrap-reverse text-white bg-light">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
                <div class="p-2 border bg-success">Geeks 4</div>
                <div class="p-2 border bg-success">Geeks 5</div>
                <div class="p-2 border bg-success">Geeks 6</div>
                <div class="p-2 border bg-success">Geeks 7</div>
                <div class="p-2 border bg-success">Geeks 8</div>
                <div class="p-2 border bg-success">Geeks 9</div>
            </div>
            <br>
            <p><code>.flex-nowrap:</code></p>
            <div class="d-flex flex-nowrap text-white bg-light">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
                <div class="p-2 border bg-success">Geeks 4</div>
                <div class="p-2 border bg-success">Geeks 5</div>
                <div class="p-2 border bg-success">Geeks 6</div>
                <div class="p-2 border bg-success">Geeks 7</div>
                <div class="p-2 border bg-success">Geeks 8</div>
                <div class="p-2 border bg-success">Geeks 9</div>
            </div>
            <br>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Align Content

    Basically, it is used for vertical alignment of flex items.
    align-content can be implemented in various ways.

    • .align-content-start
    • .align-content-end
    • .align-content-center
    • .align-content-around
    • .align-content-stretch
    • .align-content-sm-start
    • Similarly for sm, md, lg, xl
    • Syntax:
      <div class="p-2 align-content-start"></div>

    Example 10:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet"
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Align Content</h2>
            <p><code>.align-content-start (default):</code></p>
            <div class="d-flex flex-wrap align-content-start bg-light" 
                 style="height:100px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
                <div class="p-2 border bg-success">Geeks 4</div>
                <div class="p-2 border bg-success">Geeks 5</div>
                <div class="p-2 border bg-success">Geeks 6</div>
                <div class="p-2 border bg-success">Geeks 7</div>
                <div class="p-2 border bg-success">Geeks 8</div>
                <div class="p-2 border bg-success">Geeks 9</div>
            </div>
            <p><code>.align-content-around:</code></p>
            <div class="d-flex flex-wrap align-content-around bg-light" 
                 style="height:100px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
                <div class="p-2 border bg-success">Geeks 4</div>
                <div class="p-2 border bg-success">Geeks 5</div>
                <div class="p-2 border bg-success">Geeks 6</div>
                <div class="p-2 border bg-success">Geeks 7</div>
                <div class="p-2 border bg-success">Geeks 8</div>
                <div class="p-2 border bg-success">Geeks 9</div>
            </div>
            <p><code>.align-content-stretch:</code></p>
            <div class="d-flex flex-wrap align-content-stretch bg-light" 
                 style="height:100px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
                <div class="p-2 border bg-success">Geeks 4</div>
                <div class="p-2 border bg-success">Geeks 5</div>
                <div class="p-2 border bg-success">Geeks 6</div>
                <div class="p-2 border bg-success">Geeks 7</div>
                <div class="p-2 border bg-success">Geeks 8</div>
                <div class="p-2 border bg-success">Geeks 9</div>
            </div>
            <br>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Align items

    Use align-items class to change the alignment of flex items on the cross axis.
    align-items can be implemented in various ways.

    • .align-items-start
    • .align-items-end
    • .align-items-center
    • .align-items-baseline
    • .align-items-stretch
    • .align-items-sm-start
    • Similarly for sm, md, lg, xl
    • Syntax:
      <div class="p-2 align-items-start"></div>

    Example 11:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" items="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Align items</h2>
            <p><code>.align-items-start:</code></p>
            <div class="d-flex flex-wrap align-items-start bg-light" style="height:70px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-items-end:</code></p>
            <div class="d-flex flex-wrap align-items-end bg-light" style="height:70px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-items-center:</code></p>
            <div class="d-flex flex-wrap align-items-center bg-light" style="height:70px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-items-baseline:</code></p>
            <div class="d-flex flex-wrap align-items-around bg-light" style="height:70px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-items-stretch(default):</code></p>
            <div class="d-flex flex-wrap align-items-stretch bg-light" style="height:70px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <br>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Align self

    align-self class can be used to change the alignment on the cross axis .
    align-self can be implimented in various ways.

    • .align-self-start
    • .align-self-end
    • .align-self-center
    • .align-self-around
    • .align-self-stretch
    • .align-self-sm-start
    • Similarly for sm, md, lg, xl
    • Syntax:
      <div class="p-2 align-self-center"></div>

    Example 12:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" self="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Align self</h2>
            <p><code>.align-self-start:</code></p>
            <div class="d-flex bg-light" style="height:80px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border align-self-start bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-self-end:</code></p>
            <div class="d-flex bg-light" style="height:80px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border align-self-end bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-self-center:</code></p>
            <div class="d-flex bg-light" style="height:80px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border align-self-center bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-self-baseline:</code></p>
            <div class="d-flex bg-light" style="height:80px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border align-self-baseline bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <p><code>.align-self-stretch(default):</code></p>
            <div class="d-flex bg-light" style="height:80px">
                <div class="p-2 border bg-success">Geeks 1</div>
                <div class="p-2 border align-self-stretch bg-success">Geeks 2</div>
                <div class="p-2 border bg-success">Geeks 3</div>
            </div>
            <br>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Growing and Shrinking of available space

    .flex-grow-* is used to grow flex item to fill available space.
    .flex-shrink-* is used to shrink the flex item.
    flex-grow and flex-shrink can be implimented as follows.

    • .flex-{grow|shrink}-0
    • .flex-{grow|shrink}-1
    • Similarly for sm, md, lg, xl
    • Syntax:
      <div class="p-2 flex grow-1"></div>

    Example 13:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" self="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>GeeksForGeeks Bootstrap Example</title>
    </head>
      
    <body>
        <div class="container mt-3">
            <h2>Grow</h2>
            <p>Use <code>.flex-grow-1</code> on a Geeks to take up the rest of the space:</p>
            <div class="d-flex mb-3">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success">Geeks 2</div>
                <div class="p-2 flex-grow-1 bg-success">Geeks 3</div>
            </div>
            <p>Example without <code>.flex-grow-1</code>:</p>
            <div class="d-flex mb-3">
                <div class="p-2 bg-success">Geeks 1</div>
                <div class="p-2 bg-success">Geeks 2</div>
                <div class="p-2 bg-success">Geeks 3</div>
      
            </div>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    full-stack-img

    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :