Bootstrap 4 Expand Column To Sidebar On Xl Screens Otherwise Order Between Two Content Areas
This is what I want it to look like on a full-screen desktop/laptop. On medium / smaller devices, I want the right sidebar to collapse in and under the search input area and befor
Solution 1:
Per-usual, answering my own question. I duplicated the right sidebar's code and display either one or the other based on the screen size. I wonder if this is common in-practice or frowned upon. I really would have liked to avoid duplicating code but this problem seems rather difficult because of the stacking of a column between two blocks of content. If it were top or bottom, it would be no issue.
Here's my best attempt. Doubt anyone will have a better answer.
The code:
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><metacontent="ie=edge"http-equiv="X-UA-Compatible"><linkhref="css/bootstrap.css" ><title>Page Title Here</title><style>html, body {
height: 100%;
}
div {
border: 1px solid #9fcdff;
}
header {
border: 1px solid #9fcdff;
}
main {
height: 100%;
}
footerdiv {
border: 1px solid #ff63ba;
padding: 20px;
margin: 0;
}
</style></head><body><header><navclass="navbar navbar-expand-md navbar-light bg-light"><buttonclass="navbar-toggler mr-2"id="nav-button"type="button"><iclass="fas fa-bars"></i></button><divclass="ml-auto ml-md-0"></div><aclass="navbar-brand">Website</a><iclass="ml-md-auto fas fa-cog"></i></nav></header><divclass="container-fluid"><divclass="row"><divclass="col-lg-4 col-xl-3 d-none d-lg-block"id="sidebar"><ul><li>Sidebar</li></ul></div><divclass="col-lg-8 col-xl-6"><divclass="align-self-start"id="search-stuff"><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liaria-current="page"class="breadcrumb-item active">Library</li></ol></nav><form><divclass="form-group"><inputclass="form-control"placeholder="Search..."type="search"></div></form></div><divclass="d-lg-block d-xl-none"id="cards-stuff"><divclass="card"><imgalt="Card image cap"class="d-none d-xl-block card-img-top"src="img/placeholder.svg"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p><aclass="btn btn-primary"href="#">Go somewhere</a></div></div><divclass="card"><imgalt="Card image cap"class="d-none d-xl-block card-img-top"src="img/placeholder.svg"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p><aclass="btn btn-primary"href="#">Go somewhere</a></div></div></div><divclass=""id="content-stuff"><divclass="post"><h2>Some Headline Here...</h2><p>CSS</p></div><divclass="post"><h2>Some Headline Here...</h2><p>CSS</p></div><divclass="post"><h2>Some Headline Here...</h2><p>CSS</p></div><divclass="post"><h2>Some Headline Here...</h2><p>CSS</p></div></div></div><divclass="col-xl-3 d-none d-xl-block"><divid="cards-sidebar"><divclass="card"><imgalt="Card image cap"class="d-none d-xl-block card-img-top"src="img/placeholder.svg"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p><aclass="btn btn-primary"href="#">Go somewhere</a></div></div><divclass="card"><imgalt="Card image cap"class="d-none d-xl-block card-img-top"src="img/placeholder.svg"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p><aclass="btn btn-primary"href="#">Go somewhere</a></div></div></div></div></div></div><footer><div>Copyright 2020</div></footer><scriptsrc="js/jquery-3.5.1.min.js"></script><scriptsrc="js/popper.min.js"></script><scriptsrc="js/bootstrap.js"></script><scriptsrc="js/custom.js"></script></body></html>
Post a Comment for "Bootstrap 4 Expand Column To Sidebar On Xl Screens Otherwise Order Between Two Content Areas"