use bootstrap to affix button on right of container - css

I am trying to use affix of bootstrap 3.
Its working fine but i need to do the button affix right to container not to window.
The problem i am facing is when i Ctrl-- to reduce screen size button get stick on right of window.(facing problem on large screen)
How can i stick button to right of container.so when screen size get large it display right to container.
Here is link: Fiddle link
.save-btn .affix {
top: 100px;
right: 0px;
}
.container {
border: 1px solid #ccc;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="save-btn">
<button name="submit" type="submit" value="Save" class="btn btn-orange btn-lg affix" data-spy="affix" data-offset-top="0">Save </button>
</div>
</form>
</div>
</div>
</div>

The jsfiddle is using BS 2.x, but your markup is for Bootstrap 3.
I created a Bootply (which includes BS 3 automatically): http://www.bootply.com/95296
I think you want to use pull-right and not affix to pull the button to the right.

Related

bootstrap container contents in the left side of the screen?

I am using bootstrap and I have a container with a login form.
However, I want to align this form to the left side of the page. However, using float left makes it look ugly and also makes the form input smaller, as you can see here:
http://codepen.io/anon/pen/xZGOjR
<div class="container">
<div class="form-container">
<form class="form-horizontal" name="form" role="form" >
<fieldset>
<div class="form-group">
<div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">
</div>
<input type="email" class="form-control input-lg input-round text-center" placeholder="Email" ng-model="user.email" name="email" ng-required autofocus>
</div>
<div class="form-group">
<div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">
</div>
<input type="password" class="form-control input-lg input-round text-center" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-round btn-block text-center">Log in</button>
</div>
</fieldset>
</form>
</div>
</div>
How can I make it so the form input is to the left side without looking ugly?
To do it the bootstrap way. You could add a column width to the form <div class="form-container text-center col-xs-3">
Here is your original example tidied up a bit http://codepen.io/anon/pen/XXbKvN
Bootstrap uses a 12 column grid system so that everything is nicely laid out on the page. For more info have a look here http://getbootstrap.com/css/#grid-options
You can use width: 350px; to the .form-container class.
It can better, if you can upload your design. screenshot.

How to center input boxes (bootstrap form)

<div class="container-full">
<div class="jumbotron text-center" style="background-color:#fff" ng-show="registrationForm">
<p class="genericText">Fill out the following information to create your profile.</p>
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="goalsForm" ng-submit="submitForm(goalsForm.$valid)">
<div style='width: 100%; display: inline-block;'>
<div class="form-group col-xs-4">
<label for="exampleInputEmail1">Create Password</label>
<input type="Text" class="form-control" id="inputGoal" placeholder="Enter a password" ng-model="goal">
</div>
<div class="form-group col-xs-4">
<label for="exampleInputEmail1">Confirm Password</label>
<input type="Text" class="form-control" id="inputGoal" placeholder="Confirm your password" ng-model="goal">
</div>
</div>
<button type="submit" class="btn btn-default">Complete</button>
</form>
</div>
</div> <!-- /container full -->
The above is my code for my form, I am using the full width bootstrap layout within Angular.js. Here is a screen of the output.
The two input boxes are within a parent div that is 100% wide, I am trying to center the two input boxes so that it does not lose it's responsiveness when resized.
I have tried
.text-center
margin: auto
without any success.
How can I do this?
Thanks.

Bootstrap 3: Form styles failing

Here is my jsFiddle with full code example.
I would like:
The entire "page content" container (that is, the <h1> that starts "Sign in to..." as well as the entire <form> element) to be centered in the screen; and
The "Need help?" link needs to be left aligned, aligning with the submit button's left side
I am trying to style center the container via text-center. I am trying to align the link via text-left. Neither are working:
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h1 class="strong-primary">Sign in to continue to Audit<b>Cloud</b>.</h1>
</div>
<div class="col-md-4 text-center">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
<div class="form-group">Need help?</div>
</form>
</div>
</div>
</div>
Any ideas?
You need to apply text-align:left; to the containing <div>. Instead of class="text-left, use style="text-align:left;. I put those changes into your fiddle:
http://jsfiddle.net/fjL4f2ew/1/

Bootstrap Glyph Icon Textfield

I want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.
Maybe someone has some hints for me - why is that?
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geschlecht</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
männlich
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
weiblich
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'de'
});
});
</script>
</div>
</div>
Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)
The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.
Update:
It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:
.input-group {
max-width: 280px;
}
Demo: http://jsfiddle.net/WNAB8/5/
In your fiddle you are overriding bootstrap's textarea maxwidth option. Remove this from CSS:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Working example
If you want to change the width of your text areas, change it using the form layout. From your layout you should look at the horizontal form and width can be changed by placing the input into a div controlled with the col-*:
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>

Bootstrap two inputs in input-group

I have following HTML, but I can't get two inputs to be on same line as all buttons.
<div class="well">
<div class="input-group">
<input class="form-control" placeholder="Page path">
<input class="form-control" placeholder="Name">
<div class="input-group-btn">
View
Edit
Delete</div>
</div>
</div>
http://www.bootply.com/Iu7Ic99jm6
Bootstrap makes the width of those input elements 100%. You will need to overwrite that value. Something like this:
.input-group .form-control {
width:45%;
margin-right:5%;
}
See my bootply fork here:
http://www.bootply.com/ApJNHnX5Lv
Place the entire content in a .form-inline <form> tag, and place the input and button sections in .form-group <div>'s :
<div class="well">
<form class="form-inline">
<div class="form-group">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Name">
</div>
<div class="form-group">
View
Edit
Delete
</div>
</form>
</div>
see forked bootply -> http://www.bootply.com/xSxTb0xzqh
you could use col divs to force the inputs to be in certain places. in combo with form-inline / form-group like so
Try using class form-inline
<div class="well">
<div class="form-inline">
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Name">
View
Edit
Delete
</div>
</div>
</div>
Bootply

Resources