CODEWITHSUNDEEP
csstwitter-bootstrap-3
Joanna Avalos
Joanna Avalos

Reputation: 51

Bootstrap Button

I want this button to be aligned horizontally, i'm using bootstrap.min.js v3.0.0, bootstrap.min.css, application.css.

<div class="row">
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-6 form-group">
    <label>Fecha desde</label>
    <div class="input-group date datepicker" >
        <input class="form-control col-md-12" type="text">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
</div>
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-6 form-group">

    <label>Fecha cierre</label>
    <div class="input-group date datepicker">
        <input class="col-md-12 form-control" type="text" />
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-12">
    <input type="button" class="btn btn-success" style="alignment-adjust:central;" value="Buscar" onclick="cargarLista();"/>
</div>

I have:enter image description here

I want:enter image description here

I really appreciate any help you can provide!

Upvotes: 0

Views: 157

Answers (2)

Mrsonord
Mrsonord

Reputation: 101

Looks like you used <legend> on your text inputs. Easy fix would be to add:

<legend>&nbsp;</legend>

To your button input

Upvotes: 0

balexandre
balexandre

Reputation: 75113

Bootstrap is only a framework to help you get started, there are times that you would need to add or override from it's base code.

This is one of those times.

How to proceed:

  • you have wrapping the button a <div> add a class to that div called align-bottom.
  • then, create a file called application.css (if you don't have it yet) in the same place as your CSS files and remember to place that <link> below the bootstrap calls

for example:

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/css/application.css" rel="stylesheet" />

and inside that application.css write the style:

.controls.align-bottom {
    line-height: 90px;
}

Note that you could need to change the 90px up or down in order to make it correctly.

demo in JsBin: http://jsbin.com/vajut/2/edit?html,css,output

This is one of the ways... there are others, CSS is a really big and lovely thing!

Upvotes: 1

Related Questions