Spacing between Bootstrap inputs

Asked

Viewed 10,211 times

2

I wonder how I can add a spacing between the selects, for better understanding see the image down below:

inserir a descrição da imagem aqui

I tried with css: 

.col-md-4 {margin-bottom: 5px;}

But it got weird, man code html currently is like this:

<div class="form-group">
  <div class="row">
    <div class="col-md-4">
      <select name="dia" class="form-control">
        <option>Selecione o dia</option>
      </select>
    </div>

    <div class="col-md-4">
      <select name="mes" class="form-control">
        <option>Selecione o mes</option>
      </select>
    </div>

    <div class="col-md-4">
      <select name="ano" class="form-control">
        <option>Selecione o ano</option>
      </select>
    </div>
  </div>
</div>

I await answers []’s

html css twitter-bootstrap

  • Personal opinion: I don’t like to use the bootstrap with all its features, I only use it as a grid. It would even be more "clean" if you only used one div to determine the column and form elements, since they are below each other, assign a width: 100%.

5 answers

5

Use the classes themselves bootstrap to do this, in this case, leave the form items inside a div with the class form-group

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-md-4">
  <select name="dia" class="form-control">
    <option>Selecione o dia</option>
  </select>
</div>
<div class="form-group col-md-4">
  <select name="mes" class="form-control">
    <option>Selecione o mes</option>
  </select>
</div>
<div class="form-group col-md-4">
  <select name="ano" class="form-control">
    <option>Selecione o ano</option>
  </select>
</div>

  • Thank you so much for your answers, but I solved it using .col-xs instead of .col-md so the selects fit right in.

  • 1

    form-group is for this. I think there is no need to have a div only for her can leave in col-Md-4

  • @Guilhermegouveiaalves when you use the col-xs you are defining that your div will have 4 columns for extra small resolution and if not defined the amount for the other resolutions, will be adopted 4 columns for all resolutions. See in this answer the definition of each bootstrap resolution

  • @Gabrielrodrigues is right, I changed according to your suggestion.

1

You should put a !important in your css. This way:

.col-md-4 {margin-bottom: 5px;!important}

Upshot: inserir a descrição da imagem aqui

When working with bootstrap, remember this. CSS is basically ready. So to edit what already exists, you need the !important

  • All right, but I noticed a strange behavior, I would like you to modify only in the responsive, only in the responsive selects join.

  • This is because the code is inside a @media (min-width: 992px).

0


I found a simple solution, as I am novice with Bootstrap, looking at the site I saw there have the options .col.xs-? .col-md-?, I just traded .col-md for .col-xs and it became even more beautiful the design of the site, it fitted the 3 selects we will say that in one line.

Select the day 

    <div class="col-xs-4">
      <select name="mes" class="form-control">
        <option>Selecione o mes</option>
      </select>
    </div>

    <div class="col-xs-4">
      <select name="ano" class="form-control">
        <option>Selecione o ano</option>
      </select>
    </div>
  </div>
</div>

-3

Nonsense, my dear 

<div class="form-control" style="width:???px; margin-bottom:2px">
    <select runat="server" name="mes" id="mes">
        <option>Selecione o mes</option>
    </select>
</div>

<div class="form-control" style="width:???px; margin-bottom:2px">
    <select name="ano" id="ano">
        <option>Selecione o ano</option>
    </select>
</div>

-3

you can put all inputs with class= "input" dps put in css .input{margin-top: 5px}

Browser other questions tagged html css twitter-bootstrap

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