I have the following form in my Angular app Using Bootstrap 4. I want my form label and input text box to be on the same line but its not working. The label and the input text box appears on separate lines. I have searched but couldn't find any better answer ::
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
<form class="form-horizontal" [formGroup]="parentCategoryForm" autoComplete="off">
<div class="form-group">
<label class="control-label col-md-2" for="parent">Category name</label>
<div class="col-md-10">
<input type="text" formControlName="parentName" name="parentName" class="form-control" id="parentName" />
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" (click)="cancel()" class="btn btn-outline-danger btn-sm mr-4">Cancel</button>
<button type="submit" class="btn btn-outline-primary btn-sm">Submit</button>
</div>
</form>
</div>
</div>
I am following the tutorials from this site Creating Horizontal Form Layout
What am I doing wrong?
please add class row on form-group
<div class="form-group row"> </div>
Use the input-group class. Follow This
Related
I have the following markup.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="Truck_Notes">Notes</label>
<textarea rows="3" class="form-control" id="Truck_Notes" name="Truck.Notes"></textarea>
<span class="text-danger field-validation-valid" data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary">
<a class="btn btn-secondary" href="/Trucks">Cancel</a>
</div>
</div>
<div class="col-md-4">
<div class="form-group text-end">
</div>
</div>
</div>
It looked fine in Bootstrap 4. But in Bootstrap 5 there is no spacing between the two rows.
Bootstrap has always been good about spacing between rows. What is the preferred way in Bootstrap 5 to have appropriate spacing here?
One solution would be to use the my class from Bootstrap for the top and bottom margin. In your example, I added my-3 for 1rem of top and bottom margin on your textarea element.
The reason the spacing is different on B5 is because form-group, form-row, and form-inline classes have been removed in Bootstrap 5: So Grid and Utilities are supposed to be used instead. The updated spacing in B5 is actually really useful in numerous instances. Because of that, many of the default classes used for spacing were removed.
Read more about Bootstrap Spacing here - Bootstrap 5 Spacing
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="Truck_Notes">Notes</label>
<textarea rows="3" class="form-control my-3" id="Truck_Notes" name="Truck.Notes"></textarea>
<span class="text-danger field-validation-valid" data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary">
<a class="btn btn-secondary" href="/Trucks">Cancel</a>
</div>
</div>
<div class="col-md-4">
<div class="form-group text-end">
</div>
</div>
</div>
I'm new to bootstrap and search a lot on this forum but couldn't find an answer to my question
I have the following code for 2 forms on my page
<div class="row justify-content-md-center">
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Join a group</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</form>
</div>
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Create a new group long text</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupName"
name="groupName"
placeholder="Fill in the groupname"
/>
</div>
<button
type="submit"
id="form-submit-create-family"
name="form-submit-create-family"
class="btn btn-primary"
>
Create
</button>
</form>
</div>
</div>
</div>
This looks like this
2 columns that looks the same
when I make the window smaller so that the long text of the second column becomes 2 lines, the layout is wrong.
wrong layout
I would like it to be the same, so the input box of the first one should be on the same height as the second one
You can use flex for that!
I've added the flex classes to the form and an extra div as wrapper around everything but the headline to let 'justify-content-between' do its magic and push the headline and the div apart.
<form method="POST" class="h-100 d-flex flex-column justify-content-between">
<h3 align="center">Join a group</h3>
<div>
<div class="form-group mt-auto">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</div>
</form>
https://jsfiddle.net/1jzgohs4/
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>
I am using Bootstrap 3 and I stuck on some form formatting.
E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)
If you look at this fiddle example you can see, that I almost achieved this by setting col-xs-6 to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).
So is there any way to align this form elements instead of this?
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
This fiddle might help you. The entire layout can be put into container and each form can be given a margin and text-align css properties.
And I dont think there is a need for text-right and col-xs-6 to be included, instead you can use container to restrict the max-width and make it more responsive as shown in the fiddle.
Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)
.form-group > label {
display: inline-block;
vertical-align: middle;
width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
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>