Bootstrap 4 layout with one width fixed column - html

Question

this is my html code:
<div class="container-fluid d-flex h-100">
<div class="white h-100" style="background-color: white;">
fixed 100px
</div>
<div class="col-3 blue h-100" style="background-color: blue;">
3
</div>
<div class="col-6 red h-100" style="background-color: red;">
6
</div>
<div class="col-3 blue h-100" style="background-color: blue;">
3
</div>
</div>
Can you help me to fix my code please? I need on left side column with fixed width, which will be have 100px. This column have not resize. Rest of space I need to should be dynamically adjustable in ratio 1 : 2 : 1. Thanks for help.

Answer 1

#Denis Stephanov, you can create a flex item that doesn't shrink or grow and has a fixed width, with the following css rule:
.flex-fixed-width-item {
flex: 0 0 100px;
}
This is the short-hand for flex-grow, flex-shrink, and flex-basis. You can read more about these properties in this CSS-Tricks article.
Adding that class to your fixed width column:
<div class="container-fluid d-flex h-100">
<div class="white h-100 flex-fixed-width-item" style=" background-color: white;">
fixed 100px
</div>
...
Then keeping your column ratio the same:
...
<div class="col-2 blue h-100" style="background-color: blue;">
2
</div>
<div class="col-4 red h-100" style="background-color: red;">
4
</div>
<div class="col-2 blue h-100" style="background-color: blue;">
2
</div>
</div>
You'll get your requested outcome, which you can view in this codeply project.

Answer 2

There is a built-in solution in bootstrap 4.
Try this;
<div class="container">
<div class="row">
<div class="col-12 col-md">
content
</div>
<div class="col-12 col-md-auto">
<div style="background: red; width: 300px;">
sidebar
</div>
</div>
</div>
</div>
Demo: https://www.bootply.com/WiegnnJbxX

Answer 3

Bootstrap 4 has this built into their layout components.
<div class="container">
<div class="row">
<div class="col-4">
<!-- Set Width Column -->
</div>
<div class="col">
<!-- Variable Width Column -->
</div>
</div>
</div>
Reference: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width
If you would like your set width column to have a fixed pixel width, you can omit .col-4 and add a custom pixel width class.
<div class="container">
<div class="row">
<div class="col-pixel-width-100">
<!-- Set Width Column -->
</div>
<div class="col">
<!-- Variable Width Column -->
</div>
</div>
</div>
// style.css
.col-pixel-width-100 { flex: 0 0 100px; }

Answer 4

None of these answers solved the problem I faced.
And I have come up with such a solution:
(it is not effective but it works.)
.my-fixed-col{
width: 150px;
}
.my-fluid-col{
width: calc(100% - 150px);
}
/***/
*{
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="container-fluid d-flex p-0 m-0">
<div class="row p-0 m-0 w-100">
<div class="my-fixed-col bg-primary text-white p-1">
150px fixed column
</div>
<div class="my-fluid-col bg-danger text-white p-1">
fluid column
</div>
</div>
</div>