Creating a input group in bootstrap 4 but one of the buttons seems to be out of alignment.
here is my code
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="upload file...">
<span class="input-group-btn">
<label class="btn btn-secondary">browse<input name="derfile" type="file" style="display: none;"></label>
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</div>
Here is my fiddle
appreciate some assistance
To achieve expected result use below
.btn{
vertical-align:top
}
https://jsfiddle.net/Nagasai_Aytha/0j0gmbjn/3/
Related
I want the input group to be aligned to left, as it is, and "Add new" button aligned to right of the row.
<div class="row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
</div>
</div>
In action: Bootply
As you can see, input group and "Add new" button are stacked vertically, although they're in a single row.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
</div>
<div class="col-lg-6">
<button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
</div>
</div>
Separete the col-lg-6 and input-group from the div
Bootply : http://www.bootply.com/W8ao9A0a4r
See below. I moved the add new button code right next to your search button. The input is to the left and the add new button is to the right of that. If you want the add new button to hug the right side of the browser, let me know.
<div class="actions row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
</div>
</div>
I have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
JSFIDDLE
It renders like this:
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
You can use Inline Forms like in the Bootstrap Documentation found here:
https://getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
Solution 1 - Using the Grid
Use the Bootstrap’s predefined grid classes for arranging the form elements.
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
Solution 2: Inline Form:
Use an Inline Form, as described by Bootstrap Inline Form Documentation.
You need to manually address the width and alignment.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
Running Example
This JSFiddle shows both solutions running.
The sample code and fiddle are updated for Bootstrap 4.
Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
Demo
Bootstrap Grid
In Bootstrap 4 you use multiple
<div class="col"></div>
I want to put the login boxes in the center. Don't know how to do it in the bootstrap. can anyone say it is to be done.
Below is the code that I have written. Please Correct me
<div class="container-fluid">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
<button type="button" class="btn btn-primary btn-lg">Register</button>
<h3><strong>OR</strong></h3>
</div>
<div class="col-sm-6">
<form class="form-signin" style="text-align:center" role="form">
<h2 class="form-signin-heading">Please sign in to Continue</h2>
<div class="col-lg-7"><input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required></div>
<div class="col-lg-7"><input type="password" class="form-control text-center" placeholder="Password" required></div>
<p><button class="btn btn-lg btn-primary" type="submit">Sign in</button>
</form>
</div>
</div>
If you only need to center the Login Div, simply follow the basic bootstrap grid standard.
The grid is divided into 12 columns. To center a div that spans 6 columns , you need it to be 3 columns away from the start very left of the page. i.e col-sm-offset-3
I modified your code to reflect the changes
<div class="container-fluid">
<div class="starter-template text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
<button type="button" class="btn btn-primary btn-lg">Register</button>
<h3>
<strong>OR</strong>
</h3>
</div>
<div class="col-sm-offset-3 col-sm-6">
<form class="form-signin text-center" role="form">
<h2 class="form-signin-heading">Please sign in to Continue</h2>
<input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required>
<input type="password" class="form-control text-center" placeholder="Password" required>
<br>
<button class="btn btn-md btn-primary" type="submit">Sign in</button>
</form>
</div>
</div>
working code : jsBin : Centered Login Div
I already have one row
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label><div>Address</div>
<input type="text" name="type" value=""/>
</label>
<label>
<button class="btn btn-primary" type="button">Verify</button>
</label>
<label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
</div>
</div>
And I want to do the div size full in the span9 .
So,How can i write it?
straight from the bootstrap docs my friend
<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>
Check this jsFiddle
Bootstrap already have class form-inline to set into inline.
Use this in your existing div append this class="form-inline"
Replace this line
<div class="span9 delivery_section">
into
<div class="span9 delivery_section form-inline">
Already i use this, hope this help you!
Try this.
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label>Address</label>
<div class="input-group">
<input class="form-control" type="text" placeholder="Address">
<div class="input-group-btn">
<button class="btn btn-primary" type="button"> Verify </button>
</div>
</div>
<div style="width:100%;height:150px;border:1px solid black;"></div>
</div>
</div>
If it doesn't seem to work, it probably because I'm using bootstrap 3.
label is inline element. And moreover in bootstrap to accept the width by default they have specified the display property as 'block'. Just override the code by placing the following code. Then you will done with your code.
label {
display:inline-block;
}
I have a fairly simple large input along with a submit box using the bootstrap3 framework, which is displaying perfectly on desktop/tablet resolutions, but viewed under a mobile viewport the submit button slides under the input box, and it looks rather ugly.
How do I either shrink the input/submit buttons to resize appropriately so they don't tile on top of each other, or alternatively if that's not possible have the submit button center align on mobile screensize only?
<div class="col-md-8 col-md-offset-4">
<div class="input-group input-group-lg">
<form class="navbar-form navbar-left" role="search" action="../includes/some.php" method="POST" id="navbar">
<div class="form-group">
<input type="text" class="form-control" id="focusedInput" autocomplete="off" maxlength="17" placeholder="Enter number" name="number">
</div>
<button type="submit" class="btn btn-primary submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>
</form>
</div>
</div>
Fiddle is here - http://jsfiddle.net/uradA/3/
Do something like this as taken from Button addons:
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control big">
<span class="input-group-btn">
<button class="btn btn-primary big" type="button">Submit</button>
</span>
</div>
</div>
Where big is:
.big {
font-size: 30px;
height: 80px;
}
Here is the updated example: jsfiddle.net/uradA
try this
<div class="col-md-8 col-md-offset-4">
<div class="input-group input-group-lg">
<form class="navbar-form navbar-left" role="search" action="../includes/some.php" method="POST" id="navbar">
<div class="col-xs-12 col-sm-8 form-group">
<input type="text" class="form-control" id="focusedInput" style="width:100%" autocomplete="off" maxlength="17" placeholder="Enter number" name="number"/>
</div>
<div class="col-xs-12 col-sm-4 form-group">
<button type="submit" class="btn btn-primary btn-block submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>
</div>
</form>
</div>
</div>