Setting the css bootstrap button

Navigation
1

I'm trying to hit the height of a button in the form, but it appears very high relative to the fields: 

<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>
    
asked by anonymous 11.08.2017 / 20:42

2 answers

1

First, you're not using Bootstrap properly.

Column classes, class="col-{xs, sm, md, lg}-{1-12} , should in principle be used within rows, class="row" , but this is less.

The idea of Bootstrap is to create a responsive framework that focuses on the idea of mobile first , meaning the think of mobile devices first, so the col-xs-* class means eXtra Small (extra small), referring to the screen. col-sm-* means small (small). col-md-* , medium (medium). col-lg-* , large (large). Well, but 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

    
11.08.2017 / 21:17
0

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

Click Run and then Toda 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>
    
11.08.2017 / 21:19
Upload ThumbNail How to insert a link to another page in each image of this menu [closed]