Problem: I am unable to use the toggle and collapse property while making youtube clone.
What I tried:
I have taken a div container with a container fluid class and inside that class i have taken a div container of row class and this div row contains three columns, first column is div with class collapse and col-3 size which is red section, and the second column is div with the col-1 size which is blue section, and the third column is div with col-auto size which is green section. And i placed the toggle button in the navbar above this container.
What I expected:
Initially when I toggle the button the row container should display two columns which are blue section with the size col-1 and green section with space col-11 (auto).
And whenever I toggle my menu button the collapse container with size col-3 which is red section should come on top of the blue section by covering it and the green section needs to get adjust as per the size of red section which is col-9 (auto).
What I am getting:
Instead of overriding the blue section the collapse section (red section) is occupying the space in the row as Red section (col-3), Blue Section (col-1), Green Section (col-8) automatically.
col {
padding: 1rem;
background-color: blue;
color: white;
border: 2px solid black;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href=".css" rel="stylesheet">
</head>
<body>
<nav class="navbar bg-light border-bottom d-flex ">
<div class="container-fluid d-flex">
<div style="width: 20%;">
<button class="btn btn-light me-2" type="button" data-bs-toggle="collapse" data-bs-target="#toggleSections" aria-expanded="false" aria-controls="toggleSections">
<i class="bi bi-list fs-4"></i>
</button>
<label for=""><i class="bi bi-youtube fs-2" style="color: red;"></i></label>
<span class="fs-5 fw-bold">YouTube</span>
</div>
<div class="d-flex " style=" width: 65%">
<form class=" d-flex " style="width: 100%;">
<label class="d-flex border rounded-circle" style="width: 70%;">
<input class="form-control border-0" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light border-0" ><i class="bi bi-search"></i></button>
</label>
<button class="btn btn-light me-3 border-0 rounded-circle">
<i class="bi bi-mic fs-5"></i>
</button>
</form>
</div>
<div style="width: 15%;">
<button class="btn btn-light border rounded-pill">
<i class="bi bi-plus"> Create</i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-bell fs-5"></i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-google"></i>
</button>
</div>
</div>
</nav>
<div class="container-fluid border" style="background-color: lightblue;">
<div class="row border" style="background-color: yellowgreen; height: 100px; position: relative;">
<div class=" col-3 collapse position-relative" style="background-color: red; margin: 4px;" id="toggleSections"></div>
<div class="col-1 d-flex align-items-center justify-content-center" style="background-color: blue; margin: 4px;"> column1</div>
<div class="col-auto d-flex align-items-center justify-content-center flex-grow-1" style="background-color:green; margin: 4px;"> column3</div>
</div>
</div>
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>Problem: I am unable to use the toggle and collapse property while making youtube clone.
What I tried:
I have taken a div container with a container fluid class and inside that class i have taken a div container of row class and this div row contains three columns, first column is div with class collapse and col-3 size which is red section, and the second column is div with the col-1 size which is blue section, and the third column is div with col-auto size which is green section. And i placed the toggle button in the navbar above this container.
What I expected:
Initially when I toggle the button the row container should display two columns which are blue section with the size col-1 and green section with space col-11 (auto).
And whenever I toggle my menu button the collapse container with size col-3 which is red section should come on top of the blue section by covering it and the green section needs to get adjust as per the size of red section which is col-9 (auto).
What I am getting:
Instead of overriding the blue section the collapse section (red section) is occupying the space in the row as Red section (col-3), Blue Section (col-1), Green Section (col-8) automatically.
col {
padding: 1rem;
background-color: blue;
color: white;
border: 2px solid black;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<nav class="navbar bg-light border-bottom d-flex ">
<div class="container-fluid d-flex">
<div style="width: 20%;">
<button class="btn btn-light me-2" type="button" data-bs-toggle="collapse" data-bs-target="#toggleSections" aria-expanded="false" aria-controls="toggleSections">
<i class="bi bi-list fs-4"></i>
</button>
<label for=""><i class="bi bi-youtube fs-2" style="color: red;"></i></label>
<span class="fs-5 fw-bold">YouTube</span>
</div>
<div class="d-flex " style=" width: 65%">
<form class=" d-flex " style="width: 100%;">
<label class="d-flex border rounded-circle" style="width: 70%;">
<input class="form-control border-0" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light border-0" ><i class="bi bi-search"></i></button>
</label>
<button class="btn btn-light me-3 border-0 rounded-circle">
<i class="bi bi-mic fs-5"></i>
</button>
</form>
</div>
<div style="width: 15%;">
<button class="btn btn-light border rounded-pill">
<i class="bi bi-plus"> Create</i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-bell fs-5"></i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-google"></i>
</button>
</div>
</div>
</nav>
<div class="container-fluid border" style="background-color: lightblue;">
<div class="row border" style="background-color: yellowgreen; height: 100px; position: relative;">
<div class=" col-3 collapse position-relative" style="background-color: red; margin: 4px;" id="toggleSections"></div>
<div class="col-1 d-flex align-items-center justify-content-center" style="background-color: blue; margin: 4px;"> column1</div>
<div class="col-auto d-flex align-items-center justify-content-center flex-grow-1" style="background-color:green; margin: 4px;"> column3</div>
</div>
</div>
<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>
</body>Instead of using collapse you must to use the offcanvas component (Documentation) Here is the corrected code:
Codepen
.col{
padding: 1rem;
background-color: blue;
color: white;
border: 2px solid black;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar bg-light border-bottom d-flex ">
<div class="container-fluid d-flex">
<div style="width: 20%;">
<button class="btn btn-light me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
<i class="bi bi-list fs-4"></i>
</button>
<label for=""><i class="bi bi-youtube fs-2" style="color: red;"></i></label>
<span class="fs-5 fw-bold">YouTube</span>
</div>
<div class="d-flex " style=" width: 65%">
<form class=" d-flex " style="width: 100%;" >
<label class="d-flex border rounded-circle" style="width: 70%;">
<input class="form-control border-0" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light border-0" ><i class="bi bi-search"></i></button>
</label>
<button class="btn btn-light me-3 border-0 rounded-circle">
<i class="bi bi-mic fs-5"></i>
</button>
</form>
</div>
<div style="width: 15%;">
<button class="btn btn-light border rounded-pill">
<i class="bi bi-plus"> Create</i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-bell fs-5"></i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-google"></i>
</button>
</div>
</div>
</nav>
<div class="container-fluid border" style="background-color: lightblue;">
<div class="row border" style="background-color: yellowgreen; height: 100px; position: relative;">
<div class="col-1 d-flex align-items-center justify-content-center" style="background-color: blue; margin: 4px;"> column1</div>
<div class="col-auto d-flex align-items-center justify-content-center flex-grow-1" style="background-color:green; margin: 4px;"> column3</div>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>