<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS Link --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- Custom CSS --> <!-- <link rel="stylesheet" href="index.css" /> --> <title>CSS and Bootstrap Flex</title> </head> <body> <div class="text-center"> <h1>Bootstrap Flex</h1> <p>Use the d-flex class to create a flex container and transform direct children into flex items.</p> <h2>Centering elements</h2> <div style="height: 500px;" class="bg-secondary p-3 d-flex justify-content-center align-items-center flex-column-reverse"> <div class="h-25 p-3 bg-success"> Flex Item A </div> <div class="h-25 p-3 bg-warning"> Flex Item B </div> <div class="h-25 p-3 bg-danger"> Flex Item C </div> </div> <!-- Flex Row --> <h2>Flex Row</h2> <div class="p-3 bg-dark d-flex flex-row"> <div class="p-3 bg-success"> Flex Item A </div> <div class="p-3 bg-warning"> Flex Item B </div> <div class="p-3 bg-danger"> Flex Item C </div> </div> <!-- Flex Row Reverse --> <h2>Flex Row Reverse</h2> <div class="p-3 bg-dark d-flex flex-row-reverse"> <div class="p-3 bg-success"> Flex Item A </div> <div class="p-3 bg-warning"> Flex Item B </div> <div class="p-3 bg-danger"> Flex Item C </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> </body> </html> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> </body> </html>