I am working on UI using bootstrap, I have some cads / divs which I am showing using using Bootstrap-4 grid system and it is working fine.
What I am trying to is to allow user to resize those cards / widgets.
So I am using
resize: both;
overflow: auto;
and that is working fine until I got the issue.
The issue is I have given some grid like col-lg-3 so I am not able to resize it beyond that because its total width is col-lg-3
SO here I am stuck don't know what to use to achieve what I am trying to.
My code
<div class="row no-gutters">
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card</p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card2</p>
</div>
</div>
</div>
My css
.testCard{
background-color:#96bed6;
height:100px;
resize: both;
overflow: auto;
}
Ps- I know why it is happening, because I am fixing the width using grid-system,but I need to make my website responsive so for that I am using this.
I just want to know I can I achieve this.
My Working code
.testCard {
background-color: #96bed6;
height: 100px;
resize: both;
overflow: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row no-gutters">
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card</p>
</div>
</div>
<div class="col-6 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11 testCard d-flex align-items-center justify-content-center">
<p>hi am a card2</p>
</div>
</div>
</div>
</body>
</html>I just want to know what would be the simplest way to achieve this, by which my Ui will be responsive and I can do resizing as well as drag n drop If I want
Resizing an d responsive is imp for me as per now
This is a pretty weird thing to do when using a grid because you're trying to defeat the purpose of a grid. One way to do this is to add a
max-widthto the.testcardAnd it should let it grow while still kind of keeping the grid responsive.I've added this to
.testcard:max-width: 100vw !important;Take a look:
but other than that, if this doesn't work for you, I'd consider using something other than a grid.