i want to move my "Submit form" a little bit down. i have tried a lot but the problem doesn't seems to go away.....
<div class="form-group">
<button type="button" class="btn btn-success col-md-4 col-md-offset-4 pull-down">Submit form</button>
</div>
Button is too near with the other line:
Use this
HTML
<div class="form-group" style="margin-top:20px;">
<button type="button" class="btn btn-success col-md-4 col-md-offset-4 pull-down">Submit form</button>
</div>
Use a media query (form-group will add space itself on smaller viewports) and a custom class on the form-group div to add margin to the top.
See Snippet.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<hr>
<div class="container">
<div class="form-group">
<input class="form-control" />
</div>
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group lg-group">
<div class="col-sm-4 col-sm-offset-4">
<button type="button" class="btn btn-success btn-block">Submit form</button>
</div>
</div>
</div>
Add an extra class to your button to avoid overriding bootstrap CSS and then simply add something like so
your HTML become :
<div class="form-group">
<button type="button" class="btn btn-success col-md-4 col-md-offset-4 pull-down mybutton">Submit form</button>
</div>
suggested CSS
.mybutton {
margin-top: 30px;
}
LIVE DEMO
Related
I want to remove the margin on top the form, so that it will have the same margin with the text on the left.
This is my code:
<div class="secound-top container">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 col-xl-12">
<h4 class="title"> Plain Page</h4>
<form>
<div class="input-group">
<input class="search-text" type="text" name="name" placeholder="search for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
</form>
</div>
image
Insert this into you CSS file or in the style tags:
body{
margin-top: 0px;
}
I have solved the error, I enclosed the form tag on a container div, then with a negative margin-top, the form went up:
There is the code:
<div class="container-fluid form">
<form>
<input class="search-text" type="text" name="name" placeholder="search
for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
CSS
.form{
margin-top: -30px;
}
I'm trying to make the Post button stick to the right and the text field for the tags fill the entire left part of the row in the following Bootstrap 3 form:
Here's the markup for the entire form:
<form>
<div class="form-group">
<textarea class="form-control" id="entry" placeholder="Write something in Markdown..." rows="3"></textarea>
</div>
<div class="row">
<div class="col-sm-9">
<input class="form-control input-sm" id="tags" placeholder="tag1, tag2, tag3...">
</div>
<div class="col-sm-3">
<button class="btn btn-primary btn-sm" type="submit">Post</button>
</div>
</div>
</form>
I admittedly don't understand the Bootstrap grid system (or CSS in general) well enough to make this work - can you help me?
You can do this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Post</button>
</span>
</div>
You can find more examples here: http://getbootstrap.com/components/#input-groups-buttons
You can use the .btn-block class in your Post button to make it span the entire width of the column is on. In your case, .col-sm-3.
<div class="col-sm-3 text-right">
<button class="btn btn-primary btn-sm btn-block" type="submit">Post</button>
</div>
Here you can see it. Note that I replaced the .col-sm-* classes with .col-xs-* ones, so you can see it directly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<textarea class="form-control" id="entry" placeholder="Write something in Markdown..." rows="3"></textarea>
</div>
<div class="row">
<div class="col-xs-9">
<input class="form-control input-sm" id="tags" placeholder="tag1, tag2, tag3...">
</div>
<div class="col-xs-3 text-right">
<button class="btn btn-primary btn-sm btn-block" type="submit">Post</button>
</div>
</div>
</form>
Fellow man, the bootstrap system uses a 12 grid system, try this:
<div class="input-group">
<input type="text" class="form-control" placeholder="tag1, tag2, tag3...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Post</button>
</span>
</div>
https://getbootstrap.com/examples/grid/
Adding the form-control class to your btn element will make it fill its container.
<a href="#" class="btn btn-primary btn-sm form-control>Link Text</a>
Text fields fill their container by default.
<form>
<div class="form-group">
<textarea class="form-control" id="entry" placeholder="Write something in Markdown..." rows="3"></textarea>
</div>
<div class="row">
<div class="col-sm-9">
<input class="form-control input-sm" id="tags" placeholder="tag1, tag2, tag3...">
</div>
<div class="col-sm-3 text-right">
<button class="btn btn-primary btn-sm" type="submit">Post</button>
</div>
</div>
</form>
I have created a Textbox and a submit button with the help of input-group in Bootstrap:
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
I want to add an icon for geolocation in the textbox which is clickable, I tried to do many things like adding another span with input-group-addon but that's creating a button kind of thing. I want the icon to be inside the textbox and make it clickable. Can anybody suggest a way to do it?
Add an anchor set it a class of glyphicon and then make its position:absolute like one below:
DEMO
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
CSS
.glyphicon-map-marker{
position:absolute;
z-index:1000;
top:30%;
left:2%;
}
a.glyphicon-map-marker
{
text-decoration: none !important;
}
Anirudh, Hi there, You could probably try something like this without all the extra css.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<a href="#" onclick="alert('clicked');" ></a>
<div class="input-group-addon glyphicon glyphicon-map-marker btn"></div>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<form ng-submit="search(searchterm)">
<div class="form-group">
<div class="input-group input-group-lg col-sm-8 col-md-8 col-lg-8 col-centered">
<input type="text" class="form-control" ng-model="searchterm">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
<div class="col-sm-2 col-md-2 col-lg-2"></div>
</div> <!-- end row -->
My client wanted a search box with a clickable search glyphicon on the right, and the search box centered in the window, the search box bigger than normal (input-group-lg), with responsive views. I was a miserable wretch until I saw AngularJR's answer. :-)
.input-group abbr{
font-size: 23px;
position: absolute;
right: 16%;
top: 6px;
z-index: 500;
}
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">enter code here
<abbr><i class="fa fa-map-marker"></i></abbr>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
I have this issue:
The html is as follows:
<div class="row">
<div ng-cloak class="col-md-7 col-sm-6 col-xs-12">
<form class="form">
<input type="text" class="form-control" />
</form>
</div>
<div class="col-md-5 col-sm-6 col-xs-12 no-wrap">
<span class="push-buttons-away-from-search-bar btn-group" role="group">
<a class="btn btn-lg" href="">A link</a>
<a class="btn btn-lg" href="">Another link</a>
</span>
</div>
</div>
Can you think of a responsive (bootstrap) way of making the search bartake up all space it can, and leave space for the 2 buttons on the side.
Notice the spacing between the 2 buttons, the button grouping styling was getting in the way... Perhaps you suggest using button groups?
What you're likely looking for, assuming you're using Bootstrap 3, is Justified Buttons. Red: http://getbootstrap.com/components/#btn-groups-justified
Example:
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Right
</div>
</div>
</div>
JSFiddle: Note that this can be extended to more than one button.
Update
Since you need the input to scale without the buttons scaling, have you tried Segmented Buttons on an Input Group? Ref: http://getbootstrap.com/components/#input-groups-buttons-segmented
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Button One</button>
<button type="button" class="btn btn-default">Button Two</button>
<button type="button" class="btn btn-default">Button Three</button>
</div>
</div>
JSFiddle: Note this won't give you a space between the buttons.
What would be the best way to have a logo and form in the center of the page while being responsive?
Currently, I have something like
<div class="container">
<img src="logo.jpg" class="logo img-responsive center-block">
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
then I edited it slightly in the css;
.form-group { margin-top: 15px; width: 50% }
.logo { width: 300px; }
However, now the logo will not resize like the input box does.
now you'll need to change the col size for each media that you need xs sm md and lg but this would do the trick that you are looking for.
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/250x300" class="logo img-responsive center-block" />
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" /> <span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
i assumed that you need a fluid container, the offset col would take , and for farther reading check this
Demo
A fluid container does the trick, but a fixed container should be able to keep it center without taking all the screen span which is annoying on medium+ resolutions.
Also, media queries should keep .container within a specific width for responsiveness' sake.
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/250x300" class="logo img-responsive center-block" />
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" /> <span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>