I want to display the search button on the right of input text but it shows up below it. How can I show it on the right? Fiddle.
<div class="row">
<div class="page-header col-md-12">
<h1 class="text-center">Search Teachers</h1>
</div>
</div>
<div class="row" style="margin-top:80px;">
<!--
<div class="col-md-4 col-md-offset-1 col-sm-4 col-xs-12">
<div class="ui-widget">
<label for="tags">Class: </label>
<input id="class">
</div>
</div>
-->
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget">
<label for="city">City: </label>
<input type="text" id="city" name="city">
</div>
<button class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
the button actually will not be inside the input field
you can just add margin-right:-10px fro the search button
find clean and working fiddel :here
<div class="row">
<div class="page-header col-md-12">
<h1 class="text-center">Search Teachers</h1>
</div>
</div>
<div class="row" style="margin-top:80px;">
<!--
<div class="col-md-4 col-md-offset-1 col-sm-4 col-xs-12">
<div class="ui-widget">
<label for="tags">Class: </label>
<input id="class">
</div>
</div>
-->
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget" style="float:left; margin-right: 10px">
<label for="city">City: </label>
<input type="text" id="city" name="city">
</div>
<button class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
Add style="float:left; margin-right: 10px"
Related
This is my code I'm using, can anyone tell me how can I align my caterer and the dropdown menu. I got 5 screens some of them I manage to align but in this screen, I have no idea of how to do it.
<div class="row ">
<div class="col-md-12">
<div class="card m-b-30">
<div class="card-header">
<h5 class="card-title">RESERVATION COMPLETION</h5>
</div>
<div class="card-body">
<form id="form" enctype="multipart/form-data">
<input type="hidden" id="Id" />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="Category">Caterer</label>
<select class="form-control js-example-basic-single" id="data-packagetypes-caterercombo" style="width:200px;">
<option value="">Golden Crown</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ReservationNo">Reservation No</label>
<select class="form-control js-example-basic-single" id="data-reservationcompletion-combo" style="width:200px;" required>
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
<button type="submit" id="btnSubmit" class="btn btn-dark">Complete Reservation</button>
<button type="reset" id="btnClear" class="btn btn-dark">Clear</button>
</form>
</div>
</div>
</div>
</div>
In First Line Of code div class="row ". you Can Add align="center" Like This
<div class="row " align="center">
See Example
I'm trying to have a col-md-4 inside a col-md-12, but it is not working.
HTML:
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-md-12">
<input type="number" required="required" class="col-md-4" placeholder="Rule1" />
<input type="number" required="required" class="col-md-4" placeholder="Rule2" />
<input type="number" required="required" class="col-md-4" placeholder="Rule3" />
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
Does anyone know how can I put the Rules side by side in the row?
Thanks
use
<div class="col-xs-4"></div>
or "col-md-4" xs just to show in this tiny preview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-12 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule1" />
</div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule2" /> </div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule3" /> </div>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
</div>
In the following html code. Currently the label and textarea are in the same row I am trying to put the submit button exactly below the left corner of textarea, but it seems that my idea does not work:
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote ">
</textarea>
</div>
</div>
<div class="form-group col-sm-6" style="float: right;">
<div class="col-sm-4" style="float: left;">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
How should i fix it?
I am using bootstrap
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-9">
<textarea id="summernote" th:field="*{comments}" class="summernote "></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9" style="float: left;">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
Simple!
Try removing the style float: right; for the outer div(form-group col-sm-6) with the button and it should work
Not sure what you were trying to do, just remove the styles and put the button after the textarea:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote ">
</textarea>
<div>
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
</div>
Go with below link or just try below code may be it can help you -
JSFiddle
HTML Code
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote ">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
Since you have an col-sm-3 for comments label you should remove the float and set the offset of col-sm-offset-3:
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote "></textarea>
</div>
</div>
<div class="form-group col-sm-offset-3 col-sm-6">
<div class="col-sm-4" style="float: left;">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
Here is a bootply to test your code and snapshot:
Further check this out to better understand the grid structure with bootstrap.
I have two forms that need to be side by side. I can get them to float left but the button gets disabled when I use float left. I have tried display-inline and that doesnt work. I have tried span and that doesnt work. No idea why the button stops woeking. Here is a sample form
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="display:incline;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Will this work as a start?
I changed this (which had a type, should be inline) style="display:incline;... to style="float:left;...
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
but may I suggest to use style="display: inline-block;... on both your form containers, here using CSS styles (preferable) instead of inline style.
.formwrapper {
display:inline-block;
border:1px solid blue;
width:200px;
}
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I'm trying to add a search glyph to a button at the end of this centered search bar.
Below is the style I want:
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">Search</span>
</div>
</div>
</form>
<br><br>
</div>
</div>
</div>
But I want to to have a button a - something like:
<span class="glyphicon glyphicon-search"></span></button>
instead of the
<span class="input-group-addon">Search</span>
but when I do this the button moves onto the next line and throws off my styling.
Using Bootstraps form-inline class and form structure will resolve your issue.
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center col-md-6 col-md-offset-3">
<h1>Jumbotron with form</h1>
<form class="form-inline" role="form">
<div class="form-group form-group-lg">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group form-group-lg">
<button type="button" class="btn btn-default btn-lg pull-left">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</form>
<br><br>
</div>
</div>
</div>
Try this:
DEMO
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span style="padding:5px 0px 5px 0px !important" class="input-group-addon"><button class="btn"><span class="glyphicon glyphicon-search"></span> Search</button></span>
</div>
</div>
</form>
<br>
<br>
</div>
</div>
</div>