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.
Related
In bootstrap I have used this
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-2">
Item 1
</div>
<div class="col-xs-12 col-md-4 col-lg-2">
Item 2
</div>
<div class="col-xs-12 col-md-4 col-lg-2">
Item 3
</div>
</div>
and thats it. I can create a very responsive 3 column row.
How about in WooCommerce WordPress? all I made is this.
<p class="form-row">
<div class="u-column2 col2-set">
<div class="u-column1 col-1">
</div>
</div>
<div class="u-column2 col2-set">
<div class="u-column1 col-1">
</div>
</div>
</p>
Is there any way to handle this kind of class? Can I make same as in bootstrap? If no what is the bootstrap equivalent in WooCommerce?
Your objective is to use Bootstrap CSS styling functions.
What I would recommend is copying the following lines of code : https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
to a new .css file,say you name it bootstrap-copy.css. And then finally, use wp_enqueue_style (
https://developer.wordpress.org/reference/functions/wp_enqueue_style/ ) to add bootstrap-copy.css and then use the bootstrap classes with ease.
I'm used to work with Bootstrap and for me the grid system is very clear in my head. Now, I'm trying to use the Angular Flex Layout and, even reading the documentation, I'm not understanding how exactly to use it.
For instance, I have the following code using Bootstrap 4:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
</div>
</div>
How could I write the same code using Angular Flex Layout??
In angular-flex-layout we don't have a grid so you would have to approach it this way to achieve same result as using bootstrap grid system:
<div fxLayout="row wrap"
fxLayout.sm="column" >
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:red">
first-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:blue">
second-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:yellow">
third-section
</div>
</div>
do mind that responsive break points could be different.
I have a gorgeous Bootstrap form that works great and is beautifully responsive for mobile. However, some form fields get too narrow when they're on a mobile screen.
For example, here's a few fields from the desktop version, which is awesome:
And here's the same part of that form, but in the mobile view:
As you can see, the fields get a little narrow. I'd much prefer the form to just wrap these fields onto their own lines at 100% width. Is there a way to do that in Bootstrap?
for mobile secreen use class col-xs-12 and for desktop use col-lg-12
for more info visit this site
http://getbootstrap.com/css/
The layout you are looking for is
<div class="row">
<div class="col-md-12 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
</div>
Fiddle
The Bootstrap framework has various classes to help with this. First of all make sure all of your form fields have the form-control class applied. This makes your controls go to 100% width of the container. Secondly use the col-* classes to specify the sizes at different resolutions. As this is Bootstrap, always think mobile first. For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<input id="country" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="city" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="state" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="zipcode" class="form-control" />
</div>
</div>
</div>
I understand that bootstrap .form-horizontal is the standard, and causes .form-group to behave like a row.
This means that <div class="row"> is not needed, but what is the downside to building my layout like this:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<!--Content-->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<!--Content-->
</div>
</div>
</div>
<div class="row">
<!--More Content-->
</div>
In this case (without a .form-xx modifier class as an ancestor), .form-group does nothing but add space at the bottom. From BS's CSS:
.form-group {
margin-bottom: 15px;
}
You can simply add that class to the row instead to achieve the same result, like:
<div class="row form-group">
<div class="col-md-6">
<!--Content-->
</div>
<div class="col-md-6">
<!--Content-->
</div>
</div>
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/