'in Bootstrap 4, textbox form-control width is not working. the textbox does not appear in full-width. I'm using asp.net mvc 5
<div class="row">
<div class="col-md-6 my-3">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>I want to make the textbox appear in full-width. I did my research and found out that the width is in default to appear in full-width but in my work it appears in a fixed size.
Solution 1:[1]
Your <form> is nested inside the card;
Your card is nested inside col-md-6 of the row;
Hence on media(min-width: 992px), your form-controls will only get
1/2 * 9/12 = 37.5% of the full width.
Your form labels and inputs are already using full width of the card. The problem is, the card is not using full width of the container.
To fix that, you can either remove <div class="row"> and <div class="col-md-6 my-3"> completely, or just change <div class="col-md-6 my-3"> to <div class="col-md-12 my-3">
Solution 2:[2]
You need to define parent div with full with
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 my-6">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>
</div>
</body>
</html>Solution 3:[3]
Try adding this to your css:
input, select, textarea {max-width: 100% !important;}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Mehul Bhalala |
| Solution 3 | A Ghazal |