Using this starter template how can I control the with of the input width?
https://getbootstrap.com/docs/4.1/examples/starter-template/
This is the portion I would like to make smaller
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
I have tried to wrap the input in a div <div class="col-xs-2"> but that did not do anything. What alternatives do I have?
the simplest way to manage width of input field is just add the w-25 class to input field.
<input class="form-control w-25" type="text" placeholder="Search" aria-label="Search">
you can set width as you require
w-25
w-50
w-75
&
w-100 or w-auto
w defines the width.
Solution 1: Specify "max-width" for your input element:
input[type=text] {
max-width: 200px;
}
input[type=button] {
max-width: 100px;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
Solution 2: Or try adding col-* classes in the select and input.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<form class="row">
<div class="col-10">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
</div>
<div class="col-2">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
</form>
you can do this in css file by doing:
CSS code to put in css file or to put inside a style tag
input{
width:50px;
}
Related
I have a btn-group which I'd like to separate while maintaining the same group. Currently, although initially the group displays as expected, once I select the button from the other side ('Exclude'), I can't deselect it - the two halves seem to be behaving as two groups.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> Exclude
</label>
</div>
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="war" value="War" autocomplete="off"> War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="peace" value="Peace" autocomplete="off"> Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off"> Total
</label>
</div>
</div>
JSFiddle
I don't think you can separate the divs like that. I think the easiest solution is just to add a bit of margin on the "special" button:
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning" style="margin-right: 10pt;">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off">
Exclude
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="used" value="War" autocomplete="off">
War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="off" value="Peace" autocomplete="off">
Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked>
Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off" >
Total
</label>
</div>
</div>
The issue here is that bootstrap applies the styling to the buttons based on the active class, which is applied to the label via Javascript. So the radio buttons are actually selected and unselected correctly, it's just hidden by the styling.
Here's two ways of working around this:
Using HTML & CSS:
Combine the buttons into a single button-group with an id of custom-group and add the following css.
#custom-group label:first-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-right: 10px;
}
#custom-group label:nth-of-type(2) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Similar to the answer by kabanus, this will make the single button group look like two.
Using Javascript
Leave the HTML as is and add the following javascript:
var labels = document.querySelectorAll('label');
labels.forEach(function(label) {
label.addEventListener('click',function() {
labels.forEach(function(l) {
l.classList.remove('active');
});
label.classList.add('active');
});
})
This will 'manually' remove the active class from all the buttons and just add it to the one you just clicked. Make sure to tweak the selector for the labels so it doesn't affect other code on your page.
Here's a fiddle: https://jsfiddle.net/22et5z3h/4/
Trying to build a 3 control input-group with Bootstrap 3.3.7, however the height of the first addon does not match the following input nor button.
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn">Submit</button>
</div>
</div>
Anyone have a working sample to solve this design?
First and for all where is your <label> tag?
Do you want the submit in your input field? Or the submit button underneath it?
You need also to place form around it and your input can be declared as number because it's amount; your input field also needs a name. A submit button is an input button with type='submit':
example:
<input type="submit" class="btn btn-default" value="submit" id="submit">
You can also declare on your body class='container'
<body class="container">
<form id="youWantToGiveThisAName" class="form-group">
<label for="amountOfSomething"></label>
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
</div>
<div>
<input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
</div>
</form>
</body>
Here's a fiddle to see the result
I cannot seem to make the search button and input box be aligned on the same line...currently the textbox is above the search button...any tips?
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
</div>
<!-- End Search Bar -->
The problem is that the <div>s the <h2> and the <form> are display:block and fill the width of their container
You can convert your HTML to
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
and add this CSS
.headline-md,h2,form{
display:inline-block;
}
.headline-md{
width:80px;
margin-right:15px;
}
I added !important to force the new CSS rules. I added a code snippet to demonstrate the code.
.headline-md,h2,form{
display:inline-block !important;
}
.headline-md{
width:80px !important;
margin-right:15px !important;
}
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
I figured it out. This did the trick:
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form class="input-group" method="get" action="#Url.ArticulateSearchUrl(Model)">
<div class="input-group-btn">
<input type="text" name="term" class="form-control" placeholder="Search">
<span><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</div>
</form>
</div>
<!-- End Search Bar -->
I want to have a form, containing a checkbox, a textfield and a button, with textfield taking as much width as available.
Is that possible?
<form>
<input type="checkbox">
<input class='form-control'>
<button class="btn btn-danger pull-right">
<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
Here's a codepen with my (failed) intent
EDIT: Changed my question to not require form-inline to achieve the same result
You can use calc() in input="text" and according to Bootstrap Docs Examples the button would be a sibling of form-group and not a child as you have.
Remember that .form-inline only applies to forms within viewports that are at least 768px wide. So you need to see full-page of the snippet.
.form-group {
border: red solid
}
input[type="text"] {
width: calc(100% - 17px)
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
</div>
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
UPDATE (based on your updated question) - that you want the same outcome even for smaller screen - therefore don't require form-inline)
I'll say lets keep form-inline but make button child of form-group instead of sibling (as I had earlier in my answer - and as it should be accordingly to Bootstrap Docs Examples)
.form-group {
border: red solid
}
#f1 input[type="text"] {
width: calc(100% - 113px) /* regular button */
}
#f2 input[type="text"] {
width: calc(100% - 101px) /* small button */
}
#f3 input[type="text"] {
width: calc(100% - 91px) /* extra small button */
}
#f4 input[type="text"] {
width: calc(100% - 141px) /* large button */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="f1" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f2" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-sm btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f3" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-xs btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f4" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-lg btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
Try this:
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<input type="checkbox">
</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
</div>
I have the following bootstrap code for showing a textfield with a button:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<label>Second Column</label>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<!-- /input-group -->
</div>
I should get something like this:
But what I get is this:
I guess its because of the <label> tag.
Any clue on how can I fix this?
I think you need to move the label to outside the .input-group
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label for="field1">Second Column</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input id="field1" type="text" class="form-control" placeholder="Search for...">
</div>
</div>