1
I have the following form
However, the H3 icon, from above, was OK, only the next titles I put, are on the side of the form, how to do to adjust?
HTML:
<h3 class="titulos_cadastro"><i class="rt-icon2-waves"></i> Dados Profissionais</h3>
<div class="col-sm-8">
<div class="form-group">
<label for="name" class="sr-only">Nome do Perfil
<span class="required">*</span>
</label>
<input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Nome do Perfil">
<i class="rt-icon2-user"></i>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Sua Categoria
<span class="required">*</span>
</label>
<select aria-required="true" id="" name="" class="form-control">
<option>Sua Categoria</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Telefone
<span class="required">*</span>
</label>
<input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu Telefone">
<i class="rt-icon2-phone"></i>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">WhatsApp
<span class="required">*</span>
</label>
<input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu WhatsApp">
<i class="rt-icon2-whatsapp"></i>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Cabelo
<span class="required">*</span>
</label>
<select aria-required="true" id="" name="" class="form-control">
<option>Cabelo</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Idade
<span class="required">*</span>
</label>
<select aria-required="true" id="" name="" class="form-control">
<option>Sua idade</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Sua Cidade
<span class="required">*</span>
</label>
<select aria-required="true" id="" name="" class="form-control">
<option>Sua Cidade</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Altura
<span class="required">*</span>
</label>
<input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Sua Altura">
<i class="rt-icon2-layers"></i>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Peso
<span class="required">*</span>
</label>
<input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu Peso">
<i class="rt-icon2-media-record"></i>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Você faz
<span class="required">*</span>
</label>
<select aria-required="true" id="" name="" class="form-control">
<option>Sua Cidade</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Locais de Atendimento
<span class="required">*</span>
</label>
<input type="text" aria-required="true" value="" name="name" id="name" class="form-control with-icon" placeholder="Sua Altura">
<i class="rt-icon2-layers"></i>
</div>
</div>
<h3 class="titulos_cadastro"><i class="rt-icon2-photo"></i> Foto de Capa</h3>
<div class="col-sm-12">
<div class="form-group">
<label for="name" class="sr-only">Nome do Perfil
<span class="required">*</span>
</label>
<input type="file" class="form-control">
</div>
</div>
Try placing a display: block on H3.
– Diego Vieira