How can I vertically align a div content with bootstrap 3?

Question

How can I vertically align a div content with bootstrap 3?

Navigation

#1 by (3 votes)

1

If you observe the example in a resolution of 1024p you can see how the text of label is extended and the select stuck to the top of the div that corresponds to the.

Here's the example of my form :

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <form class="form-horizontal" role="form" id="">
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">
        <label for="editar_pro" class="control-label col-xs-2 col-sm-2 col-lg-2 col-md-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
      </div>
    </form>

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

I see an example that I got but it works with bootstrap 4. Source here

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container">
<form class="form-horizontal" role="form" id="">
  <div class="row align-items-center">
        <label for="" class="control-label col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class=" col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
  </div>
</form>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" type="text/javascript"></script>

html css3 css bootstrap bootstrap-3

asked by Pablo Contreras 11.02.2017 в 06:10

source

1 answer

Remove animation timing function flicker Error in consuming web service c # [duplicated]

score 3 · Accepted Answer

I continued researching and I came across a css that solves it:

.form-group {
    display: flex;
    align-items: center;
}

Here is the demonstration:

.form-group {
    display: flex;
    align-items: center;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <form class="form-horizontal" role="form" id="">
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">
        <label for="" class="control-label col-xs-2 col-sm-2 col-lg-2 col-md-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
      </div>
    </form>

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>