Resizing Objects for Twitter Bootstrap - css

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

Related

Bootstrap 4, Form-Inline does not align on XS view

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>

bootstrap input group alignment issue

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/

How to put multiple Bootstrap inputs on same line?

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>

how to put button near the text box in bootstrap?

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;
}

How to resize input/submit box in Bootstrap3

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>

Resources