Here is my bootstrap code
<div class="input-append" align="center">
<input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"
/>
<button type="submit" class="btn">Search</button>
<button class="btn btn-primary active"><i class="icon-white icon-plus"></i> plus</button>
<button class="btn btn-primary active"><i class="icon-white icon-bullhorn"></i> Goto</button>
</div>
And here is a jsfiddle
How give top-padding and how to give some space in between the buttons and move the plus and goto button to right side
add another div for those 2 buttons and give float:right
And for gap between them give margin
button{margin-right:6px}
DEMO UPDATED
if you want to float right you use the built in class "pull-right"
<div class="pull-right">...</div>
and for search more looking one will be
<form class="form-search">
<div class="input-append" >
<input type="text" class="span2 search-query input-large" placeholder="search posts,users..">
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
and for keeping distance you can use margin
margin:10px
Related
how to create a navbar same as stack overflow navbar with search form icon.
i use it but cant find a way.
<div class="form-group">
<input type="text" name="search" class="form-control" placeholder="Search here..">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>```
You use DIV's to contain each group of code and arrange them using CSS. I changed the div class form-group to contain the entire form in one container. And you can use the class topnav to contain the images or text you want next to the search bar. Just a little CSS and your on your way!
<div class="topnav">
<a>Stack Overflow</a>
<div class="form-group">
<form>
<input type="text" name="search" class="form-control" placeholder="Search here..">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
I want to place button beside input text
※ example [input text][button]
And button size should be fixed.
Even though the window size change, button size should be fixed and should be beside input text.
Below is my code.
<div class="form-group row">
<div class="col-sm-2">
<label>...</label>
</div>
<div class="col-sm-8">
<input type="text">
</div>
<div class="col-sm-2">
<button type="button"></button>
</div>
</div>
This code makes button move when window size is small.
And also makes button small, so that unavailable to see value inside button.
I want to know how to code as I expect.
If you want the layout for mobile devices you can use col-xs-2 col-xs-8 col-xs-2 (if you are using bootstrap 3) if you are using bootstrap 4 you can use only col-2 col-8 col-2. But if your screen size is small, grid makes your button small according to your screensize.
As the previous one did not work,
Please try this.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-success" type="submit">Go</button>
</div>
</div>
hope this one helps.
Here the class i've used is from bootstrap. This will solve your problem
<form style="margin-left: 100px;" >
<div class="form-group">
<label for="uname">Email</label>
<input type="email" class="form-control" name="email" placeholder="Enter your email" style="width: 30%">
</div>
<button type="submit" name="submit" value="Submit" class="btn btn-lg btn-primary btn-block" style="width: 20%;">Log In</button><br>
</form>
Here is my current UI:
[![enter image description here][1]][1]
I would like to move the red button shown in the picture to the left side of the input. So far I've tried adding a margin-left property but that did not work. Does anyone have a suggestion on how to get the button to move to the left? I'd like to have it aligned with the bottom input field.
Put
style="position:absolute"
to your button, you will be able to move with Left after that.
Bootstrap 3 has a control called a Input Group. You can use it like this:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<input type="text" class="form-control">
</div>
Note: To move the button to the left or right, simply move the <input> above or below the <div class="input-group-btn">
Try this
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
The solution was easier than I thought, instead of adding margin-left I added margin-right: 20px and it worked.
How to fix a button Close because when width of screen decreasing it slip under the save button. How to prevent this by bootstrap or css?
Link on Codepen because it does not happens in stack snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-md-offset-2 col-md-2">
<input type="submit" value="Save" class="btn btn-default" />
<input type="submit" value="Close" class="btn btn-default" />
</div>
</div>
Give the div that surrounds the buttons white-space: nowrap;
Link on Codepen because it does not happens in stack snippet.
This is possibly likely because your Codepen is using col-xs-2 and your code here is using col-md-2.
If you're actually struggling with col-xs, then:
Another option is to simply use a different col-* class to increase the width instead of xs:
<div class="col-md-offset-2 col-md-2">
<input type="submit" value="Save" class="btn btn-default" />
<input type="submit" value="Close" class="btn btn-default" />
</div>
I have this html:
<button type="submit" class="btn btn-default pull-right" id="loginBtn" >Login</button>
The addition of pull-right makes button cut off from bottom:
How can I fix this?
Make sure it's inside a Bootstrap form-group..
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg pull-right">Login</button>
</div>
</form>
Demo: http://bootply.com/106344
Bootstrap 3 button class "btn" adds display: inline-block, which "Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box" (http://www.w3schools.com/cssref/pr_class_display.asp). A way around this would be to try the class "clearfix" around the parent (as was explained above). You could also try wrapping the button in a div:
<div class="pull-right"><button></button></div>