CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Nexus
Nexus

Reputation: 85

Decrease width of list group on resize without shifting left

I have a bootstrap container setup with 2 cards taking up the first 3 columns on the left and a list group taking up the other 9 columns. On resize, I want the list group to stay fixed instead of shifting to the left. I only want it to decrease in width. How would I go about doing this? I have tried setting the positions to be absolute and fixed, but the column formatting gets messed up after doing so. My setup is below:

<div class="col-lg-3 mt-3 ">
    <div class="card shadow border-0" style="width: 19.6rem;"> body here </div>
</div>

<div class="col-lg-9 mt-3">
    <div class="list-group" id="list">
        <button class="list-group-item list-group-item-action"  id="item1"> body </button>
        <button class="list-group-item list-group-item-action"  id="item2"> body </button>
    </div>
</div>

The reason why I have a width for the first div is because I don't want the width to change on resize for large screens. I want to do something similar for the second div.

Upvotes: 0

Views: 176

Answers (1)

Mike Newbon
Mike Newbon

Reputation: 36

Columns in bootstrap are designed to change width responsively. If you want one column to stay the same and then have a second column change size - you need to do this outside of the use of columns.

A nice way to do this might be to have a simple flex-box setup with one fixed size. https://codepen.io/carnfall/pen/yLeoLqL

<style>

.column-wrapper{
  background: green;
  width:100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.column-left{
  width: 200px;
  background: blue;
  height: 50vh;
  flex-shrink: 0;
}

.column-right{
  background:red;
  height: 50vh;
  width: 100%
}

</style>

<div class="column-wrapper">
    <div class="column-left">
        <div class="card shadow border-0" style="width: 19.6rem;"> body here 
        </div>
    </div>
    <div class="column-right">
        <div class="list-group" id="list">
            <button class="list-group-item list-group-item-action"  id="item1"> body </button>
            <button class="list-group-item list-group-item-action"  id="item2"> body </button>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions