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.
Related
Hello I am new to programming Iam creating a complaint page using bootstrap, css , JavaScript.
when added this css:
.needs-validation fieldset:not(:first-of-type) {display: none;} it not showing the next page content.
I need when the user choose the from option show the the next page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title> Communication Portal</title>
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<style type="text/css">
.needs-validation fieldset:not(:first-of-type) {
display: none;
}
</style>
<!-- FONT -->
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container d-flex align-items-center min-vh-100"><!-- CONTAINER Starts-->
<div class="row g-0 justify-content-center"><!--- row g-0 justify-content-center Starts-->
<div class="col-lg-4 offset-lg-1 mx-0 px-0"><!-- TITLE Starts -->
<div id="title-container"><!-- title-container Starts-->
<img class="covid-image" src="images/covid-check.png">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati molestiae voluptate atque, saepe maxime dolore cumque quidem veniam accusamus nulla commodi aut corporis, totam est molestias sed ea facere. Et?</p>
</div><!-- title-container Ends-->
</div><!-- TITLE Ends -->
<div class="col-lg-7 mx-0 px-0"><!-- FORMS Starts -->
<div class="progress"><!--progress Starts-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
</div>
<div id="qbox-container">
<form class="needs-validation" id="form-wrapper" method="post" action="action.php" name="form-wrapper" novalidate>
<div id="steps-container">
<fieldset>
<div class="step">
<h4>Please Choose Lanuguage | رجاء اختيار اللغة </h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_1_yes" name="q_1" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_1_yes">Englsih</label>
</div>
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_1_no" name="q_1" type="radio" value="No">
<label class="form-check-label question__label" for="q_1_no">Arabic</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step">
<h4>Do You want to mention Your Name</h4>
<div class="form-check ps-0 q-box">
<div class="row">
<div class="col">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_2_yes" name="q_2" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_2_yes">Yes</label>
</div>
</div>
<div class="col">
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_2_no" name="q_2" type="radio" value="No">
<label class="form-check-label question__label" for="q_2_no">No</label>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step">
<h4>Please Write Your Name and Employee #</h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<div class="row">
<div class="col">
<label for="inputEmail4">Employee Name</label>
<input type="name" class="form-control" placeholder="Employee Name">
</div>
<div class="col">
<label for="inputPassword4"> Employee Number # </label>
<input type="text" class="form-control" placeholder="Employee Number #">
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step">
<h4>Please Select one of the folowing options</h4>
<div class="row">
<div class="col-lg-12">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_right" name="q_4" type="radio" value="uk">
<label class="form-check-label question__label" for="q_4_right">
Doing the right thing ! <br>
<p class="lead">Reaporting someting you see wrong</p>
</label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_ideas" name="q_4" type="radio" value="j">
<label class="form-check-label question__label" for="q_4_ideas">Share your Ideas <br>
<p class="lead">Let us know if you have a great suggestion</p></label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_4_views" name="q_4" type="radio" value="us">
<label class="form-check-label question__label" for="q_4_views">Air your Views <br>
<p class="lead"> Tell us what's frusting you in the work place</p></label>
</div>
</div>
</div>
</div>
</div>
<div class="step">
<h4>Donig the right thing</h4>
<p>Reporting someting you see wrong
if you see or suspect someone or something being done wrong that is having a negative impact or harming the association please share your concern</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Comments</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step">
<h4>Share your Ideas</h4>
<p>Did you know some of our best ideas have come from our colleagues? if you thing you have a great idea that can help the assocation to perform better , we would love to hear from you</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">your Ideas!</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step">
<h4>Air your views</h4>
<p>We all work hard and deserve tp be treated well, we have some very good, robst employment and operational policies and procedures to support and protect you,but if there is something that we have done wrong or is frustrating you we would like to hear from you about this , so we can look to the issue and rectify,where possible</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Your Views</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="step">
<h4>Incident Reported on:</h4>
<div class="row">
<div class="col">
<label class="form-label">REPORTED PERSON</label>
<input type="text" class="form-control" placeholder="Reported Person">
</div>
<div class="col">
<label class="form-label">REPORTED EMPLOYEE #</label>
<input type="text" class="form-control" placeholder="Reported Employee #">
</div>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT TYPE </label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident Type</option>
<option value="1">THEFT</option>
<option value="2">NON COMPLIANCE WITH COMPANY POLICY</option>
<option value="3">FRAUD</option>
<option value="3">ABUSING POWER</option>
<option value="3">USING COMPANY PROPERTY FOR PERSONAL INTEREST</option>
<option value="3">NEGLIGENCE</option>
</select>
</div>
<div class="mt-2">
<label for="exampleFormControlTextarea1">INCIDENT DETAILS </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT CITY</label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident City</option>
<option value="1">Beirut</option>
<option value="2">Bekaa</option>
</select>
</div>
<div class="mt-2">
<div class="row">
<div class="col">
<label for="formFileMultiple" class="form-label">UPLOAD ATTACHEMENT </label>
<input class="form-control" type="file" id="formFileMultiple" multiple />
</div>
<div class="col">
<label for="" class="form-label">INCIDENT DATE</label>
</div>
</div>
<div class="mt-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">I confirm that, all above provided information is correct.</label>
</div>
</div>
</div>
</div>
<div class="step">
<div class="mt-1">
<div class="closing-text">
<h4>Thank you</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut omnis explicabo doloribus at iste magni maiores impedit, nam eum reprehenderit facere aliquid ipsa labore sed? Dolorem eveniet recusandae molestiae at.</p>
<p>Click on the submit button to continue.</p>
</div>
</div>
</div>
<div id="success">
<div class="mt-5">
<h4>Success! We'll get back to you ASAP!</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur deleniti eius ab totam quaerat illo perferendis, eum veritatis rerum tempore impedit. Saepe dolores eligendi eum culpa beatae, id doloribus ipsum.</p>
<a class="back-link" href="">Go back from the beginning ➜</a>
</div>
</div>
</div>
<div id="q-box__buttons">
<button id="prev-btn" type="button">Previous</button>
<button id="next-btn" type="button">Next</button>
<button id="submit-btn" type="submit">Submit</button>
</div>
</form>
</div><!--progress Starts-->
</div><!-- FORMS Ends -->
</div><!--- row g-0 justify-content-center Ends-->
</div><!-- CONTAINER ends -->
<div id="preloader-wrapper"><!-- preloader-wrapper Starts-->
<div id="preloader"></div>
<div class="preloader-section section-left"></div>
<div class="preloader-section section-right"></div>
</div><!-- preloader-wrapper Starts-->
<script src="js/script.js"></script>
</body>
</html>
javascipt
let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let succcessDiv = document.getElementById('success');
form.onsubmit = () => {
return false
}
let current_step = 0;
let stepCount = 8
step[current_step].classList.add('d-block');
if (current_step == 0) {
prevBtn.classList.add('d-none');
submitBtn.classList.add('d-none');
nextBtn.classList.add('d-inline-block');
}
const progress = (value) => {
document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;
}
nextBtn.addEventListener('click', () => {
current_step++;
let previous_step = current_step - 1;
if ((current_step > 0) && (current_step <= stepCount)) {
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block');
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step == stepCount) {
submitBtn.classList.remove('d-none');
submitBtn.classList.add('d-inline-block');
nextBtn.classList.remove('d-inline-block');
nextBtn.classList.add('d-none');
}
} else {
if (current_step > stepCount) {
form.onsubmit = () => {
return true
}
}
}
progress((100 / stepCount) * current_step);
});
prevBtn.addEventListener('click', () => {
if (current_step > 0) {
current_step--;
let previous_step = current_step + 1;
prevBtn.classList.add('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block')
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step < stepCount) {
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
nextBtn.classList.remove('d-none');
nextBtn.classList.add('d-inline-block');
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
}
}
if (current_step == 0) {
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
}
progress((100 / stepCount) * current_step);
});
submitBtn.addEventListener('click', () => {
preloader.classList.add('d-block');
const timer = ms => new Promise(res => setTimeout(res, ms));
timer(5)
.then(() => {
bodyElement.classList.add('loaded');
}).then(() => {
step[stepCount].classList.remove('d-block');
step[stepCount].classList.add('d-none');
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
succcessDiv.classList.remove('d-none');
succcessDiv.classList.add('d-block');
})
});
I tried to create the page with out .needs-validation fieldset:not(:first-of-type) {display: none;} but did not work. as I said before I am new
You did everything right in the JS, but this part: needs-validation fieldset:not(:first-of-type) {display: none;} was making everything "invisible".
The changes I've made were:
Remove the above mentioned css;
Add d-none to every-step, except the first one.
let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let succcessDiv = document.getElementById('success');
form.onsubmit = () => {
return false
}
let current_step = 0;
let stepCount = 8
step[current_step].classList.add('d-block');
if (current_step == 0) {
prevBtn.classList.add('d-none');
submitBtn.classList.add('d-none');
nextBtn.classList.add('d-inline-block');
}
const progress = (value) => {
document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;
}
nextBtn.addEventListener('click', () => {
current_step++;
let previous_step = current_step - 1;
if ((current_step > 0) && (current_step <= stepCount)) {
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block');
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step == stepCount) {
submitBtn.classList.remove('d-none');
submitBtn.classList.add('d-inline-block');
nextBtn.classList.remove('d-inline-block');
nextBtn.classList.add('d-none');
}
} else {
if (current_step > stepCount) {
form.onsubmit = () => {
return true
}
}
}
progress((100 / stepCount) * current_step);
});
prevBtn.addEventListener('click', () => {
if (current_step > 0) {
current_step--;
let previous_step = current_step + 1;
prevBtn.classList.add('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block')
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step < stepCount) {
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
nextBtn.classList.remove('d-none');
nextBtn.classList.add('d-inline-block');
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
}
}
if (current_step == 0) {
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
}
progress((100 / stepCount) * current_step);
});
submitBtn.addEventListener('click', () => {
preloader.classList.add('d-block');
const timer = ms => new Promise(res => setTimeout(res, ms));
timer(5)
.then(() => {
bodyElement.classList.add('loaded');
}).then(() => {
step[stepCount].classList.remove('d-block');
step[stepCount].classList.add('d-none');
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
succcessDiv.classList.remove('d-none');
succcessDiv.classList.add('d-block');
})
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- FONT -->
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container d-flex align-items-center min-vh-100">
<!-- CONTAINER Starts-->
<div class="row g-0 justify-content-center">
<!--- row g-0 justify-content-center Starts-->
<div class="col-lg-4 offset-lg-1 mx-0 px-0">
<!-- TITLE Starts -->
<div id="title-container">
<!-- title-container Starts-->
<img class="covid-image" src="images/covid-check.png">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati molestiae voluptate atque, saepe maxime dolore cumque quidem veniam accusamus nulla commodi aut corporis, totam est molestias sed ea facere. Et?</p>
</div><!-- title-container Ends-->
</div><!-- TITLE Ends -->
<div class="col-lg-7 mx-0 px-0">
<!-- FORMS Starts -->
<div class="progress">
<!--progress Starts-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
</div>
<div id="qbox-container">
<form class="needs-validation" id="form-wrapper" method="post" action="action.php" name="form-wrapper" novalidate>
<div id="steps-container">
<fieldset>
<div class="step">
<h4>Please Choose Lanuguage | رجاء اختيار اللغة </h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_1_yes" name="q_1" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_1_yes">Englsih</label>
</div>
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_1_no" name="q_1" type="radio" value="No">
<label class="form-check-label question__label" for="q_1_no">Arabic</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step d-none">
<h4>Do You want to mention Your Name</h4>
<div class="form-check ps-0 q-box">
<div class="row">
<div class="col">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_2_yes" name="q_2" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_2_yes">Yes</label>
</div>
</div>
<div class="col">
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_2_no" name="q_2" type="radio" value="No">
<label class="form-check-label question__label" for="q_2_no">No</label>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step d-none">
<h4>Please Write Your Name and Employee #</h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<div class="row">
<div class="col">
<label for="inputEmail4">Employee Name</label>
<input type="name" class="form-control" placeholder="Employee Name">
</div>
<div class="col">
<label for="inputPassword4"> Employee Number # </label>
<input type="text" class="form-control" placeholder="Employee Number #">
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step d-none">
<h4>Please Select one of the folowing options</h4>
<div class="row">
<div class="col-lg-12">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_right" name="q_4" type="radio" value="uk">
<label class="form-check-label question__label" for="q_4_right">
Doing the right thing ! <br>
<p class="lead">Reaporting someting you see wrong</p>
</label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_ideas" name="q_4" type="radio" value="j">
<label class="form-check-label question__label" for="q_4_ideas">Share your Ideas <br>
<p class="lead">Let us know if you have a great suggestion</p>
</label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_4_views" name="q_4" type="radio" value="us">
<label class="form-check-label question__label" for="q_4_views">Air your Views <br>
<p class="lead"> Tell us what's frusting you in the work place</p>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="step d-none">
<h4>Donig the right thing</h4>
<p>Reporting someting you see wrong
if you see or suspect someone or something being done wrong that is having a negative impact or harming the association please share your concern</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Comments</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step d-none">
<h4>Share your Ideas</h4>
<p>Did you know some of our best ideas have come from our colleagues? if you thing you have a great idea that can help the assocation to perform better , we would love to hear from you</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">your Ideas!</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step d-none">
<h4>Air your views</h4>
<p>We all work hard and deserve tp be treated well, we have some very good, robst employment and operational policies and procedures to support and protect you,but if there is something that we have done wrong or is frustrating you we would like to hear from you about this , so we can look to the issue and rectify,where possible</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Your Views</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="step d-none">
<h4>Incident Reported on:</h4>
<div class="row">
<div class="col">
<label class="form-label">REPORTED PERSON</label>
<input type="text" class="form-control" placeholder="Reported Person">
</div>
<div class="col">
<label class="form-label">REPORTED EMPLOYEE #</label>
<input type="text" class="form-control" placeholder="Reported Employee #">
</div>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT TYPE </label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident Type</option>
<option value="1">THEFT</option>
<option value="2">NON COMPLIANCE WITH COMPANY POLICY</option>
<option value="3">FRAUD</option>
<option value="3">ABUSING POWER</option>
<option value="3">USING COMPANY PROPERTY FOR PERSONAL INTEREST</option>
<option value="3">NEGLIGENCE</option>
</select>
</div>
<div class="mt-2">
<label for="exampleFormControlTextarea1">INCIDENT DETAILS </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT CITY</label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident City</option>
<option value="1">Beirut</option>
<option value="2">Bekaa</option>
</select>
</div>
<div class="mt-2">
<div class="row">
<div class="col">
<label for="formFileMultiple" class="form-label">UPLOAD ATTACHEMENT </label>
<input class="form-control" type="file" id="formFileMultiple" multiple />
</div>
<div class="col">
<label for="" class="form-label">INCIDENT DATE</label>
</div>
</div>
<div class="mt-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">I confirm that, all above provided information is correct.</label>
</div>
</div>
</div>
</div>
<div class="step d-none">
<div class="mt-1">
<div class="closing-text">
<h4>Thank you</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut omnis explicabo doloribus at iste magni maiores impedit, nam eum reprehenderit facere aliquid ipsa labore sed? Dolorem eveniet recusandae molestiae at.</p>
<p>Click on the submit button to continue.</p>
</div>
</div>
</div>
<div id="success">
<div class="mt-5">
<h4>Success! We'll get back to you ASAP!</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur deleniti eius ab totam quaerat illo perferendis, eum veritatis rerum tempore impedit. Saepe dolores eligendi eum culpa beatae, id doloribus ipsum.</p>
<a class="back-link" href="">Go back from the beginning ➜</a>
</div>
</div>
</div>
<div id="q-box__buttons">
<button id="prev-btn" type="button">Previous</button>
<button id="next-btn" type="button">Next</button>
<button id="submit-btn" type="submit">Submit</button>
</div>
</form>
</div>
<!--progress Starts-->
</div><!-- FORMS Ends -->
</div>
<!--- row g-0 justify-content-center Ends-->
</div><!-- CONTAINER ends -->
<div id="preloader-wrapper">
<!-- preloader-wrapper Starts-->
<div id="preloader"></div>
<div class="preloader-section section-left"></div>
<div class="preloader-section section-right"></div>
</div><!-- preloader-wrapper Starts-->
<script src="js/script.js"></script>
</body>
</html>
I am attempting to have a display for multiple images with descriptions using a button cycling system. However, when I wrap the cycler in a container with a fixed width, the buttons overflow the container rather than fitting within it. How can I force it to scale down inside it instead?
<div class="container w-50">
<div class="row">
<div class="col-12 col-lg-6">
<div class="img-fluid" style="width: 100%" id="cycler">
<img class="w-100" src="https://via.placeholder.com/500x800" alt="Volunteer Profile Page" />
</div>
</div>
<div class="col-12 col-lg-6 bg-light p-0 mr-5" style="border-radius: 0.25rem;">
<div class="row">
<div class="col-12">
<div class="btn-group w-100" role="group">
<input type="radio" class="btn-check" checked>
<label class="btn btn-secondary m-0 selected">Photograph 1</label>
<input type="radio" class="btn-check">
<label class="btn btn-secondary m-0">Photograph 2</label>
<input type="radio" class="btn-check">
<label class="btn btn-secondary m-0">Photograph 3</label>
<input type="radio" class="btn-check">
<label class="btn btn-secondary m-0">Photograph 4</label>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="p-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempore laborum maxime sequi molestiae saepe soluta, quaerat dolorum ipsam incidunt aut amet nemo quis omnis veniam expedita voluptatum, laudantium in?</p>
</div>
</div>
</div>
</div>
</div>
</div>
The word "Photograph" is the problem in "Photograph 1", etc. The box always needs to be big enough to fit that text in, so it can't resize down enough. As it's just placeholder text, you can simply change it to "P1", "P2", etc and this will solve the problem.
If you need that text, I would go with "Photo 1" and slightly decrease the font-size. This would also solve it.
IMO, the simplest way is to use text-truncate...
<div class="btn-group w-100 text-truncate" role="group">
<input type="radio" class="btn-check" checked>
<label class="btn btn-secondary m-0 selected text-truncate">Photograph 1</label>
<input type="radio" class="btn-check">
<label class="btn btn-secondary m-0 text-truncate">Photograph 2</label>
<input type="radio" class="btn-check">
<label class="btn btn-secondary m-0 text-truncate">Photograph 3</label>
<input type="radio" class="btn-check">
<label class="btn btn-secondary m-0 text-truncate">Photograph 4</label>
</div>
https://codeply.com/p/OA12kyBkGJ
I'm fairly new to bootstrap and I'm kind of struggling with some of the layout settings. I want to create a centered form with a form of tooltip/box to the right that it's inline with the top of the form box. Below is my current form and I'll attach a photo of what I'm trying to achieve. I've been trying for quite a while but the closest I've come is having it centered in the middle of the page or below the existing form.
What I am trying to achieve: (The orange box)
Current html:
<html lang="en">
<head>
<title>Stackoverflow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col-1 col-md-2 col-lg-3"></div>
<div class="col-10 col-md-8 col-lg-6 my-3 border">
<!-- Form -->
<form class="border" action="" method="post" class="my-3">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
</div>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be your username
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName"></label>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">I accept the</label>
<span>
Terms and Conditions
</span>
</div>
<button type="submit" class="btn btn-primary btn-block">Signup</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
<div class="col-1 col-md-2 col-lg-3></div>
</div>
</div>
</body>
Thanks in advance!
I ended up working through my own solution. To solve my problem I made adjustments to the container holding both the form as well as this new box. As can be seen below.
Solution:
<body>
<div class="container h-100 mt-5">
<div class="row h-100 justify-content-center">
<div class="col-10 col-md-8 col-lg-6 ">
<!-- Form -->
<form class="" action="" method="post">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
<small id="accountNumberHelpBlock" class="form-text text-muted">Check your Welcome Pack or call
us 1800 000 000 for help
</small>
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be
your
username</div>
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name:</label>
<input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName">
<small id="firstNameHelpBlock" class="form-text text-muted">This is the name that is shown on
your Welcome Pack
</small>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<label class="sr-only" for="password2">Confirm Password:</label>
<input type="password" class="form-control password" id="password2"
placeholder="Confirm your password..." name="password">
</div>
<div class="form-group">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
I accept the
</label>
<span>
Terms and Conditions
</span>
<button type="submit" class="btn btn-primary float-right">Register for access</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
</div>
<div class="border col-lg-3 box">
<div class="help1 border-bottom">
<h4><span class="icon oi oi-question-mark"></span>Need some help?</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi totam vel, cum reiciendis tenetur
quia ullam soluta. Praesentium minus explicabo ducimus mollitia dolorum, ipsam tenetur, et
voluptatum quae, nostrum atque!
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, rem. Incidunt molestiae
repellendus
et sunt iure perferendis saepe ipsam.
</p>
</div>
<div class="help2 border-bottom">
<h4 class="mt-2"><span class="icon oi oi-person"></span>Already registered?</h4>
<a href="#" class="btn btn-light btn-sm btn-block mb-3" tabindex="-1" role="button"
aria-disabled="true">Log in
</a>
</div>
<div class="help3">
<h4 class="mt-2"><span class="icon oi oi-person"></span>You're already a ABC customer?</h4>
<a href="#" class="btn btn-light btn-sm btn-block" tabindex="-1" role="button" aria-disabled="true">Log
in to ABC Internet
</a>
</div>
</div>
<script>
</script>
</body>
Have a look at the design , you need the same. because, I was doing the same as you have attached the picture. It is showing me the same in all view.
Their is some mistake, I have highlighted below. please read this for the next time.
First, You have to add Bootstrap CDN in HTML File to use bootstrap classes.
Second, Don't forget to close the tags. Their is no closing tag in many places that's why its design was not showing properly.
Try to write code in format so that you know which closing tag is
missing.
Third, Their is no need to take .h-100 class in body and every div tag or container it automatically. if anywhere you want to less height
then you can use CSS for less height.
<html lang="en">
<head>
<title>Stackoverflow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col-1 col-md-2 col-lg-3"></div>
<div class="col-10 col-md-8 col-lg-6 my-3 border">
<!-- Form -->
<form class="border" action="" method="post" class="my-3">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
</div>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be your username
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName"></label>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">I accept the</label>
<span>
Terms and Conditions
</span>
</div>
<button type="submit" class="btn btn-primary btn-block">Signup</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
<div class="col-1 col-md-2 col-lg-3></div>
</div>
</div>
</body>
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.
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.