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-width to the .testcard And 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:
.testCard {
background-color: #96bed6;
height: 100px;
resize: both;
overflow: auto;
max-width: 100vw !important;
}
<!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>
but other than that, if this doesn’t work for you, I’d consider using something other than a grid.
To resize or reduce Bootstrap Cards
In div add
style="width:27rem; height:27rem;"
.testCard {
background-color: #96bed6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Resize Bootstrap Cars</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" style="width:27rem; height:27rem;">
<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" style="width:500px; height:500px">
<p>hi am a card2</p>
</div>
</div>
</div>
</body>
</html>
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
could you suggest me something else I should use, which is responsive as well as resizing also, because here the issue is when I resize the one div the other one is not displaced it is fixed it is still there. which is not default behavior of resize
I think you did not got what I am trying to achieve, I am trying to resizing my div’s
