I want that the input fiels are in the same line. But I don't know what am I doing wrong. Can somebody help me? I am using Bootstrap 4.
This is how I wanted it:
enter image description here
html code
<body>
<div class="container h-100">
<div class="row">
<div class="col-12">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 offset-md-3">
<form class="form-group">
<div class="form-inline">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
</form>
</div>
<div class="col-md-6 offset-md-3">
<form class="form-group">
<div class="form-inline">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</form>
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
Add "form-row" or "row" in your code.
<form>
<div class="container">
<div class="form-row">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-row">
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
</form>
OR
<form>
<div class="container">
<div class="row">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="row">
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
</form>
Restructure you form.
- Use one tag for this form. Do Not use for every input a form tag.
- delete the div with class form-inline.
- Add class form-inline to div with class="col-md-6 offset-md-3".
<div class="container">
<form>
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</form>
</div>
Row or form-row doesn't really matter. Form-row changes the gutter. It's to your own preference.
Related
How to place lines between columns. This is the below code i am working on but still not working. is there any way we can add separator? i added the screen shot what i am expecting.
HTML Code:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
Expecting to place this code to show lines:
<div class="col-md-2 col-sm-4">
<div class="line">|</div>
<div>OR</div>
<div class="line">|</div>
</div>
I want output like this.
|
Name | Email
OR
Phone Button |
|
I'm not sure if this is what you're trying to do.
.v-line {
width: 5px;
background-color: teal;
}
.or {
background-color: #e9ecef;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="d-flex flex-row">
<div class="d-inline-block w-50">
<div class="col">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="v-line d-flex align-items-center justify-content-center">
<span class="or">OR</span>
</div>
<div class="d-inline-block w-50">
<div class="col">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</div>
</form>
</div>
You can shrink the fields by one col unit, so that both the left and right fields are col-md-5. This will give them a total column span of 10, leaving 2 spare (as Bootstrap columns always total 12).
From here, you can add offset-md-2 to the right-most columns to create a gap composed of 2 columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col-md-5">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
Note that you cannot (easily) make the gap comprise of only 1 unit while keeping both columns the same length (as the total column count is even). However, you can make use of any combination of column + offset + column that totals twelve. For example, col-md-5 + offset-md-1 + col-md-6.
I know there is a better way to do this but right now this is I can remember. Basically, just create an empty col div in between the two columns:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-5"`enter code here`>
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col-5">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
I'm having some trouble with a form the last element doesn't fit properly, this is my code:
<div class="tab-pane" id="2a">
<div *ngFor="let perso of person">
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Ingreso:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.fecha_ini}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Salida:</label>
<div class="col-sm-6">
<input type="text" name="condo" id="condo" value="{{perso.fecha_fin}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Foto:</label>
<div class="col-sm-6">
<!-- <input type="text" name="condo" value="{{perso.ruta_foto}}" class="form-control"> -->
<img src="http://52.14.193.170/imagenes/pers/2.jpg" alt="Odlir" width="130" height="130">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Penales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_penal}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
</div>
</div>
i don't know what i'm doing wrong, any ideas why this is happening? any help would be appreciated, im using bootstrap 3.3.7
It's still okay with
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va +PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
https://i.stack.imgur.com/zVa4B.png
I am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like
There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces.
I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.
This is the fiddle I have created to reproduce the problem.
.border {
border: 1px solid;
}
.input-field {
height: 20px
}
.custom-label {
line-height: 3.3em !important;
}
.label-size {
font-size: 10px;
line-height: 2.1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<form class="form-horizontal">
<div class="col-md-8">
<div class="form-group">
<label for="name" class="col-md-4 label-size">Name</label>
<div class="col-md-8">
<input type="text" id="name" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gender" class="col-md-4 label-size">Gender</label>
<div class="col-md-8">
<select id="gender" class="form-control input-sm input-field label-size">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="col-md-4 label-size custom-label">Functions</label>
<div class="checkbox col-md-8 label-size checkbox-primary" >
<label class="col-md-3">
<input type="checkbox" id="Func1"> Func1</label>
<label class="col-md-3">
<input type="checkbox" id="Func2">Func2</label>
<label class="col-md-3">
<input type="checkbox" id="Func2">Func3</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="country" class="col-md-4 label-size">country</label>
<div class="col-md-8">
<select id="country" class="form-control input-sm input-field label-size">
<option>Select</option>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="col-md-3">
<label class="label-size">Options</label>
</div>
<div class="col-md-9">
<div class="checkbox checkbox-primary label-size col-md-3">
<!-- there is a for loop here-->
<!-- For every run of loop, one div [with col-xs-4] below will be created. Since loop is not there, I am creating multiple divs manually -->
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="addr" class="col-md-4 label-size">ADDR</label>
<div class="col-md-8">
<input type="text" id="addr" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="authro" class="col-md-4 label-size">authro</label>
<div class="col-md-8">
<input type="text" id="authro" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="range" class="col-md-4 label-size">Range</label>
<div class="col-md-3">
<input type="text" id="range" class="form-control input-sm input-field">
</div>
<div class="col-md-2">
to
</div>
<div class="col-md-3">
<input type="text" id="range2" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="ip" class="col-md-4 label-size">IP</label>
<div class="col-md-8">
<input type="text" id="ip" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-xs-10 ">
<div class="form-group ">
<div class="col-xs-4">
<button class="btn btn-xs" type="button">Start</button>
</div>
<label class="col-xs-2 label-size">Order</label>
<div class="radio" class="col-xs-4 label-size">
<label>
<input type="radio" name="order3">order3</label>
<label>
<input type="radio" name="order4">order4</label>
</div>
</div>
</div>
</form>
</div>
Any help is much appreciated.
I made some format changes to your code see if this fix your need.
http://jsfiddle.net/ayang10/sbcobqz9/66/
.form-horizontal .control-label {
text-align: right;
margin-bottom: 0;
padding-top: 7px;
}
should fix your format/alignments
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I have researched this to the max and haven't been able to find ANY information. I started thinking, maybe it had to do with media queries, but I really couldn't get anything to work for me.
My question is, how can I make a wrap responsive? I utilize Twitter Bootstrap and am running into a unique issue.
I have a simple wrap that looks like this:
.wrap {
width: 800px;
margin: 0 auto;
}
Then, I have a form, that looks like this:
<div class="wrap">
<div class="col-sm-12">
<form class="form-inline" name="contactform">
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="first" required>First Name</label>
<input type="text" class="form-control-sty" name="first" placeholder="First Name">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="last" required>Last Name</label>
<input type="text" class="form-control-sty" name="last" placeholder="Last Name">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="phone" required>Phone</label>
<input type="text" class="form-control-sty" name="phone" placeholder="Phone">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="email" required>Email</label>
<input type="email" class="form-control-sty" name="mailfrom" placeholder="Email">
</div>
<div class="col-sm-12 form-sty">
<label class="sr-only" for="comment">Comment</label>
<textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea>
</div>
<div class="col-sm-12 form-sty form-sty-btn">
<button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
</div>
</form>
</div>
</div>
The issue I'm having is, since this sits inside of a wrap, when the site scales down the form fails to scale as well since it is filling the entirety of the 800px wrap.
I'm not looking for an answer as much as I'm looking for suggestions?
THanks for any help you can offer.
You can also view the actual website for a better idea, here: www.bestillcreative.com
.wrapper{
width:100%:
max-width:800px;
}
.wrap {
width:100%;
max-width:800px;
margin: 0 auto;
}
.form-sty{
margin:10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
<div class="col-sm-12">
<form class="form-inline" name="contactform">
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="first" required>First Name</label></div>
<div class="col-sm-3 col-md-2"> <input type="text" class="form-control-sty" name="first" placeholder="First Name"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="last" required>Last Name</label></div>
<div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="last" placeholder="Last Name"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="phone" required>Phone</label></div>
<div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="phone" placeholder="Phone"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"><label for="email" required>Email</label></div>
<div class="col-sm-3 col-md-2"><input type="email" class="form-control-sty" name="mailfrom" placeholder="Email"></div>
</div>
<div class="col-sm-6 form-sty">
<div class="col-sm-3 col-md-4"><label for="comment">Comment</label></div>
<div class="col-sm-9 col-md-8"><textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea></div>
</div>
<div class="col-sm-12 form-sty form-sty-btn">
<button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
</div>
</form>
</div>
</div>
Try this structure