Have a look at the below example in Mobile mode.
Sample
In Fieldset 3, why is there a slight padding on the left for all the labels and textboxes.
Like the below answer states, you have given col-md-6 class along with your form-group for Fieldset 3. Now since you do need the col-md-6 to separate the elements into 2 columns, you could target that specific fieldset and remove the padding.
HTML:
<form class="form-horizontal" id="fieldset3"> <!-- ID added -->
<fieldset>
<legend>Fieldset 3</legend>
CSS:
#fieldset3 .col-md-6{
padding-left:0px;
}
DEMO 1
To make it easier you can also group the labels this way:
<div class="col-md-6">
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
</div>
DEMO 2
Cause you nestind classes for columns. First you have div.col-md-6.form-group, and inside you have label.control-label.col-md-8, so it doubles the padding for col-*.
Related
I am trying to use bootstrap 4, I have a simple div contains a text box. I want the text box to take the div width. I thought in Bootstrap the input, by default, take the full width?
What is really bugging me is that the code ran correctly here in the snippet??
Here is the sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
The above code is exactly what I have. I am not sure this is the right way to do this?
I don't know if this can help, I am using this code inside a view (MVC project).
So the this is how it looks inside visual studio:
Layout:
<div class="container">
<div class="row">
<div class="col-md">
#RenderBody()
</div>
<div class="col-md d-none d-md-block">
<!------>
</div>
</div>
<footer>
<p>© #DateTime.Now.Year - My Project</p>
</footer>
</div>
And this is the view:
<input type="text" class="form-control" placeholder="Email address">
This is how it looks when I render the view (there are other CSS related to background color, etc.. that I didn't add here)
Columns have padding of 15px on both sides. To remove the padding you can...
Use p-0 for padding:0 on the column with input:
<div class="container">
<div class="row">
<div class="col-md p-0" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Or, you can use no-gutters to remove padding from all cols in the row. This will also remove the negative margins from the row which will effect alignment with the sides of the viewport on smaller screens...
<div class="container">
<div class="row no-gutters">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Demo: https://www.codeply.com/go/d4AOm39YD3
I'm using spring mvc with bootstrap 3.
I have some forms where I used the grid system of bootstrap, but it doesn't
work, or at least I don't think is it correct.
I'm using the spring tag library, so this is my code:
<form:create id="fc_cliente" modelAttribute="cliente" path="/cliente" render="${empty dependencies}" customtitle="false">
<div class="row">
<div class="col-xs-6 col-md-6">
<field:input id="c_cliente_email" field="email" mail="true"/>
</div>
<div class="col-xs-6 col-md-6">
<field:input id="c_cliente_emailFatturazione" field="emailFatturazione" mail="true"/>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<field:input id="c_cliente_telefono" field="telefono"/>
</div>
<div class="col-xs-6 col-md-6">
<field:input id="c_cliente_fax" field="fax" />
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<field:input id="c_cliente_codifica" field="codiceIdMacchine" />
</div>
<div class="col-xs-6 col-md-6">
<field:checkbox id="c_cliente_invioMail" field="invioMail" />
</div>
</div>
</form:form>
And the result is:
I think the fields must be more aligned no?
If yes, what am I wrong?
The form has the form-horizontal and for the label I added the control-label class.
You don't need to use .row or .col classes. Bootstrap has a special treatment for forms.
You need to wrap every input+label with a .form-group class, and add form-control to inputs, so it should look something like this:
<div class="form-group">
<field:input id="c_cliente_emailFatturazione" class="form-control" field="emailFatturazione" mail="true"/>
</div>
see here for more details
You could also use html/spring label tag.
References:
What is the advantage of form:label tag in Spring?
https://www.w3schools.com/tags/tag_label.asp
It will render label just above given field.
When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.
I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.
Of course I could just set a fixed margin, but is there a responsive way to do this?
.main {
margin-top: 20px;
}
#left-input {
width: 100px;
}
.vmiddle {
/* does nothing ? */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label>Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Since the second one is technically not a label, you can use Bootstrap's Static form control instead. It's designed to align with form-control and .btn elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<p class="form-control-static"><strong>Right Label</strong></p>
</div>
</div>
</div>
</div>
</div>
Add a margin utility class that's half the height of Bootstrap's padding.
<style>
.m-t-7 {
margin-top: 7.5px;
}
</style>
<div class="col-xs-6">
<div class="form-inline">
<div class="form-group">
<label class="m-t-7">Right Label: Higher</label>
</div>
</div>
</div>
Yup.
First, give the right label an id so you can select it individually.
<label id="right">Right Label: Higher</label>
then, in your css add:
#right{
padding-top:2px; /*Insert your own value for paddin*/
}
and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:
#media(max-width:300px){
#right{
padding-top:0;
}
}
Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.
Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label style="margin-bottom: 0;">Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
I have tried at least three proposed solutions from searching on this site, but nothing worked. I got close, but was getting cheated on the panel defeault backround color. For some reason, the background wasn't showing its full height behind my elements. I want to put a form next to the heading. Here is what I have tried.
<div class="panel panel-default">
<div class="panel-heading">
<div class="no-wrap">
<h3 class="panel-title">My Title</h3>
</div>
<div class="no-wrap">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
</div>
</div> <!-- end panel-heading -->
<div class="panel-body">
Body Text
</div>
</div> <!-- end panel -->
All the class you see are bootstrap EXCEPT no-wrap. My css for no-wrap is
.no-wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
So this was my most hopeful solution but it still doesn't work. The form sits below the h3.
I also tried using bootstrap columns inside the panel heading, but that's when the default gray background got obscured.
How can I get this form next to the h3 - all inside the panel heading?? Please note, you can assume that there is plenty of screen width. 99.9% of users will be using a laptop to access this page. The panel is being used to display business reports. Mobile responsiveness is not a priority.
Below is screenshot of what I do NOT want. I want the input form next to the heading.
Use display: flex;
Demo jsfiddle
You can try this one. You just need to include GRID OF BOOTSTRAP in your code such as col-xs-* , col-sm-* , col-md-* , col-lg-*. Don't need custom css in your case. You could ask me for further question as well.
<HTML>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-4 col-md-6 col-lg-6">
<h3 class="panel-title">My Title</h3>
</div>
<div class="col-xs-8 col-md-6 col-lg-6">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
</div>
</div>
</div>
<!-- end panel-heading -->
<div class="panel-body">
Body Text
</div>
</div>
<!-- end panel -->
</body>
</HTML>
I'm using form-group in Bootstrap 3. It is causing some horizontal alignment issues.
Here's an example of what I mean: http://jsfiddle.net/7723q8kr/. Notice columns 3 and 4 are lower than 1 and 2.
<div class="container-fluid">
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
</div>
When form-group is removed, as shown here http://jsfiddle.net/1kL4tfux/, the problem goes away.
Is there a way to use form-group within this context and not have it affect alignment?
Any col class divs in Bootstrap have a float applied. But the form-group is a block element, which by default will take up 100% width. It also has a margin-bottom property which will push the next divs down. This causes the form group items to stack (which is what it is intended to do).
You can wrap them in a form-inline element. But you lose a bit of your formatting, so you'd need to specify the width of the form-group. As the Bootstrap documentation says:
Requires custom widths
Inputs and selects have width: 100%; applied by
default in Bootstrap. Within inline forms, we reset that to width:
auto; so multiple controls can reside on the same line. Depending on
your layout, additional custom widths may be required.
So you could do something like this? http://jsfiddle.net/7723q8kr/1/