'Why does flexbox interfear with offcanvas and search

<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<meta name="viewport" content="width-device, initial-scale=1"> 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/55c9ed03d7.js" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/55c9ed03d7.js" crossorigin="anonymous"></script>
</head>
<body>

    <div class="jumbotron jumbotron-fluid">
        <div class="container-fluid">
            <div class="text-center">
                <h3>Domain name</h3>
            </div>
            <div class="position-relative bg-success">
                <div class="position-absolute top-0 start-0 mb-2">
                   <div class="fa-solid fa-bars" data-bs-toggle="offcanvas" data-bs-target="#demo" ></div>
                </div>
                <div class="position-absolute top-0 end-0">
                   <div class="search-container mb-2">
                      <i class="search fa fa-search" data-bs-toggle="modal" data-bs-target="#myModal"></i>
                   </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-start" id="demo">
        <div class="offcanvas-header">
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <h3>hello</h3>
        </div>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                   <button type="button" class="btn-close" data-bs-dismiss="modal"><btton>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-2">
                       <input type="text" class="form-control" placeholder="search">
                       <button class="btn btn-secondary" type="submit">Go</button>
                    </div>
                 </div>
            </div>
       </div>
    </div>
    <div class="container">
    <div class="container-fluid bg-info">
          <div class="d-flex  justify-content-evenly">
              <div class="fas fa-home p-1" style="font-size: 23px; color: white;"></div>
              <div class="fa-solid fa-shirt p-1" style="font-size:23px; color:white;"></div>
              <div class="fa-solid fa-computer p-1" style="font-size:23px; color:white;"></div>
          </div>
    </div>
    </div> 
<body>
</html>
i am using bootstrap for this i want to make header for a website.here i am having problem in seperating flexbox with offcanvas and search icon. Here flex box gets in between offcanvas and search. I want flexbox below offcanvas and search like thisenter image description here.But i got the result of flexbox in between search and offcanvas like thisenter image description here.
htmlflexboxbootstrap-5


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions