Adjustment of css bootstrap button

Asked

Viewed 682 times

1

I’m trying to get the height of one button in the form, but it appears very high in relation to the fields: imagem do formulario

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form>
<div class="col-lg-2">
  <label class="form-group">Categoria:
    <input class="form-control" type="text" name="cat">
  </label>
</div>
<div class="col-lg-2">
  <label class="form-group">Valor: 
    <input class="form-control" type="text" name="valor">
  </label>
</div>
<div class="col-lg-2">
  <button class="btn btn-primary form-control" type="submit">
    <i class="fa fa-floppy-o fa-2x" aria-hidden="true"></i>  Gravar</button>
</div>
</form>

html5 css3 bootstrap-3 form

  • try to post the whole code

2 answers

1


First, you are not using Bootstrap properly.

The column classes, class="col-{xs, sm, md, lg}-{1-12}, in principle should be used within lines, class="row", but that’s the least.

Bootstrap’s idea is to create a framework responsive with a focus on the idea of mobile first, that is, the central idea is that you think of mobile devices first, this way, the class col-xs-* that is to say extra small (extra small), referring to the screen. col-sm-* that is to say small (small). col-md-*, medium (medium). col-lg-*, large (great). Well, but that’s if you’re not just thinking about supporting desktop.

Another thing is, buttons, including button type input and Submit, have their own classes and form-control is not one of them.

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2">
        <label class="form-group">Categoria: <input class="form-control" type="text" name="cat"></label>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2">
        <label class="form-group">Valor: <input class="form-control input-md" type="text" name="valor"></label>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2">
        <button class="btn btn-primary btn-md" type="submit"><i class="fa fa-floppy-o fa-2x" aria-hidden="true"></i> Gravar</button>
    </div>
</div>

Example in Jsfiddle

1

This is happening because the button is missing label, put some that will already solve the problem:

Click on Execute and then in Whole page to see how it will look in the preview you posted in the image. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<form>
<div class="col-lg-2">
  <label class="form-group">Categoria: 
    <input class="form-control" type="text" name="cat">
  </label>
</div>
<div class="col-lg-2">
  <label class="form-group">Valor: 
    <input class="form-control" type="text" name="valor">
  </label>
</div>
<div class="col-lg-2">
  <label class="form-group">Gravar 
    <button class="btn btn-primary form-control" type="submit"><i class="fa fa-floppy-o fa-2x" aria-hidden="true"></i> Gravar</button>
  </label>
</div>
</form>

  • Your answer is not correct. Buttons do not need label, if they needed to be self-closing tags how the input. What happens is that he put the class form-control, used in input in the button.

  • Thank you, Tony Montana. The form-control button was a stupid attempt to hit the alignment of the object. Putting the label on the button doesn’t fix it either. I develop web applications, of course the issue of being responsive is important, but at first Forms will be used on pcs.

Browser other questions tagged html5 css3 bootstrap-3 form

You are not signed in. Login or sign up in order to post.