I am trying to divide a page into two parts i.e. 6 + 6 columns and put 3 divs horizontally in each part. Divs exceeding 3 align in bottom row in same part of page.
I am trying but still not able to align correctly. Here is my code. How can I do this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>
You are missing another inside the tag.
Just add this
<form action="" method="post">
<div class="row">
the class col in bootstrap does it, you need to add a row class div for it, within the row you put the col divs, bootstrap calculates the width accordingly depending on number of cols you put within row div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>
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>
In the form, my first column contains the label, so i require to keep the error and submit elements in the 2nd column, where the input element exist. how to do this? I can use my own css to adjust. But wondering if there is a in-build approach existing with bootstrap..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Title</h2>
<form class="form-horizontal" #formSignin="ngForm">
<div class="page-header">
<h2>User Sign-in</h2>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name</label>
<input type="text" class="col-sm-4"
name="name" id="name" placeholder="Enter Name"
>
<div *ngIf="formSignin.submitted && !name.valid">Name must to be filled</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
Add d-flex class on form group <div class="form-group d-flex">
Keep the input, the error and the submit button in a wrapper div
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Title</h2>
<form class="form-horizontal" #formSignin="ngForm">
<div class="page-header">
<h2>User Sign-in</h2>
</div>
<div class="form-group d-flex">
<label class="control-label col-sm-2" for="name">Name</label>
<div>
<input type="text" class="col-sm-4" name="name" id="name" placeholder="Enter Name">
<div *ngIf="formSignin.submitted && !name.valid">Name must to be filled</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
I would like to create a form and have it vertical. However on my computer the fields are all inline:
<div class="container">
<div class="col-sm-6 col-md-offset-3">
<form role="form" ng-submit="submit()" ng-controller="formCtrl">
<div class="col-sm-6 form-group">
<input type="email" data-ng-model="form.email" placeholder="your#email.here" class="form-control">
</div>
<div class="col-sm-6 form-group">
<input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
</div>
<div class="col-sm-4 form-group">
<button type="submit" class="btn btn-success">sign in</button>
</div>
</form>
<div id="messages"></div>
</div>
</div>
I would like a slightly more narrow form as seen in the code. class="form-horizontal" does not help at all. Picture below shows the result!
Reduce the parent container class to col-sm-3 and increase the child container's class to be col-sm-12.
So the parent container will have 25% width while the child containers will occupy the full width(100%) of the parent.
Readjust the centering of the form by modifying the offset-* classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-sm-3 col-sm-offset-4">
<form role="form" ng-submit="submit()" ng-controller="formCtrl">
<div class="col-sm-12 form-group">
<input type="email" data-ng-model="form.email" placeholder="your#email.here" class="form-control">
</div>
<div class="col-sm-12 form-group">
<input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
</div>
<div class="col-sm-4 form-group">
<button type="submit" class="btn btn-success">sign in</button>
</div>
</form>
<div id="messages"></div>
</div>
</div>
i have been creating a form by using bootstrap but the result is not ok for me. how can i make my form better?
<div class="row" ng-if="model.FieldType == customTypes.Select">
<div class="form-group">
<label class="control-label col-md-4">Seçim</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect"/>
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+</button>
</div>
</div>
<div class="form-group">
<div class="col-md-8 pull-right">
<select class="form-control" ng-options="field.id as field.value for field in DropdownListCustomItems" ng-model="model.DropdownListCustomItem"></select>
</div>
</div>
</div>
</div>
If I'm right, you are looking for something like this. This code will fix alignment issue. How ever, I don't know the bootstrap way for setting top-margin. In this code, I'm using a custom css for setting top margin.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label class="control-label col-md-4">Seçim</label>
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect" />
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+
</button>
</div>
</div>
</div>
<div class="col-md-8 col-md-push-4" style="margin-top: 4px">
<div class="form-group">
<select class="form-control"></select>
</div>
</div>
</div>
</div>
From official docs:
Use Bootstrap's predefined grid classes to align labels and groups of
form controls in a horizontal layout by adding .form-horizontal to the
form (which doesn't have to be a ). Doing so changes
.form-groups to behave as grid rows, so no need for .row.
So I tried:
<form class="form-horizontal">
<div class="form-group">
<input type="text" class="col-md-2 form-control" placeholder="Cantidad">
<input type="text" class="col-md-6 form-control" placeholder="Unidad">
</div>
</form>
But it seems the form-control class will make them return to an own single row each.
This is what I got:
How can I achieve both input to be placed in same row?
Add form-inline to the form class. Note that, if you make the form too small, it will still 'spill over'. In this case, and if you don't want all form-groups to be inline, use separate divs for the spacing.
Form inline example:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal form-inline">
<div class="form-group">
<input type="text" class="col-md-2 col-xs-6 form-control" placeholder="Cantidad">
<input type="text" class="col-md-6 col-xs-6 form-control" placeholder="Unidad">
</div>
</form>
</div>
</div>
Separate Div example:
fiddle
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<div class="col-md-2 col-xs-6">
<input type="text" class=" form-control" placeholder="Cantidad" />
</div>
<div class="col-md-6 col-xs-6">
<input type="text" class=" form-control" placeholder="Unidad" />
</div>
</div>
</div>
</form>
</div></div>
HTML
<form class="form-horizontal">
<div class="form-group">
<input type="text" class="col-md-2 pull-left" placeholder="Cantidad">
<input type="text" class="col-md-6 pull-left" placeholder="Unidad">
</div>
</form>
jsfiddle