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.
Related
There must be a way to display one form next to another in Bootstrap without having to manually set the CSS to display:inline-block.
I've created a fiddle here.
I've used the form-inline class but that doesnt seem to make much of a difference. Am I missing something?
Here is solution:
Add a class,"pull-left" with form-inline.
Hope this will help.
You could put two forms side by side using the grid system. For example:
<div class="container">
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
See a working example here on JS Fiddle
You should use input-group class, as shown here:innput-group
By applying col class in forms you will get the proper result.
<div class='container'>
<div class='row m-b-20 title'>
<div class='col-sm-6'>
<h1>Test page</h1>
</div>
<div class='col-sm-6 text-right'>
<form action='/error-logs' method='POST' class='input-group pull-left'>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</form>
<form action='/error-logs' method='POST' class='input-group pull-right'>
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
</div>
</div>
i-ve stumbled on this searching for an aswer for similar problem
i-ve solved it by doing this
<form action="cosprocess.php" method="post" style="float: left; padding: 1px;">
Bootstrap 3 was likely used when this question was originally asked. Sangrai's answer of using pull-left may have worked well in 3, but unfortunately it does not in Bootstrap 4 when there are too many form controls to fit onto a single line. The controls don't align well.
The following has worked well for me in Bootstrap 4. It may be risky, though, since the Bootstrap documentation says nothing about having an inline form within an inline form.
<div class="form-inline">
<form class="form-inline">
<!-- First set of form controls go here. -->
</form>
<form class="form-inline">
<!-- Second set of form controls go here. -->
</form>
</div>
FYI - The Bootstrap 4.6 documentation says that pull-left was removed because it was redundant to float-left.
Make the parent div come under a row and have 12 col length for all vw.
Use buttons after input field and put all of them in a single form with class in-line.
fiddle
`
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</span>
</div>
</form>`
Thank you for taking a look at my question!
What I'm trying to do in bootstrap is add a textarea that have text-editor buttons in them.. "bold", "italic" and "attachment" it's supposed to look like this:
Mockup
But instead I have this:
My Results so far
The main problems I'm having is:
Hot to Prevent text in textarea from going under the editor buttons
What do I need to override in buttons to get the desired effects
By the way I'm using a bootstrap template/theme its called remark, I'm using one of their editor element:
getbootstrapadmin.com/remark/base/forms/editor-markdown.html
template/11989202
HTML I have so far:
<div>
<div class="md-header btn-toolbar btn-toolbar-btm">
<div class="btn-group">
<button class="btn-default btn-sm btn btn-pure" type="button" title="Bold" tabindex="-1" data-provider="bootstrap-markdown"
data-handler="bootstrap-markdown-cmdBold" data-hotkey="Ctrl+B"><span class="fa fa-bold">
</span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Italic"
tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic"
data-hotkey="Ctrl+I"><span class="fa fa-italic"></span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Heading" tabindex="-1">
<span class="icon wb-attach-file"></span> </button>
</div>
</div>
<textarea class="form-control" rows="8" placeholder="Type something here..."></textarea>
</div>
CSS:
.btn-toolbar-btm{
position:absolute;
top:212px;
margin-left:8px;
z-index:3;
}
If you can help me in any way I will GREATLY appreciate it, you would literally save my job :/
try this code
<div class="form-group required-field-block">
<div class="col-md-12 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
</div>
I am creating a site using Bootstrap. I have one header, which includes the sites logo, I then want on the right of the container a search bar, aligned vertically in the header. My second header then has my link navigation stretching across the container.
I am having trouble adding the search bar, I tried to add it into a ul and pull to the right but it just went below my logo and full width.
Here is a bootsnip
http://bootsnipp.com/snippets/d393M
The mark up i am using for my search is
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-info" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
Your link to the Bootsnip is not working so I can't look at it in more depth.
Try wrapping the search inside form tags as follows (this code from getbootstrap.com):
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Try surrounding your form in a form element and adding the .navbar-form class to it.
I'm trying to implement a search bar on the footer using Bootstrap. The search bar appears to display properly when the window is maximized. However, when I try to resize the window to be smaller, the search form widens and the height of the bottom navbar appears to increase, as shown in the picture below:
What I want is for the navbar height to stay the same. The search bar should also not expand in length. Basically, even with a smaller window, the navbar should appear as follows:
The HTML code that I used to generate the bottom navbar is provided below:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Any help would be greatly appreciated, as I'm fairly new to Bootstrap and web development in general and I've been stuck trying to look for a solution to this problem for several hours without any luck.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form role="form">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9093/
Now you can add styling like padding and margin as you want :)
Try to remove "navbar-form" class from your form and try again.
Instead of this
form class="navbar-form navbar-left"
Try as
form class="navbar-left"
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