Bootstrap d flex

Flexbox is a powerful layout tool in Bootstrap that allows for flexible and responsive design. The d-flex class in Bootstrap enables the display property to be set to flex, creating a flex container. By using the flex-column class, elements can be stacked vertically in a column layout. The flex-wrap class allows items to wrap onto multiple lines when there is not enough space. Additionally, the flex-direction: column property in Bootstrap sets the direction of the main axis to be vertical, creating a column-based layout.

Take a look at this example. I've used flex and added icons.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-flex">
    <!-- Example Code -->

    <h1>Tutorial for d flex bootstrap</h1>
    <div class="d-flex justify-content-center flex-row">
      <div class="p-2">facebook</div>
      <div class="p-2">twitter</div>
      <div class="p-2">linkedin</div>
    </div>
    <div class="d-flex justify-content-center mt-3">
      <div class="p-2"><i class="bi bi-1-square"></i></div>
      <div class="p-2"><i class="bi bi-2-square"></i></div>
      <div class="p-2"><i class="bi bi-3-square"></i></div>
    </div>

    <!-- Try on this code -->

    <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
  </nav>
  
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
  </nav>
  
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
  </nav>
  
  </body>
</html>