Why is the right side not taking the full width of my screen?
I know this could be done better with e.g. two rows, but this way I was able to reproduce the problem.
I am actually having left and right with class .col-md-6, which is showing right in the snipped but wrong on my machine on Firefox and Chromium.
I already tried deleting cache as well, if this comes up.
Thanks for any hint.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-12">
<div id="left_1">left:
<div id="left_2" class="input-group">
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="left_col_1">Left col 1</label>
<input type="text" class="form-control" id="left_col_1">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="left_col_2">Left col 2</label>
<input type="number" class="form-control" id="left_col_2">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="left_col_3">Left col 3</label>
<input type="text" class="form-control" id="left_col_3">
</div>
</div>
<div class="col-2 input-group-append float-right">
<button id="left_button" class="btn btn-danger" type="button">X</button>
</div>
</div>
</div>
</div>
<button id="left_button_2" type="button" class="btn btn-outline-primary">Add left</button>
</div>
<div class="col-12">
<div id="right_1">right:
<div id="right_2" class="input-group">
<div class="row">
<div class="col-10">
<div class="form-group">
<label for="right_col_1">Right col 1</label>
<input type="text" class="form-control" id="right_col_1">
</div>
</div>
<div class="col-2 input-group-append float-right">
<button id="right_button" class="btn btn-danger" type="button">X</button></div>
</div>
</div>
</div>
<button id="right_button_2" type="button" class="btn btn-outline-primary">Add right</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
EDIT: There seems to be a problem with the .input-group and .input-group-append. After I removed all of them it worked as expected.
I think, it's because you are putting flexbox into flexbox ("input-group" class is styled by default as flex and "row" class too). If we remove just "display:flex;" property in "input-group", works fine. In fact, pay attention, that left row doesn't take the full width too - it's almost 100%, but not equal. "Row" class doesn't have as default any width property, so maybe width counting is somehow based on child elements?
I don't think it's the best explanation, but it's very interesting behaviour and it would be great, if someone solve this issue better with fully understanding what's going on there with this flexboxes.
EDIT:
Also styling "input-group" class with "flex-direction: column;" helps. After that "row" is shown as one column with 100% width - without it is taken as just one of potential columns in flexbox's row.
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>
How do I centering this form? No matter what I've tried (changing around the div classes, the styles, etc. it still does not center).
I've tried looking at using flex box and other tools but regardless of what I do, if something gets centered, the input field stays to the far left.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row text-center">
<form>
<div class="fc">
<div class="fg cg">
<h3>
Name
</h3>
<input class="fc"style="width: 35%" type="text"></input>
</div>
<div class="fa">
<input class="btn" type="submit" value="Submit"></input>
</div>
</div>
</form>
</div>
You just need to make the form a column, then .text-center works:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row text-center">
<form class="col-12">
<h3>
Name
</h3>
<input class="fc" style="width: 35%" type="text"></input>
<br/>
<input class="btn" type="submit" value="Submit" />
</form>
</div>
<div class="row text-center">
<form>
<h3>
Name
</h3>
<input class="form-control" type="text">
<input class="btn" type="submit" value="Submit">
</form>
</div>
Add margin: 0 auto; like #Sysix has said in the comments
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row text-center">
<form style="margin: 0 auto">
<div class="fg cg">
<h3>
Name
</h3>
<input class="fc"style="width: 35%" type="text"></input>
<div class="fa">
<input class="btn" type="submit" value="Submit"></input>
</div>
</div>
</form>
</div>
Use this in the style
margin-left:auto;margin-right:auto;
Will also center anything for future reference
Also someone has already asked this before here:
Centering a form in bootstrap not working
Well there are many ways of centering. But since you are using Bootstrap I thought I'd try it using Bootstrap classes.
I use the grid system to build a row with one big column spanning the entire row. I wrap the form in a div with a utility class d-flex and modify it with justify-content-center to center it.
Inside the form I use the form-row. Then use form-group to indicate a column inside the form-row. To fix formatting I put form-control on the input.
And finally I put the button on a seperate form-row. This solves your problem with only bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center">
<form>
<div class="form-row">
<div class="form-group">
<label for="name">Name</label>
<input id="name" class="form-control" type="text">
</div>
</div>
<div class="form-row">
<div>
<button class="btn" type="submit">Submit</btn>
</div>
</div>
</form>
</div>
</div>
</div>
I wonder what is best approach to obtain date from date to layot.
So it should be something like:
float center for below two lines
<label for date from><input datepicker> <label for date to><input datepicker>//line 1
<button>//line 2
I've build already(with blessing of bootstrap):
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="float-right">
<span>date from</span>
<input>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="float-left">
<span>date to</span>
<input>
</div>
</div>
</div>
and that almost fits my needs, beside that on mobiles floats destroy whole layout. I think that those float divs should have some how dynamic float depends on resolution or better solution to make on small resolution width 100% for both span and input to create moblie layout like:
label from
input
label to
input
If You already have this one. If you have any question regarding this. ask me in comment. If I have Make any mistake. Please comment below I will try my best to solve your problem. Good luck.
$(document).ready(function () {
$('.pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
.right{float:right !important;}
.col-sm-12{width:50% !important;}
#media only screen and (max-width:768px) {
.col-sm-12{width:100% !important;}
.right{float:none !important;}
input.pickyDate{width:100%;}
/*Usefull class*/
.topMar {
margin-top: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="right">
<span class="lable">date from</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
<div class="col-md-6 col-sm-12 topMar">
<span class="lable">date to</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
</div>
</body>
If I understand correctly, you shouldn't need to use floats at all. Bootstrap will automatically take care of the alignment of your <div>s. Just reverse the order of your two input fields; the first one will be on the left.
I found nice solution using botstrap css
<form class="form-inline text-center">
<div class="form-group">
<label for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
I am a beginner in bootstrap & i design this window (photo given below).
i used this code line to increase height.But i think it is not standard way to do so.
style=" height: calc(80vh);"
here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Department Information</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#584F39;" >
<div class="container">
<div class="panel-group">
<div class="panel panel-primary" style=" height: calc(80vh);">
<div class="panel-heading">
<h3 class="panel-title" style="text-align: center;">Information</h3>
</div>
<div class="panel-body">
<div class="container col-xs-12">
<form >
<div class="form-group">
<label>Code:</label>
<input type="text" class="form-control" id="dpcode" placeholder="Number Code">
</div>
<div class="form-group">
<label >Name:</label>
<input type="text" class="form-control" id="dpname" placeholder="Name">
</div>
<div class="form-group">
<label>Institute:</label>
<input type="text" class="form-control" id="ficode" placeholder="Number">
</div>
<div class="form-group">
<label>Faculty Name:</label>
<input type="text" class="form-control" id="fname" placeholder="Name Output">
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-info">Exit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can i maintain full height for all device screen.please give me some idea.please let me know for any further information.thanks:(
vhstands for "viewport height" - the percentage of the height of your browser window / your mobile device.
So, 100vh usually results in an element height that equals the window/device height.
Using the vh unit combined with calc() is the best solution to achieve a full height container.
i.e.: if you have this simple html structure:
<header> my header </header>
<div class="full_height"> my content </div>
<footer> my footer </footer>
you can use this css:
header { height: 200px; }
footer { height: 50px; }
.full_height { min-height: calc(100vh - 250px); }
Another solution is to use flexbox like well explained here:
Holy Grail Layout
I'd like to make a bootstrap form that looks good on web and mobile. It seems like the straightforward markup doesn't work well. It's an angular app, but I don't think angular figures in...
One problem is if I try to contain several fields by a div in order to apply a background color, the fields aren't contained, spilling off the left side of the div.
Another problem, related I think, is that the fields appear on mobile with 0px left and right margins, which doesn't look too good.
Here's the markup:
in index .html:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My BS App</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">My BS App</h3>
</div>
<div class="row">
<div class="col-md-6">
<div ng-view></div>
That angular view directive causes the form to be included as follows...
<form class="form-horizontal" name="parentForm" role="form" novalidate mb-submit="save()">
<fieldset>
<div ng-repeat="parent in family.parents()">
<legend>{{parent.firstName}} {{parent.lastName}}</legend>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
<input type="checkbox" ng-checked="parent.list" ng-model="parent.list">List parent</input>
</div>
</div>
</div>
</div>
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
And here's the bad result: see how fields spill off to the left?
On Web....
About what it looks like on mobile...
Try removing the <div class="row"> tags wrapped around your <div class="form-group"> tags. Both classes have negative left and right margins, which are being combined by the nested tags.
Example here.
Add a
<div class="col-md-12">
After your
<div class="row">
in the div containing the background-color:red;.
For example:
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
</div>
Compare your code with the correct code of bootstrap documentation
http://getbootstrap.com/css/#forms