I'm making a mini sidebar when users decreases their browser's width. I'm getting stuck when I work with height css property. I allow users to scroll the sidebar.
But I don't know how to increase the sidebar's width automatically when the vertically scrollbar appears.
/* START - bootstrap */
.list-unstyled {
padding-left: 0;
list-style: none;
}
.m-auto {
margin: auto;
}
.text-light {
color: rgb(248, 249, 250);
}
.text-center {
text-align: center;
}
.p-3 {
padding: 1rem!important;
}
/* END - bootstrap */
.sidebar-medium {
overflow-x: hidden;
overflow-y: auto;
display: block;
top: 0;
bottom: 0;
width: 60px;
position: fixed;
background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
}
li {
cursor: pointer;
user-select: none;
font-size: 20px;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
.avatar {
width: 30px;
height: 30px;
background-size: 30px 30px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<div class="shadow-sm text-light sidebar-medium">
<ul class="list-unstyled mb-0">
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto avatar" style="background-image: url('https://i.stack.imgur.com/5Jv5C.jpg?s=328&g=1');"></div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-user-tie"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-radiation"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-history"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-envelope"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bell"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bookmark"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-triangle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-circle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-cogs"></i>
</div>
</li>
</ul>
</div>
Screenshot (With and without the scrollbar):
How can I increase the sidebar's width automatically in this case (without javascript)?
One possible solution is to query the height.
#media (max-height: 570px) { /* this is when the scrollbar appears */
.sidebar-medium {
width: 100px;
}
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.m-auto {
margin: auto;
}
.text-light {
color: rgb(248, 249, 250);
}
.text-center {
text-align: center;
}
.p-3 {
padding: 1rem !important;
}
/* END - bootstrap */
.sidebar-medium {
overflow-x: hidden;
overflow-y: auto;
display: block;
top: 0;
bottom: 0;
width: 60px;
position: fixed;
background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
transition: width 0.3s;
}
li {
cursor: pointer;
user-select: none;
font-size: 20px;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
.avatar {
width: 30px;
height: 30px;
background-size: 30px 30px;
clip-path: polygon( 50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
#media (max-height: 570px) {
.sidebar-medium {
width: 100px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<div class="shadow-sm text-light sidebar-medium">
<ul class="list-unstyled mb-0">
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto avatar" style="
background-image: url('https://i.stack.imgur.com/5Jv5C.jpg?s=328&g=1');
"></div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-user-tie"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-radiation"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-history"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-envelope"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bell"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bookmark"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-triangle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-circle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-cogs"></i>
</div>
</li>
</ul>
</div>
You can always use the ::-webkit-scrollbar in order to have a better visual :
/* START - bootstrap */
.list-unstyled {
padding-left: 0;
list-style: none;
}
.m-auto {
margin: auto;
}
.text-light {
color: rgb(248, 249, 250);
}
.text-center {
text-align: center;
}
.p-3 {
padding: 1rem !important;
}
/* END - bootstrap */
.sidebar-medium {
overflow-x: hidden;
overflow-y: auto;
display: block;
top: 0;
bottom: 0;
width: 60px;
position: fixed;
background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
}
li {
cursor: pointer;
user-select: none;
font-size: 20px;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
.avatar {
width: 30px;
height: 30px;
background-size: 30px 30px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
::-webkit-scrollbar {
width: 2px;
}
::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<div class="shadow-sm text-light sidebar-medium">
<ul class="list-unstyled mb-0">
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto avatar" style="background-image: url('https://i.stack.imgur.com/5Jv5C.jpg?s=328&g=1');"></div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-user-tie"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-radiation"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-history"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-envelope"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bell"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-bookmark"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-triangle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-exclamation-circle"></i>
</div>
</li>
<li class="text-center p-3">
<div class="align-self-center d-inline-block m-auto text-center">
<i class="fas fa-cogs"></i>
</div>
</li>
</ul>
</div>
Related
I have 4 columns and I need to make the page responsive so it collapes to fit all four columns in one screen. Right now, the screen on a vertical monitor shows 2 large columns and pushes the other two on the side, see image below.
How do i change my html/css so that all four columns are shown. it is okay if the column can collapse on each other to fit differing resolution code below
I have tried margin-bottom , margin left, margin-rifght and even flexflow: row . but i have no luck with it. I am very new to web development, I was if someone could help me make the page responsive to the different resolutions of the montior. It works now for a 27 horizontal monitor but it doesnt for a 24 veritcal monitor
<!DOCTYPE html>
<html lang="en">
<!--html basic skeleton of the page -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.component.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid header mb-5">
<div class="d-flex flex-row p-2 align-items-center title">
<img src="../assets/logo.png" [width]="50" [height]="50">
<a class="ml-3 title-text" href="/">Test</a>
</div>
<div class="d-flex flex-row banner">
<a class="nav-text mx-3" href="/">Home</a>
<a class="nav-text mx-3" href="/">Contact Us</a>
</div>
</div>
<div class="container-fluid" >
<div class="d-flex flex-row justify-content-around">
<div class="d-flex flex-column">
<h2 class="category"> Test </h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-sort-amount-desc fa-2x mb-3" aria-hidden="true"></i>
Test2
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-filter fa-2x mb-3" aria-hidden="true"></i>
Test3
</div>
</div>
<div class="d-flex flex-column">
<h2 class="category">Analytics</h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-link fa-2x mb-3" aria-hidden="true"></i>
Builder
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-language fa-2x" aria-hidden="true"></i>
Tool
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-fire fa-2x mb-3" aria-hidden="true"></i>
Engagement Map
</div>
</div>
<div class="d-flex flex-column">
<h2 class="category">Other Tools </h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-newspaper-o fa-2x mb-3" aria-hidden="true"></i>
C
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-globe fa-2x mb-3" aria-hidden="true"></i>
G
</div>
</div>
<div class="d-flex flex-column">
<h2 class="category">Documentation</h2>
<div class="card align-items-center justify-content-center">
<i class="fa fa-file-text-o fa-2x mb-3" aria-hidden="true"></i>
P
</div>
<div class="card align-items-center justify-content-center">
<i class="fa fa-file-text-o fa-2x mb-3" aria-hidden="true"></i>
D
</div>
</div>
</div>
</div>
</body>
</html>
css for the page
* {
box-sizing: border-box;
}
body {
font-family: 'EB Garamond', sans-serif;
}
enter code here
i {
color: #0A2240;
}
a {
font-family: 'EB Garamond', sans-serif;
color: #0A2240;
}
a:hover, a:active{
text-decoration: underline;
}
.header {
padding: 0;
}
.title {
background: #0A2240;
font-size: 25px;
}
.banner {
padding: 10px;
text-align: left;
background: #b30000;
color: white;
font-size: 15px;
}
.title-text, .nav-text {
color: white;
font-family: "EB Garamond", sans-serif;
}
h2.category {
color:#0A2240;
text-align: center;
font-size: 25px;
text-align: center;
}
.card {
box-shadow: 0 10px 8px 5px rgba(0, 0, 0, 0.2);
width: 100%;
min-width: 400px;
height: 150px;
padding: 20px;
text-align: center;
background-color: white;
border-style:solid;
border-color:#253746;
border-radius: 25px;
border-width: 2px;
margin-bottom: 60px;
}
what is looks like now
what i hope it look like
When we add the flex-wrap:wrap to the parent element of the boxes it will automatically collapse. So this code might be the solution of your problem :)
.container-fluid .d-flex {
display:flex;
flex-wrap:wrap;
}
So in my HTML, I want the choice-div div to grow when you hover on it by 10px. I also don't want the positions of the divs to not change, and not to change its center.
.choice {
width: 100%;
height: 80px;
text-align: left;
}
div.choice-div {
border-radius: 10px;
}
div.choice-div:hover {
width: 105%;
height: 100px;
}
.choice-text {
font-size: 30px;
vertical-align: middle;
}
.icon {
vertical-align: middle;
}
<--Bootsrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>
<div class="problem container">
<h1>What is 1 + 1?</h1>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">0</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">2</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">3</span></span>
</div>
</div>
Any idea how I can do it?
use "scale" css attribute
.choice {
width: 100%;
height: 80px;
text-align: left;
}
div.choice-div {
border-radius: 10px;
}
div.choice-div:hover {
transform: scale(1.1);
}
.choice-text {
font-size: 30px;
vertical-align: middle;
}
.icon {
vertical-align: middle;
}
<--Bootsrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>
<div class="problem container">
<h1>What is 1 + 1?</h1>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">0</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">2</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">3</span></span>
</div>
</div>
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
Imagen de un diseno en UPlabs
Hi im trying to make a navbar like this but i cant finish it.
someone can help me? Only want to know how round the border of links when they are active
Now i have this resolved, but i dont know how round borders on the container of the links like we see in the design of UpLabs
Image of my project
HTML
<div id="navbar" class="sticky-top">
<div class="d-flex flex-wrap justify-content-center align-content-center" style="height: 20%;">
<img class="{{url}}" alt="">
</div>
<nav class="nav flex-column ml-4">
<a id="link" routerLink="sales" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-cash-register"></i>
</div>
<div class="col-9">
Ventas
</div>
</div>
</a>
<a id="link" routerLink="debtors" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-user-friends"></i>
</div>
<div class="col-9">
Deudores
</div>
</div>
</a>
<a id="link" routerLink="balance" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-chart-line"></i>
</div>
<div class="col-9">
Balance
</div>
</div>
</a>
<a id="link" routerLink="products" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-boxes"></i>
</div>
<div class="col-9">
Productos
</div>
</div>
</a>
</nav>
</div>
and this is the file CSS that round borders of links when they are active and other parts of desing.
div#navbar {
left: 0px;
width: 100%;
height: 100vh;
border-radius: 0 40px 40px 0;
background: #f4755f;
}
a#link {
font-size: 18px;
padding: 20px 0;
color: white;
}
.active {
background: #fbf3f2;
color: #f4755f !important;
border-radius: 30px 0 0 30px;
}
img {
width: 45%;
height: 70%;
}
Making the border of a link round is done like that:
html:
Link 1
css
a {
background: red;
border-radius: 10px 0px 0 10px;
}
To make it round only when it is active you need to add a class to the active link and style that instead of the a tag, though.
I am trying to add background color for nav-header, and since it is within col-md-10, it won't take full width when sidebar (col-md-2) is closed.
I tried to wrap it inside another div, but it doesn't work, I can't override col-md-10 rules. Is there any way to do this?
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span>
<i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span>
<i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
<img src="img/logo.png" height="45" alt="">
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
</div>
Perhaps a positioned pseudo-element to imitate a background.
.col-md-10 .nav-header{
position: relative;
}
.col-md-10 .nav-header::after {
content:"";
position: absolute;
top:0;
left:0;
height:100%;
background: red;
width:calc(100vw - 30px);
}
.col-md-10 .nav-header {
position: relative;
}
.col-md-10 .nav-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: red;
width: calc(100vw - 30px);
z-index: -1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span>
<i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span><a href="#" class="list-group-item d-inline-block collapsed"
data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
<i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
Nav header content
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
<img src="img/logo.png" height="45" alt="">
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
That's tricky. Unless you can use the sass functions to build your columns, you'll have to override the styles for that particular .col-md-10. Maybe something like this?
#sidebar:not(.show) + [class*=col-] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
Demo (Note: I'm using jsfiddle because stack snippets is blocking a part of bootstrap's js and failing to execute the part for opening or closing the menu)
Edit
For those curious, the SCSS way to do it would be to use a mixin
Your SCSS might look like this:
#sidebar + main {
#include make-col(12);
}
#sidebar.show + main {
#include make-col(10);
}