Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior persists.
Additionally, when I click on the header, the container expands but then readjusts awkwardly. I would appreciate it if you could review the code provided to help me address these concerns.
Furthermore, my attempt at creating two columns in the header row seems to be failing. The divs are not aligning properly as the one with col-xs-2 is shifting to the bottom of the other column instead of appearing side by side. The same issue applies to the two buttons in the 'main' section. Your assistance in resolving these matters would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
<link rel="stylesheet" href="custom-style.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src ="jquery-3.0.1.min.js"></script>
<script src ="bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container" id="container">
<div class="row" id="header">
<div class="col-xs-10" id="logo" data-toggle="collapse" data-target="#main">XYZ</div>
<div class="col-xs-2" id="arrow-down">Arrow</div>
</div>
<div class="row" class="collapse" id="main">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6" id="button1">
<button type="button" class="btn btn-primary active">Detail1</button>
</div>
<div class="col-xs-6" id="button2">
<button type="button" class="btn btn-primary disabled">Detail2</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS styles:
*{
margin: 0;
padding: 0;
}
#container{
width:450px;
border: 1px solid black;
height: auto;
}
#header{
background-color: #6C6D70;
border-bottom: 5px solid #2DB5AB;
height: 50px;
}
#logo{
padding:10px;
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: #FFFFFF;
}
#arrow-down{
color:black;
font-size: 18px;
padding: 15px 10px 10px 10px;
border: 1px;
}
#main{
padding: 10px;
}
#video-detail{
}
#buttons{
padding:10px;
margin: 0 auto;
border: 1px solid black;
}