I want to center align a form with labels inside div.login__box
I use bootstrap 3.3.7
That's how I want it
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="login">логин</label>
<div class="col-sm-8">
<input type="login" class="form-control" id="login" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd" >пароль</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="pwd" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="btn" />
<div class="col-sm-4">
<input type="button" class="form-control login__btn-login" id="btn" value="войти в личный кабинет">
</div>
</div>
</form>
My current markup is here
codepen.io
Slight changes made to your html:
<head>
<meta charset="UTF-8">
<title>#</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="jumbotron vertical-center">
<div class="container">
<div class="row">
<div class="col-md-4 about__box">
<div class="about__inner">
<div class="about__content">
<div class="about__header">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="about__desc">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
</div>
</div>
<div class="col-md-8 login__box">
<div class="login__inner">
<div class="text-center login__header">
Authorization
</div>
<div class="container login__container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-2" for="login">log in</label>
<div class="col-sm-6">
<input type="login" class="form-control" id="login" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-2" for="pwd" >password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="pwd" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-2" for="btn" ></label>
<div class="col-sm-4">
<input type="button" class="form-control login__btn-login" id="btn" value="submit">
</div>
</div>
</form>
<div class="control-label col-sm-2"></div>
<div class="col-sm-8 login__desc">
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<img src="" class="pull-right img-responsive login__img_people">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
Add this to your css:
.form-horizontal .control-label{
margin-right:0;
}
Attaching codepen linksas well:
http://codepen.io/Sky-123/pen/WGOOqq?editors=1100
Hope this helps!!
add an margin-right:auto and margin-left:auto to .login__inner and you must set the width :
.login__inner{
width: 90%;
margin-left: auto;
margin-right: auto;
}
just add class col-lg-3-offset to the form
<form class="form-horizontal col-lg-3-offset col-lg-6">
<div class="form-group">
<label class="control-label col-sm-2" for="login">логин</label>
<div class="col-sm-8">
<input type="login" class="form-control" id="login" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd" >пароль</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="pwd" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="btn" />
<div class="col-sm-4">
<input type="button" class="form-control login__btn-login" id="btn" value="войти в личный кабинет">
</div>
</div>
</form>
Related
I use angular 9. my aim when i click in login button iit redirect me
to dashboard if login is success,otherwise it redirectme to login
page. when i enter my username and pasword and click on login button
it show an error If ngModel is used within a form tag, either the
name attribute must be set or the form control must be defined as
‘standalone’ in ngModelOptions
tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
at Function.push../node_modules/#angular/forms/fesm5/forms.js.TemplateDrivenErrors.missingNameException
(forms.js:4830)
at NgModel.push../node_modules/#angular/forms/fesm5/forms.js.NgModel._checkName
(forms.js:5158)
at NgModel.push../node_modules/#angular/forms/fesm5/forms.js.NgModel._checkForErrors
(forms.js:5143)
at NgModel.push../node_modules/#angular/forms/fesm5/forms.js.NgModel.ngOnChanges
(forms.js:5046)
at checkAndUpdateDirectiveInline (core.js:22777)
at checkAndUpdateNodeInline (core.js:31612)
at checkAndUpdateNode (core.js:31574) at debugCheckAndUpdateNode (core.js:32211)
at debugCheckDirectivesFn (core.js:32171)
at Object.eval [as updateDirectives] (LoginComponent.html:16) View_LoginComponent_0 # LoginComponent.html:15 LoginComponent.html:16
ERROR CONTEXT DebugContext_
loginc.component.html
Code
<div class="app-body">
<main class="main d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<form>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username" [(ngModel)]="username" autocomplete="username" required>
</div>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password"[(ngModel)]="password" autocomplete="current-password" required>
</div>
<div class="row">
<div class="col-6">
<button type="button" (click)=dologin class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
If you use [(ngModel)] like this you will need to set [ngModelOptions]="{standalone: true}"
<div class="app-body">
<main class="main d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<form>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username" [(ngModel)]="username" [ngModelOptions]="{standalone: true}" autocomplete="username" required>
</div>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password"[(ngModel)]="password" [ngModelOptions]="{standalone: true}" autocomplete="current-password" required>
</div>
<div class="row">
<div class="col-6">
<button type="button" (click)=dologin class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
More information here: https://angular.io/api/forms/NgModel
I think the "name" property is missing in the tags as rightly pointed out by #mike :
eg:
<input [(ngModel)]="person.firstName" name="first">
or needs to be defined as standalone in ngModelOptions
eg:
<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
Doing one of the above steps the error will be solved.
I have an issue with one of my Angular Pages.Below is the Landing Page of My App.
The issue that I am facing is whenever I am clicking Login button without entering any username/pwd, my div overflows as you can see in the image below:
What I've tried so far:
CSS Properties like:
overflow:hidden
max-width
min-width
resize:none
none of them seems to work. Below is the HTML for the same:
<div style=" background-color: rgba(227, 221, 233, 0.582);">
<div class="container-custom">
<div class="row">
<div class="col-md-7" >
<div class="card">
<div class="card-body" style="margin-bottom:1%">
<h3> What we do?</h3>
<hr>
<p style="text-align:justify">
Avaali is a consulting and professional services organization
focused<br>
on supporting upper mid to large enterprises to create and execute
their Digital roadmap.<br>
We are headquartered in Bengaluru, India. We believe that Digital is
going to be the biggest<br>
enabler of revenue to enterprises. We support our customers to
maximize value from digital<br>
and help them translate this value in the form of innovative
customer experience,<br>
highly engaging customers, internal process efficiencies, reduced
costs and delivering<br>
your organization’s stated objective Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad.
</p>
<hr>
<p>
Already registered?
Please login to the portal using your email address and password
<br>
</p>
</div>
</div>
</div>
<div class="col-md-5" style="position:relative">
<div class="card">
<div class="card-body">
<br>
<h4>Velocious Rapid - Sign In</h4>
<br>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group" style="margin-top:23px">
<input type="username" formControlName="username" id="username"
placeholder="Email Id" name="username"
class="form-control" [ngClass]="{ 'is-invalid': submitted &&
f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-
feedback">
<div *ngIf="f.username.errors.required">Username is
required</div>
</div>
</div>
<div class="form-group" style="margin-top: 35px">
<input type="password" formControlName="password" id="password"
placeholder="Password" name="password"
class="form-control" [ngClass]="{ 'is-invalid': submitted &&
f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-
feedback">
<div *ngIf="f.password.errors.required">Password is
required</div>
</div>
</div>
<button class="btn btn-primary" type="submit"
style="float:right;background-color: #0072aa">Login</button>
<div *ngIf="error" class="alert alert-danger"
style="width:70%">Username or Password is invalid</div>
</form>
<br>
<br>
<hr>
<p>New User ? Register Here</p>
<p> <a routerLink="/vendorOnboarding">Vendor Onboarding</a></p>
<p> Forgot Password?</p>
</div>
</div>
</div>
</div>
</div>
Request some expert advice. Thanks !
you need to set your error message position to absolute like below
.invalid-feedback {
position: absolute;
}
I am trying to use twitter-Bootstrap 4.1 to create a website. I have a jumbotron with a background image that takes 75% of the screen on the top. At the bottom, I have text blocks as demonstrated in the following code snippet https://www.codeply.com/go/NnUx8ZDmyz
However, I have the following problems with it. On my screen, the "Search" button is sticking out of the container/card (transparent/gray block). Also when you change the viewport to tablet/ phone size, it gets worst as the form overlaps the text below.
Here is a screenshot of how the form is not centered and the button is sticking out.
Here is a screenshot of how the search form is overlapping with the text below.
UPDATED
Here is a code snippet where the issues above are fixed. However, the search box is now shifted to the top of the jumbotron instead of the middle.
https://www.codeply.com/go/LjMrId9guW
The search button is sticking out because it's bigger than it's container the col-lg-1.
To resolve the overlapping on mobile/tablet screen you'll have to override or remove the h-75 class from: jumbotron jumbotron-fluid intro-jumbotron h-75 clearfix.
I've cleaned up your HTML code a bit:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MySite</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="/Identity/Account/Register">Register</a></li>
<li class="nav-item"><a class="nav-link" href="/Identity/Account/Login">Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid intro-jumbotron clearfix" id="images_show_case">
<div class="container h-100 d-flex">
<div class="my-auto w-100">
<div class="card card-intro-search">
<div class="card-body text-center">
<h3 class="text-uppercase">discover real estate in</h3>
<h1 class="text-uppercase font-weight-bold">My City</h1>
<form method="get" action="/Listing/Search">
<div class="row mx-0">
<div class="col-lg-3 px-0">
<select class="form-control form-control-lg" data-val="true" data-val-required="The Value field is required." id="Search_Type_Value" name="Search.Type.Value"><option value="">Select an option</option>
<option value="CommercialLease">Commercial Lease</option>
<option value="Commerical">Commerical</option>
<option value="LotsAndLand">Lots and Land</option>
<option value="Rental">Rental</option>
<option selected="selected" value="Residential">Residential</option>
<option value="ResidentialIncome">Residential Income</option>
</select>
<label class="control-label search-label" for="Search_Type">Property Type</label>
</div>
<div class="col-lg-3 px-0">
<div class="row mx-0">
<div class="col-lg-6 px-0">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Min Price must be a number." data-val-range="The field Min Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Min Price field is required." id="Search_MinPrice" name="Search.MinPrice" value="200000" />
<label class="control-label search-label" for="Search_MinPrice">Min Price</label>
</div>
<div class="col-lg-6 px-0">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Max Price must be a number." data-val-range="The field Max Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Max Price field is required." id="Search_MaxPrice" name="Search.MaxPrice" value="500000" />
<label class="control-label search-label" for="Search_MaxPrice">Max Price</label>
</div>
</div>
</div>
<div class="col-lg-1 pl-0 pr-0">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Beds must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBedrooms" name="Search.MinBedrooms" value="3" />
<label class="control-label search-label" for="Search_MinBedrooms">Min Beds</label>
</div>
<div class="col-lg-1 pl-0 pr-0">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Baths must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBathrooms" name="Search.MinBathrooms" value="2" />
<label class="control-label search-label" for="Search_MinBathrooms">Min Baths</label>
</div>
<div class="col-lg-2 pl-0 pr-0">
<select class="form-control form-control-lg" id="Search_City_Id" name="Search.City.Id"><option value="">Any City</option>
<option value="6">A</option>
<option value="7">B</option>
<option value="8">C</option>
<option value="3">D</option>
<option value="1">E</option>
<option value="2">F</option>
</select>
<label class="control-label search-label" for="Search_City">City</label>
</div>
<div class="col-lg-2 px-0 text-left ">
<button type="submit" value="Search" class="btn btn-primary btn-lg w-100">
<span class="fas fa-filter"></span> Search
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid body-content">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
I moved the min and max price into a col-3. Now the search button wrapper can have a col-2 class.
The solution for the update:
Add to the jumbotron d-flex, remove d-flex from its child and add align-self-center.
<div class="jumbotron jumbotron-fluid intro-jumbotron mh-75 clearfix d-flex" id="images_show_case">
<div class="container h-100 align-self-center">
Tip: istead of pl-0 pr-0 you an use: px-0 (padding on x axis = 0)
You should use min-height:75% instead
.mh-75 {
min-height: 75%;
}
Instead of using pr-0 pl-0 just use no-gutters on the row...
<div class="jumbotron jumbotron-fluid intro-jumbotron mh-75 clearfix" id="images_show_case">
<div class="container h-100 d-flex">
<div class="my-auto">
<div class="card card-intro-search">
<div class="card-body text-center">
<h3 class="text-uppercase">discover real estate in</h3>
<h1 class="text-uppercase font-weight-bold">My City</h1>
<form method="get" action="/Listing/Search">
<div class="row no-gutters">
<div class="col-lg-3">
<select class="form-control form-control-lg" data-val="true" data-val-required="The Value field is required." id="Search_Type_Value" name="Search.Type.Value">
<option value="">Select an option</option>
<option value="CommercialLease">Commercial Lease</option>
<option value="Commerical">Commerical</option>
<option value="LotsAndLand">Lots and Land</option>
<option value="Rental">Rental</option>
<option selected="selected" value="Residential">Residential</option>
<option value="ResidentialIncome">Residential Income</option>
</select>
<label class="control-label search-label" for="Search_Type">Property Type</label>
</div>
<div class="col-lg-2">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Min Price must be a number." data-val-range="The field Min Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Min Price field is required."
id="Search_MinPrice" name="Search.MinPrice" value="200000">
<label class="control-label search-label" for="Search_MinPrice">Min Price</label>
</div>
<div class="col-lg-2">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Max Price must be a number." data-val-range="The field Max Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Max Price field is required."
id="Search_MaxPrice" name="Search.MaxPrice" value="500000">
<label class="control-label search-label" for="Search_MaxPrice">Max Price</label>
</div>
<div class="col-lg-1">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Beds must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBedrooms" name="Search.MinBedrooms" value="3">
<label class="control-label search-label" for="Search_MinBedrooms">Min Beds</label>
</div>
<div class="col-lg-1">
<input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Baths must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBathrooms" name="Search.MinBathrooms" value="2">
<label class="control-label search-label" for="Search_MinBathrooms">Min Baths</label>
</div>
<div class="col-lg-2">
<select class="form-control form-control-lg" id="Search_City_Id" name="Search.City.Id">
<option value="">Any City</option>
<option value="6">A</option>
<option value="7">B</option>
<option value="8">C</option>
<option value="3">D</option>
<option value="1">E</option>
<option value="2">F</option>
</select>
<label class="control-label search-label" for="Search_City">City</label>
</div>
<div class="col-lg-1 text-left">
<button type="submit" value="Search" class="btn btn-primary btn-lg">
<span class="fas fa-filter"></span> Search
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/avwMFtM5Cd
so basically i have 2 columns, one with some inputs and one with only a textarea. The problem is that i want the textarea which is in the 2nd column, to fill the remaining height of the first one but i can't get this working. I tried giving textarea an height of 100%.
Here is a pen with an example:
https://codepen.io/anon/pen/BqQMvG
<section class="contact-us">
<div class="container" style="background-color: #D6EEFD">
<div class="p-3">
<h1 class="primary-brand">
Title
</h1>
<p class="primary-brand">
Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
</p>
<form>
<div class="container">
<div class="row">
<div class="col">
<div class="form-group">
<label for="name-input">Name</label>
<input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
</div>
<div class="form-group">
<label for="email-input">E-mail</label>
<input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="phone-input">Phone number</label>
<input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
</div>
</div>
<div class="col">
<div>
<label for="description-input">How can we help you?</label>
<textarea class="form-control form-control-lg" id="description-input"></textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</section>
What am i missing?
Just use the Bootstrap h-100 class. Remember height:100% only works if the parent has a defined height. Therefore use h-100 on both the inner div and textarea.
https://codepen.io/anon/pen/ePBXKR
<section class="contact-us">
<div class="container" style="background-color: #D6EEFD">
<div class="p-3">
<h1 class="primary-brand">
Title
</h1>
<p class="primary-brand">
Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
</p>
<form>
<div class="container">
<div class="row">
<div class="col">
<div class="form-group">
<label for="name-input">Name</label>
<input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
</div>
<div class="form-group">
<label for="email-input">E-mail</label>
<input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="phone-input">Phone number</label>
<input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
</div>
</div>
<div class="col">
<div class="h-100">
<label for="description-input">How can we help you?</label>
<textarea class="form-control form-control-lg h-100" id="description-input"></textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</section>
The columns (col) will be the same height since Bootstrap 4 uses flexbox.
EDIT: I solved my problem. Explanation at the bottom.
Sorry for my english but it is hard to explain :/
When basic column take "md-4" size and is too small, then input child should break line and become 100% width. But if basic column will change class to "sm-6" then become bigger and the input child should return inline.
How to resolve that problem?
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12" style="background-color: #fbb3b3">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 col-xs-2 control-label">Email</label>
<div class="col-sm-10 col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="This input should break line, when is too small">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="But if is enough space it should stay inline">
</div>
</div>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12" style="background-color: #76ddf3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="col-md-4 col-sm-12 col-xs-12" style="background-color: #fcfa96">
Try to resize window and you will see what am I talking about.
</div>
</div>
</div>
</body>
EDIT: Solition - I used javascript function, which detects the change of the width of the form and adds class col-xs to the elements or take it. So easy... Effect at the picture:
hi can you try this one
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-6 col-xs-10 col-xs-offset-1">
<div id="form1" class="panel-body">
<form role="form"">
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-tag" ></i></span>
<input class="form-control" type="text" placeholder="Email" />
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-lock" ></i></span>
<input class="form-control" type="password" />
</div>
<button type="submit" class="btn btn-success" style="width: 30%;">Login</button>
<hr>
Forgot Password?
</form>
</div>
</div>
take a look at this: http://codepen.io/imcodingideas/pen/QdGwMp?editors=1000 but you can see what I tried here:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #fbb3b3">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
</form>
</div>
<div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #76ddf3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, inventore facere eius, corporis dicta reiciendis consequatur, consequuntur rem perferendis obcaecati maiores odit commodi officiis ratione accusamus necessitatibus.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #fcfa96">
<p>Try to resize window and you will see what am I talking about.</p>
</div>
</div>
</div>
Is this what you're trying to do? Remember that p tags are block level elements.