This code is for bootstrap2.
what is The equivalent of this html code in bootstrap3?
<div class="input-append pull-left visible-desktop" style="margin-top: 5px;">
<input type="text" data-i-search-input="true" class="search-query" name="word" value="word" data-autocomplete="true" data-autocomplete-url ="" placeholder="Enter word" >
<button class="btn btn-primary" type="submit">Search</button>
</div>
Thanks a lot.
From the Bootstrap 3 docs: http://getbootstrap.com/components/#input-groups
<div class="visible-lg">
<div class="input-group" style="margin-top: 5px;">
<input type="text" data-i-search-input="true" class="form-control" name="word" value="word" data-autocomplete="true" data-autocomplete-url="" placeholder="Enter word">
<span class="input-group-btn"><button class="btn btn-primary" type="submit">Search</button></span>
</div>
</div>
Demo: http://bootply.com/91940
'search-query' is gone.
Related
I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW
I'm using VueJS to have it dynamically add new inputs once a button is clicked. With my current code it is not adding the inputs. Why is that?
<div class="row" v-for="count in task.pos.length">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_number">Order Number:</label>
<input id="po_number" class="form-control" type="text" placeholder="Purchase Order" v-model="task.pos[count-1].purchase_order">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_amount">Order: Amount:</label>
<input id="po_amount" class="form-control" type="text" placeholder="Purchase Amount" v-model="task.pos[count-1].po_amount">
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-xs mb5 text-white" v-on:click.prevent="addEditNewPOEntry()"><i class="fa fa-plus"></i> Add PO</button>
<button class="btn btn-warning btn-block btn-xs" v-on:click.prevent="saveEdit(task)">Done</button>
</div>
addEditNewPOEntry: function(){
this.newTask.po.push({'purchase_order': this.task.purchase_order, 'purchase_amount': this.task.purchase_amount});
this.$set(this, 'task.pos.length', this.task.pos.length+1);
},
I am trying to divide 4 radio buttons into two lines using bootstrap 4 alpha6, but I can't:
<div id="payment-table" class="row">
<div class="col-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
Here's what I get:
I tried to remove "btn-group" class, and I get:
And I can't align them to fit full width, as I want two radio buttons per line, and each line has full width with 50% for each radio button.
I tried to give each one "col-6", and here's what I get:
Any suggestion?
actually we need to use only col class. by nesting we determine how many columns will be there.
Try this
.btn-primary {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="payment-table" class="row">
<div class="col">
<div class="" data-toggle="buttons">
<div class="row">
<div class="col">
<label class="btn btn-primary active col">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
</div>
Hope this helps!
I have a set of javascript buttons nested within another set of javascript buttons. Below is my fiddle.
<div data-toggle="buttons" style="padding: 20px;">
<div class="col-xs-6">
<div class="btn btn-info" style="padding: 20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP101" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP102" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP103" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP104" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="btn btn-info" style="padding:20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP201" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP202" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP203" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP204" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/q4xLs9f8/
My issue is that when I click the top level button, it logs out the nested radio button as if it was already selected. I don't have anything marked as selected or checked.
Does nesting buttons like this cause problems?
Nesting is certainly not intended. What happens is that it the javascript is selecting the last radio input in the group and selects that.
i have a Bootstrap Modal
<div id="responsive" class="modal" tabindex="-1" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h4>Some Input</h4>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
</div>
<div class="col-md-6">
<h4>Some More Input</h4>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#responsive">
New Cash Account
</button>
when i click every thing goes funny like this, why? help please!!!!
this application i in MVC 5 and using the bootstrap scaffolding
when it shoudl display
Bootstrap 3 (as your question is tagged), requires the modal-content to wrapped in modal-dialog div..
<div id="responsive" class="modal" tabindex="-1" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
Demo: http://www.bootply.com/123094
The progress-bar may be some to other conflicting element on your page.