Using Boostrap 4, I have a .form-inline at the footer of my page. It looks fine when the viewport is larger than the XS breakpoint...
...but then breaks when entering XS view...
...from my understanding, the subscribe button should drop below the input field on XS view.
Here is the code that I used...
<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">
<form class="form-inline justify-content-center">
<div class="form-group">
<input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />
</div>
<button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> Subscribe</button>
</form>
</div>
...I managed to get what I wanted by putting the button in the same form-group div as the input...
<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">
<form class="form-inline justify-content-center">
<div class="form-group">
<input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />
<button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> Subscribe</button>
</div>
</form>
</div>
...but from my understanding of the Bootstrap format is that the button should usually be outside of that form-group.
Anyways, this seems to have solved the problem.
You should not put the buttons in the same form-group as the input because form-group, by default, has only margin-bottom.
There are a few ways to fix this issue.
Put the button in a form-group.
<div class="form-group">
<button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> Subscribe</button>
</div>
Keep your code as it is but remove the margin-bottom of the form-group.
<div class="form-group mb-0">
I'd go for the last approach.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">
<form class="form-inline justify-content-center">
<div class="form-group mb-0">
<input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />
</div>
<button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> Subscribe</button>
</form>
Putting the button code in the same form-group div as the input field seems to have worked...
<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">
<form class="form-inline justify-content-center">
<div class="form-group">
<input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />
<button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> Subscribe</button>
</div>
</form>
</div>
Related
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/
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'm attempting to have a glyphicon inside of the input field but for some reason it's outside of text box.
<!-- Panel -->
<div class="panel panel-default hidden-xs">
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<form>
<p><strong>Enter your number and we'll text you a link</strong></p>
<label class="sr-only">Phone Number</label>
<input class="form-control phone-txt" type="text" placeholder="Phone Number">
<button class="btn btn-submit" type="submit">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</form>
</div>
<div class="col-sm-5">
<p><strong>Or visit an app store to download now!</strong></p>
<a class="btn btn-default btn-lg" href="#">iOS</a>
<a class="btn btn-default btn-lg" href="#">Android</a>
</div>
</div>
</div><!-- End panel -->
It looks like you have that glyphicon attached to the button. You might try something like this...
<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>
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 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>