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>
Related
I'm using Bootstrap 3 and I have set up this grid for my webpage:
<div class="container">
<div class="header">
<div class="top-nav">
<div class="row">
<div class="col-1">
<img src="https://sitename.com/logo.jpg">
</div>
<div class="col-7 mid-nav">
<!-- Search box & Navbar comes here -->
</div>
<div class="col-1" style="margin-top:30px !important;">
<i class="fa fa-shopping-cart fa-4x sabad-kharid"></i>
</div>
<div class="col-3">
<form method="POST" action="">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
And the result is shown in this:
As you can see the Bootstrap form does not appear in the col-3 class and it appears at the below of this row. However it should be placed at the left side in the div with class of col-3.
So what's going wrong here? How can I solve this issue?
You should use col-xs-1 col-xs-7 col-xs-3 in your class (instead col-7) or any size and display what you want.
I have a form that looks like this (on a big device, e.g. pc monitor)
that is as it should be. On smaller devices it however looks like this:
the button is no longer in the same line as the input. My code looks like this:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
How can I ensure that it also is aligned correctly when using smaller devices?
PS: Bootstrap is being used
Your columns are col-md, which means that when the screen width gets below 992px, the columns will take up the full width of the page. So if you want them to stay inline, then add col-xs classes with the column sizes that you need.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-xs-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-xs-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
Both the input and button need to be set to display: inline, and they should be placed in the same column. Below works and should satisfy your needs:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md">
<input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value="">
<a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a>
</div>
</div>
</div>
</div>
Have you tried stacking the bootstrap col classes?
The lg / md / sm all target different screen size thresholds. Using multiples should help you define the space it should take up in a given scenario. I would say you can steal some real-estate from that input.
You could also consider putting them in the same div.
Your code modified with stacked col classes:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10 col-sm-6">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2 col-sm-6">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</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>
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.
I have this problem with all the labels/inputs in my code. When my browser is in full screen it works fine, but when I minimize it even a bit, the input field steps over the label.
How do I avoid this?
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
Here's a jsfiddle for an example http://jsfiddle.net/2MdFf/
PS: Same goes for buttons: http://jsfiddle.net/9q949/
<div id="user-edit-buttons" class="form-group">
<div class="col-xs-1">
<button type="button" class="btn btn-danger" onclick="cancelUserEdit()">Avbryt</button>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-success" onclick="saveUser()">Lagre</button>
</div>
</div>
This is precisely why Bootstrap offers col sizing for multiple screens widths. Your column contents are overflowing their containers due to the sizing of those elements.
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-2 col-lg-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
They expect you to use different column sizes to make your elements work well in the different screen sizes.