Reputation: 39
I'm having a hard time trying to figure out how to build a contact form like this one in the image; whats the best way to get input-controls in Bootstrap 3?
I can't manage to make my form label squares and aligned like the ones in the picture.
This is my current code:
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 sub-text">
<h1>
Contato
</h1>
<hr>
<p>
Se deseja falar conosco, envie uma mensagem
</p>
</div><!-- end col -->
<div class="col-sm-1">
</div>
<div class="col-sm-4">
<form class="form-inline" role="form">
<div class="form-group">
<label for="name"></label>
<input type="name" class="form-control" id="name" placeholder="Nome">
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group">
<label for="email"></label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group">
<label for="phone"></label>
<input type="phone" class="form-control" id="phone" placeholder="Telefone">
</div>
</form>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="exampleTextarea"></label>
<textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Mensagem" ></textarea>
</fieldset>
</div>
<div class="col-sm-1">
</div>
</div><!-- end row -->
<div class="row">
<div class="col-sm-12 footer-text">
<p>
Copyright © 2015 . Todos os direitos reservados.
</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</footer>
Upvotes: 2
Views: 261
Reputation: 155
The best way to do that is create custom Class and extend them by boostrap classes , you should use grid system to make it easier , grid should look like this
<div class="col-md-12">
<h1 class="text-center">TITLE</h1>
<div class="col-md-4">
<p>left box</p>
</div>
<div class="col-md-8">
<p>right box</p>
</div>
</div>
Remember about adding boostrap to your code ;)
Upvotes: 0
Reputation: 32355
Adjusted your code to try and replicate the output in the image.
border-radius
applied to the Bootstrap form fields and text-area.col-sm-1
to create horizontal space, use col-sm-offset-*
class to provide that.footer .form-inline .form-control,
footer .form-group textarea {
border-radius: 0;
}
.vertical-offset-15 {
margin-top: 15px;
}
.vertical-offset-5 {
margin-top: 5px;
}
input {
min-width: 300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 sub-text">
<h1>
Contato
</h1>
<hr>
<p>
Se deseja falar conosco, envie uma mensagem
</p>
</div>
<!-- end col -->
<div class="col-sm-6 vertical-offset-5">
<form class="form-inline" role="form">
<div class="form-group vertical-offset-15">
<label for="name"></label>
<input type="name" class="form-control" id="name" placeholder="Nome">
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group vertical-offset-15">
<label for="email"></label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group vertical-offset-15">
<label for="phone"></label>
<input type="phone" class="form-control" id="phone" placeholder="Telefone">
</div>
</form>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="exampleTextarea"></label>
<textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Mensagem"></textarea>
</fieldset>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-sm-12 footer-text">
<p>
Copyright © 2015 . Todos os direitos reservados.
</p>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</footer>
Upvotes: 1