Make text box stop growing after sm break point? - css

Question

I have a bootstrap 4 input text box. I want make it stop growing after sm break point, so that it won't expand to the full screen width.

Answer 1

Use col-md-* in wrap div of input...
the sm takes all screen and from md and up it takes width as you set in col-md-*
See fiddle:https://jsfiddle.net/s9q4d681/3/
<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>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
</div>
</div>

Answer 2

.row {
margin-top: 20px;
}
.col {
background: #f8f9fa;
border: solid 1px #ddd;
padding: 5px 10px;
}
.col-sm-6 {
background: #f8f9fa;
border: solid 1px #ddd;
padding: 10px;
}
input{
max-width: 340px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
Col-6
</div>
<div class="col">
Col-6
</div>
</div>
<div class="row">
<div class="col-sm-6">
<form action="">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</form>
</div>
</div>
</div>
You can simply restrict input field width using max-width CSS property.