i have issue with my design in contact form i am trying to represent my contact form like following picture: https://cdn.discordapp.com/attachments/772606698283073557/951615088966631505/unknown.png
But my columns display vertically and i want the textarea (Message) to be inline with input Subject, could you help me please? Thank you!
My HTML:
<section >
<div >
<div >
<div >
<h2 >Contact Us</h2>
</div>
<form action="">
<div >
<div >
<input type="text" placeholder="Subject" required>
</div>
<div >
<input type="email" placeholder="Email" required>
</div>
<div >
<input type="text" placeholder="Name" required>
</div>
</div>
<div >
<div >
<textarea name="text" id="" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div >
<div >
<input type="sumbit" value="Sent Message">
</div>
</div>
</form>
</div>
</div>
</section>
My css:
/***********************************************
For Contact Section
************************************************/
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
CodePudding user response:
You need to encapsulate the columns inside a row
...
<div >
<div >
...
</div>
<div >
...
</div>
<div >
...
</div>
</div>
...
You can check the example below, please note that I have removed the md from the columns classes because the preview is less than the medium screen breakpoint
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section >
<div >
<div >
<div >
<h2 >Contact Us</h2>
</div>
<form action="">
<div >
<div >
<div >
<input type="text" placeholder="Subject" required>
</div>
<div >
<input type="email" placeholder="Email" required>
</div>
<div >
<input type="text" placeholder="Name" required>
</div>
</div>
<div >
<div >
<textarea name="text" id="" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div >
<div >
<input type="sumbit" value="Sent Message">
</div>
</div>
</div>
</form>
</div>
</div>
</section>