I have this form group in Bootstrap 4 fiddle:
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<label class="col-lg-2 col-form-label">
Correo electrónico
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<label class="col-lg-2 col-form-label">
Nombre
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<label class="col-lg-2 col-form-label">
Apellido
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<label class="col-lg-2 col-form-label">
Perfil
</label>
<div class="col-lg-3">
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
</div>
</div>
I want something like this:
but for some reason it dont responsive at my row group as you can see in fiddle:
Anyone knows what am I doing wrong with it? Regards
This will do the job. You need to place label in the same div as input.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-3">
<label>Correo electrónico</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="col-lg-3">
<label>Nombre</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="col-lg-3">
<label>Apellido</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="col-lg-3">
<label>Perfil</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
</div>
</div>
EDIT: you need to run the snippet in full screen to see the result. On smaller screen obviously you have everything in one column. It looks exactly as on your photo and this should be what you need.
Please take a look here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Correo electrónico
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Nombre
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Apellido
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
<div class="form-group col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label class="col-form-label">
Perfil
</label>
<input type="text" name="nombre" class="form-control m-input" [(ngModel)]="model.nombre" #nombre="ngModel" placeholder="Enter full name">
</div>
</div>
</div>
Related
My Form elements are not fitting in correctly and the alignment is
distorted.
.h-100 has been used since the blue back ground is my navigation and I want it to fill the entire height available in the screen.
I would prefer to accept an answer which can explain why my snippet does not work.
Plunker here
HTML
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.blue {
background-color:blue;
}
html,body {
height: 100%;
}
Screen shot
remove .h-100 class from .container and from .row as its height should be auto instead of 100% , answer is as per what i understand , that your card is going out of your .col right?
if you want to give blue shape than here is the code :
<div class="row">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
.blue{
min-height: 100px //the height you want to give
}
In the following code, I have an image that I do not want shown on small screens (at the bottom). When the viewport is shrunk, the input fields are a left justified. I'd like them to be in the center of the viewport when the screen is XS. I've tried changing the Bootstrap 4 flex settings, but have yet to find a solution. Is there a way to do this in Bootstrap or SASS?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}
You can use media queries to provide additional styles at specific breakpoints.
#media (max-width: 575px) {
.row.center-on-xs{ margin: 0 auto; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row center-on-xs justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}
I am making an app where there are lots of forms and i am fatigued at the thought of referring to the form reference for the tricky vertical aligned forms and horizontal aligned forms.
I want a final snippet that will be my point of reference when i want a vertical and a horizontal form.
For a vertical form(forms aligned vertically) i use this code
https://jsfiddle.net/bgebzwqd/11/
<form role="form">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</form>
For horizontal forms i have this
https://jsfiddle.net/0jwzxoe2/20/
<form role="form">
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">One</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Two</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Three</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Four</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<label class="control-label ">Five</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
In the first form(vertical forms), how can i control the width of the form bootstrap way(trying and avoiding custom css)
In the second, i want to have the button at the bottom and also have some spacing vertically. In the current example, there seem to be no space.
To solve the problem, i want to avoid using custom css and try solving this using what's available in bootstrap only.
Use Below Code
<form role="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="form-group">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="col-xs-12">
<div class="form-group col-md-4">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</div>
</form>
I ended up doing this for vertical forms
https://jsfiddle.net/codebreaker87/zqjva21d/
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<style>.width500{width:500px;margin-left:30px;}</style>
<form role="form">
<div class="row">
<div class="form-group width500">
<label for="name">First name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500 ">
<label for="address">Second name</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<label for="email">Email</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<label for="pwd">Password</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="form-group width500">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
For horizontal forms https://jsfiddle.net/codebreaker87/zqjva21d/21/
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<form role="form">
<div class="form-group">
<style>.mb{margin-bottom:20px;}.ml{margin-left:15px;}</style>
<div class="col-xs-3 mb">
<label class="control-label">One</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Two</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Three</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Four</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Five</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
<div class="col-xs-3 mb">
<label class="control-label ">Six</label>
<input type="name" class="form-control" id="fname" placeholder="Enter name">
</div>
</div>
<div class="row">
<div class="col-md-12 ml ">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
I am using the following code to make a simple formular with bootstrap:
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
But the result is:
So, why is the search button above the other input fields ? Is there a way to recenter it without touching the responsiveness ?
Thank you
see snippet below .
first, your input fields were exceding the width of the col . so set max-width:100% to them
second, .btn has inline-block style , use display:block instead
let me know if it works for you
input {
max-width:100%
}
.form-group .btn {
display:block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Add an empty label with on top of the button to align, like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"> </label>
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Your button should not be in a form group, and additionally that's not the usual way to markup an inline form (using cols). See this example where I use some of your fields for brevity:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<form class="form-inline">
<div class="form-group">
<label for="name" class="control-label">De</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<div class="form-group">
<label for="name" class="control-label">A</label>
<input type="email" value='' id="name" placeholder="Ime">
</div>
<button type="submit" class="btn btn-default">recherche</button>
</form>
Add an <br/> after label , like this
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-inline">
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">De</label><br />
<input type="email" value='' id="name1" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">A</label><br />
<input type="email" value='' id="name2" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Départ</label><br />
<input type="email" value='' id="name3" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label">Retour</label><br />
<input type="email" value='' id="name4" placeholder="Ime">
</div>
<div class="form-group col-xs-2 col-md-2">
<label for="name" class="control-label"></label><br />
<button type="submit" class="btn btn-default">recherche</button>
</div>
</form>
Okay. I'm trying to recreate this form in particular using as much default bootstrap styling as possible.
The problem I'm having is having the left and right sidelooking like this.
I'm using a Modal class for the dark background.
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="form-group col-lg-3">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div><br />
<div class="form-group>
<label for="form-elem-4"> Enquiry</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your enquiry" />
</div>
</form>
</div>
</div>
I don't need much help on the color and those smaller things. just on how to position the Enquiry to the right and making it looks as close to the example as possible.
There isn't any css yet that affects much of the code above. And I'm failry new to the fomr function. How would I have the form actually work too.
Is this what you need, now you have add some your styles for button, and background
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label class="col-md-3" for="comment">Comment:</label>
<div class="col-md-9">
<textarea class="form-control" rows="13" id="comment"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9098/
Try to re-build that form using responsive Table. Set the table with two columns and get the required design without change in CSS.