I have a project that is based on the Gentellela template from ColorLib. The Search Bar at the top is inline and styled, however is not a form. When I add the code to submit the search to my view, the submit ("Go") button moves to the next line.
What is the best way to accomplish this while keeping the style?
Original Code from Template (sans form tags).
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
My Latest Attempt
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for...">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</form>
</div>
As Always, I appreciate all help, suggestions and comments.
A good practice would be to nest the input field and the button inside form-group with a div that has a input-group class. This is how input groups are made on Bootstrap.
It applies a display:inline-table style to hold the components inline.
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
</div>
</form>
</div>
Related
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 try to make a full width search box. its working in tab and mobile but not working in desktop or laptop
Here is my code
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-md-8 col-sm-8 col-xs-10">
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
when I see the responsive view its working on mobile and tab view
But its not working in desktop view
Remove you nav-bar class and add form-horizontal
<form action="" autocomplete="off" class="form-horizontal" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
Give col-lg-12 class to the div
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group col-lg-12">
<input name="searchtext" style="width:100%" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-xs-10 col-sm-8 col-md-8 col-lg-6">
<div class="form-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</div>
</div>
I am trying to have a textbox in bootstrap, which has the same look and feel as the one you place inside a panel (large, rounded corners, full div length). On the right side of such a textbox I want to have a few buttons.
I tried a bunch of stuff - either it becomes correctly aligned, but the textbox loses all styles. Or the textbox looks correct, but the buttons wrap down to next line!
Some of what I have tried:
<div class="row">
<div class='col-md-8'>
<input type="text" class="input-block-level input-lg" placeholder="Stuff 2">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</div>
</div>
and...
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
and...
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
Nothing works!I am thinking it shouldnt be so hard to place a bunch buttons next to a textbox that takes all available space and is nice and large :(
Any help is very much appreciated
Couldn't you just do it like this?
<div class="form-group">
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Stuff2" />
</div>
<div class="col-md-3">
<button class="btn btn-primary">Save</button> <button class="btn btn-danger">Delete</button>
</div>
</div>
As far as I know that to combine textbox and button, I use:
class="input-group"
and give class="form-control" to all textboxes
You mean like this follows:
<div class="row">
<div class='col-md-8'>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn">Sign up</button>
</span>
</div>
</div>
</div>
If it is what you mean, here's the demo:
Demo in jsFiddle
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>
I am trying to use an input text box along with a selection box of custom height and width, but I couldn't align them properly:
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" style="width: 600px; height: 30px" />
<select class="form-control">
//options here
</select>
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</div>
</form>
and the output looks something like this
then I set a custom width for Select button [width: 300px],
It seems like the input text box, select drop down and submit button are misaligned.
Please...how can I fix them so both are aligned properly?
You should be looking at Bootstrap 3.0 grid-column structure.
Here's what you are looking for
Markup:
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-4 col-md-3">
<input class="form-control" />
</div>
<div class="col-xs-4 col-md-3">
<select class="form-control">//options here</select>
</div>
<div class="col-xs-2 col-md-1">
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button></div>
</div>
Use the bootstrap grid system insteed of fixing width http://getbootstrap.com/css/#grid
Try with form-inline and form-group
<form class="form-inline">
<div class="form-group">
<input class="form-control" />
</div>
<div class="form-group">
<select class="form-control">
<option>Categories</option>
</select>
</div>
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</form>
All thing you should do is wrap the entire thing in form-inline class and form-group
Code
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" />
</div>
<div class="form-group">
<select class="form-control">
<option>All Categories</option>
</select>
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</div>
</form>