Flexbox utilities in bootstrap with examples

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:



    My Personal Notes arrow_drop_up

    Small things always make you to think big

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.