I am using bootstrap 4 input-group as shown below. I have changed the border-width to 10px. It seems like the border width in the middle is doubling up:
Is it possible to make the middle border as wide as the side borders?
.input-text {
border-width: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
<div class="row justify-content-center">
<div class="col-lg-9 col-12">
<div class="input-group">
<input type="text" class="form-control input-text">
<input type="text" class="form-control input-text">
<div class="input-group-append">
<button type="submit" class="btn">Go</button>
</div>
</div>
</div>
</div>
</div>
Override the left/right border for the first and second input
.input-text {
border-width: 10px !important;
}
.input-text.first {
border-right-width: 5px !important;
}
.input-text.second {
border-left-width: 5px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
<div class="row justify-content-center">
<div class="col-lg-9 col-12">
<div class="input-group">
<input type="text" class="form-control input-text first">
<input type="text" class="form-control input-text second">
<div class="input-group-append">
<button type="submit" class="btn">Go</button>
</div>
</div>
</div>
</div>
</div>
Related
I have a form with various input controls set up like this:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
And I have a SCSS file that changes the border width on active and focus:
.form-control:focus,
.form-control:focus:active {
border-width: $input-focus-width !important;
}
Currently I'm getting this result:
How can I set the border with of the input-group-text element when the input control is active?
You can handle the element immediately placed after .form-control with the following selector:
.form-control:focus + .input-group-append .input-group-text
In your case:
.form-control:focus,
.form-control:focus:active,
.form-control:focus + .input-group-append .input-group-text {
border-width: 2px !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope">icon</span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
You can use the adjacent sibling combinator to select the .input-group-append div then the descendant selector to grab the div with the .input-group-text class as below. Bootstrap styles the border with a slightly darker gray so I've put an outline property on there too so you can definitley see it working.
.form-control:focus,
.form-control:focus:active {
border-width: 3px !important;
}
.form-control:is(:focus, :focus:active)+.input-group-append .input-group-text {
border-width: 3px !important;
outline: 3px solid blue;
/* added this because the border is styled a light gray colour and not so easy to see*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
I'd like a fixed width input-group-prepend that is larger than the content inside it, but I'd like the content to centered horizontally.
I've tried text-center and align-items-center, but it always seems to be left aligned.
How do I get the content to be in the middle of the input-group-text?
.input-group-text {
min-width: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
</div>
</div>
You need justify-content-center (https://getbootstrap.com/docs/4.2/utilities/flex/#justify-content) because the input-group-text is defined as a flexbox container with a row direction
.input-group-text {
min-width: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text justify-content-center">$</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
</div>
</div>
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.
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>
.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.
How can I add a gap between the input and the button using input-group on Bootstrap 3? jsFiddle
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Example</h1>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
Add your custom class to class="input-group-btn" and use padding to create the space.
See working example. > class="input-group-btn input-space"
.input-group-btn.input-space {
padding-left: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Example</h1>
<div class="input-group">
<input type="text" class="form-control"> <span class="input-group-btn input-space">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
Just add padding-left to .input-group-btn, for example:
.input-group-btn {
padding-left: 10px !important;
}
Another way is to overwrite the form-control class like this:
.form-control {
width: 90% !important;
}
I have difficulties to arrange the css bootstrap form .
On top of the picture below is the layout I get and just under is the layout I would like to obtain:
http://s27.postimg.org/dfztgn35v/flow_Root3665.png
This is: the first column witn names aligned on their last letter, and aligned input fields on the left and on the right.
Here is the css I used:
<div class="well">
<form class="form-horizontal" method="post">
<fieldset>
<legend>Event</legend>
<div class="form-group">
<label for="input-append date" class="col-lg-1 control-label">Date</label>
<div class="col-lg-3">
<div class="input-group input-append date" id="startDatePicker">
<input type="text" class="form-control" name="datepicker" id="datepicker1" readonly style="background-color: white" /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="form-group">
<label for="input-append type" class="col-lg-1 control-label">Type</label>
<div class="col-lg-2">
<select class="form-control" id="select">
<option>select1</option>
<option>select2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="col-lg-1 control-label">Title</label>
<div class="col-lg-6">
<input kl_virtual_keyboard_secure_input="on" class="form-control" id="inputTitle" placeholder="Title" type="text" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-1 control-label">Description</label>
<div class="col-lg-6">
<textarea class="form-control" rows="3" id="textArea" placeholder="Description" maxlength="200"></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
Thanks!
With some minor CSS you can acheive that. See example.
#soForm input,
#soForm select {
height: 50px;
font-size: 16px;
-webkit-border-radius: 0;
border-radius: 0;
border: 4px solid #444;
}
#soForm textarea {
font-size: 16px;
-webkit-border-radius: 0;
border-radius: 0;
border: 4px solid #444;
}
#soForm .input-group-addon {
height: 50px;
font-size: 13px;
-webkit-border-radius: 0;
border-radius: 0;
border-right: 4px solid #444;
border-top: 4px solid #444;
border-bottom: 4px solid #444;
}
.btn.btn-submit {
border-radius: 0;
height: 50px;
width: 100px;
border: 4px solid #444;
}
#media (min-width: 768px) {
#soForm .soForm {
margin: 10px auto;
}
#soForm .control-label {
margin-top: 25px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
<div class="container">
<form id="soForm" name="soForm">
<div class="form-group">
<label for="date" class="col-sm-2 control-label">Date</label>
<div class="col-sm-5">
<div class="input-group soForm">
<input type="text" class="form-control" id="date" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="type" class="col-sm-2 control-label">Type</label>
<div class="col-sm-3">
<select class="form-control soForm" id="type">
<option>select1</option>
<option>select2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea class="form-control soForm" rows="5" id="desc"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn-submit">Submit</button>
</div>
</div>
</form>
</div>
</div>