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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="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%;
}
footer div {
border: 1px solid #ff63ba;
padding: 20px;
margin: 0;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler mr-2" id="nav-button"
type="button"><i class="fas fa-bars"></i></button>
<div class="ml-auto ml-md-0"></div>
<a class="navbar-brand">Website</a>
<i class="ml-md-auto fas fa-cog"></i>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
<ul>
<li>Sidebar</li>
</ul>
</div>
<div class="col-lg-8 col-xl-6">
<div class="align-self-start" id="search-stuff">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li aria-current="page" class="breadcrumb-item active">Library</li>
</ol>
</nav>
<form>
<div class="form-group">
<input class="form-control" placeholder="Search..." type="search">
</div>
</form>
</div>
<div class="d-lg-block d-xl-none" id="cards-stuff">
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
</div>
<div class="" id="content-stuff">
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
</div>
</div>
<div class="col-xl-3 d-none d-xl-block">
<div id="cards-sidebar">
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>Copyright 2020</div>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="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"